किसी पेज की जाँच, परीक्षण और निदान के लिए अपने ब्राउज़र में पहले से मौजूद टूल खोलें।
इस पाठ को Kodokon में खोलेंआपका ब्राउज़र एक पूरी कार्यशाला छिपाए बैठा है, जो पहले से इंस्टॉल है, मुफ़्त है, और जिसे ज़्यादातर लोग कभी नहीं खोलेंगे। इसे डेवलपर टूल कहते हैं, जिसे अक्सर छोटा करके devtools कह दिया जाता है। इन्हें खोलने के लिए F12 दबाएँ, या पेज पर कहीं भी राइट-क्लिक करके "Inspect" चुनें। Mac पर शॉर्टकट Cmd + Option + I है। तब विंडो के किनारे या नीचे एक पैनल खुलता है, जिसमें कई टैब होते हैं।
पहला टैब, जिसे आपके ब्राउज़र के हिसाब से Elements या Inspector कहा जाता है, पेज का HTML ठीक उसी रूप में दिखाता है जैसा वह इस वक़्त ब्राउज़र की मेमोरी में है। किसी पंक्ति पर माउस ले जाइए: पेज पर उससे मेल खाता हिस्सा जगमगा उठता है। किसी टेक्स्ट पर डबल-क्लिक कीजिए: आप उसे दोबारा लिख सकते हैं और बदलाव तुरंत देख सकते हैं। दूसरों के पेज खोल-खोलकर देखना ही यह समझने का सबसे अच्छा तरीक़ा है कि कोई पेज बना कैसे है।
Console टैब वही है जहाँ आप सबसे ज़्यादा समय बिताएँगे। जब कुछ टूटता है तो यह लाल रंग में त्रुटि संदेश दिखाता है, और यह आपके सीधे टाइप किए हुए निर्देश भी स्वीकार करता है, जो आपके खुले हुए पेज के संदर्भ में चलते हैं। किसी भी साइट पर आज़माइए: एक पंक्ति टाइप कीजिए, Enter दबाइए, और देखिए क्या होता है।
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"Network टैब वह सब कुछ आँखों के सामने ला देता है जो आपने पिछले पाठों में सीखा। इसे खोलिए, फिर F5 से पेज दोबारा लोड कीजिए: हर अनुरोध अपनी अलग पंक्ति में दिखता है, अपने पते, अपनी मेथड, अपने स्टेटस कोड, अपने आकार और लगे समय के साथ। लाल पंक्ति किसी नाकाम अनुरोध की ओर इशारा करती है। यहीं आपको पता चलता है, मिसाल के तौर पर, कि कोई छवि इसलिए नहीं दिख रही क्योंकि वह 404 लौटा रही है।