গুগল ক্রোম বাক্সের বাইরে " ক্রোম ডেভটুলস " নামে একটি অন্তর্নির্মিত ডিবাগিং সরঞ্জাম সরবরাহ করে, এতে একটি দুর্দান্ত বৈশিষ্ট্য রয়েছে যা কোনও তৃতীয় পক্ষের এক্সটেনশন ছাড়াই এক্সপ্যাথ / সিএসএস নির্বাচকদের মূল্যায়ন বা বৈধ করতে পারে।
এটি দুটি পদ্ধতির মাধ্যমে করা যেতে পারে:
এক্সপ্যাথ / সিএসএস নির্বাচনকারীদের মূল্যায়ন করতে এবং ডিওএমে ম্যাচিং নোডগুলি হাইলাইট করতে এলিমেন্টস প্যানেলের ভিতরে অনুসন্ধান ফাংশনটি ব্যবহার করুন। কনসোল প্যানেলে টোকেন $ x ("কিছু_প্যাথ") বা $$ ("সিএসএস-নির্বাচক") চালিত করুন, যা মূল্যায়ন ও বৈধতা উভয়ই দেবে।
এলিমেন্টস প্যানেল থেকে
Chrome DevTools খুলতে F12 টিপুন।
ডিফল্টরূপে এলিমেন্টস প্যানেলটি খুলতে হবে।
প্যানেলে DOM অনুসন্ধান সক্ষম করতে Ctrl + F টিপুন।
মূল্যায়ন করতে এক্সপথ বা সিএসএস নির্বাচকগুলিতে টাইপ করুন।
যদি মিলিত উপাদান থাকে তবে সেগুলি ডিওএম এ হাইলাইট করা হবে। যাইহোক, যদি ডিওএম-এর অভ্যন্তরে কোনও মিলের স্ট্রিং থাকে তবে সেগুলি বৈধ ফলাফল হিসাবেও বিবেচিত হবে। উদাহরণস্বরূপ, সিএসএস নির্বাচক শিরোনামের সাথে ম্যাচ করা উচিত কেবলমাত্র উপাদানগুলির পরিবর্তে শিরোনাম শব্দের সমন্বিত সমস্ত কিছু (ইনলাইন সিএসএস, স্ক্রিপ্টস ইত্যাদি) match
কনসোল প্যানেল থেকে
Chrome DevTools খুলতে F12 টিপুন।
কনসোল প্যানেলে স্যুইচ করুন।
এক্সপথে টাইপ করুন $x(".//header")
মূল্যায়ন করতে এবং বৈধ করতে চান।
সিএসএস নির্বাচকগুলিতে টাইপ করুন $$("header")
মূল্যায়ন করতে এবং বৈধ করতে চান।
কনসোল কার্যকর করা থেকে পরীক্ষার ফলাফল ফিরে এসেছে।
উপাদানগুলির সাথে মিলে গেলে সেগুলি একটি তালিকায় ফিরে আসবে। অন্যথায় একটি খালি তালিকা [] প্রদর্শিত হবে।
$x(".//article")
[<article class="unit-article layout-post">…</article>]
$x(".//not-a-tag")
[ ]
যদি এক্সপথ বা সিএসএস নির্বাচনকারী অবৈধ হয় তবে একটি ব্যতিক্রম লাল পাঠ্যে প্রদর্শিত হবে। উদাহরণ স্বরূপ:
$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.