HTML ब्राउज़र DevTools

DevTools खोलना

हर बड़े browser में एक built-in DevTools panel होता है जिसे किसी extension को install किए बिना keyboard shortcut से या browser के menu से खोला जा सकता है।

ज़्यादातर browsers पर यह F12 या Ctrl+Shift+I (Mac पर Cmd+Option+I) होता है, और यह window के किनारे या नीचे docked होकर खुलता है।

उदाहरण: Opening DevTools

<!-- Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) to open DevTools -->
<p>Try it on this page</p>

एलिमेंट्स इंस्पेक्ट करना

Elements panel page के live HTML structure को एक tree के रूप में दिखाता है, जिससे आप किसी भी node पर क्लिक करके उसका exact markup, computed styles, और box model measurements देख सकते हैं।

आप इस panel में HTML और CSS को live भी edit करके experiment कर सकते हैं, हालाँकि बदलाव अस्थायी होते हैं और refresh पर गायब हो जाते हैं।

उदाहरण: Inspecting Elements

<div id="target">Click the element picker, then click this div</div>

Elements पैनल में लाइव HTML एडिट करना

Elements panel में किसी text या attribute पर double-click करने से वह सीधे editable हो जाता है, जिससे आप असली source file को छुए बिना markup में बदलाव करके experiment कर सकते हैं और result तुरंत देख सकते हैं।

उदाहरण: Editing HTML Live in the Elements Panel

<p id="editable">Double-click this text in DevTools to edit it live</p>

कंसोल बेसिक्स

Console tab current page से जुड़ा एक interactive JavaScript environment है, जो error messages, logged output दिखाता है, और आपको live page पर अपने खुद के script snippets चलाने देता है।

उदाहरण: Console Basics

<script>
  console.log('Open the Console tab to see this message');
</script>

HTML रिसोर्सेज के लिए Network टैब इस्तेमाल करना

Network tab किसी page द्वारा request की गई हर file को लिस्ट करता है, जिसमें HTML document खुद, stylesheets, scripts, और images शामिल हैं, साथ ही हर request का status code और load time भी।

जब कोई image, script, या stylesheet अचानक किसी page पर लोड होना बंद कर दे, तो यह चेक करने की पहली जगह होती है।

उदाहरण: Using the Network Tab for HTML Resources

<img src="missing-file.jpg" alt="Check the Network tab for a 404 status">