ब्राउज़र डेवलपर टूल्स का उपयोग कैसे करें
ब्राउज़र डेवलपर टूल्स वेब पेज की internal structure को देखने और debug करने के लिए built-in tools हैं। ये टूल्स HTML elements को inspect करने, CSS styles को modify करने और JavaScript errors को debug करने में मदद करते हैं।
- डेवलपर टूल्स को खोलें. Chrome, Firefox या Edge में F12 key दबाएं या right-click करके 'Inspect' या 'Inspect Element' select करें। macOS में Cmd+Option+I shortcut का इस्तेमाल करें। Safari में पहले Preferences > Advanced से 'Show Develop menu' enable करना होगा।
- Elements panel में HTML structure को explore करें. Elements tab में पूरा HTML structure tree format में दिखता है। किसी भी element पर click करके उसे select करें। Selected element page पर highlight होगा और उसके attributes right panel में दिखेंगे।
- CSS styles को inspect और modify करें. Elements panel के right side में Styles section में selected element के सभी CSS rules दिखते हैं। कोई भी property value पर click करके उसे change कर सकते हैं। नई properties add करने के लिए empty space पर click करें।
- Console में JavaScript commands run करें. Console tab पर जाकर JavaScript commands type करें और Enter दबाएं। Variables की values check कर सकते हैं, functions call कर सकते हैं और page के साथ interact कर सकते हैं। console.log() messages भी यहां appear होते हैं।
- Network activity को monitor करें. Network tab में page load होते समय सभी HTTP requests दिखती हैं। Hard refresh (Ctrl+F5) करके fresh load देखें। किसी भी request पर click करके headers, response और timing details देख सकते हैं।
- Performance issues को debug करें. Performance tab में record button दबाकर page interactions record करें। Loading times, JavaScript execution और rendering performance की detailed analysis मिलती है। Memory leaks identify करने के लिए Memory tab का इस्तेमाल करें।
- Mobile device mode enable करें. Device toolbar icon (mobile/tablet icon) पर click करके responsive design mode activate करें। विभिन्न device sizes test कर सकते हैं और touch events simulate कर सकते हैं। Preset devices list से iPhone, iPad जैसे popular devices select करें।