इस पेज पर बताया गया है कि Chrome DevTools कंसोल की मदद से, वेब पेजों को आसानी से कैसे डेवलप किया जा सकता है. Console के दो मुख्य इस्तेमाल होते हैं: लॉग किए गए मैसेज देखना और JavaScript चलाना.
लॉग किए गए मैसेज देखना
वेब डेवलपर अक्सर कंसोल में मैसेज लॉग करते हैं, ताकि यह पक्का किया जा सके कि उनका JavaScript उम्मीद के मुताबिक काम कर रहा है. किसी मैसेज को लॉग करने के लिए, आपको अपनी JavaScript में console.log('Hello, Console!') जैसा कोई एक्सप्रेशन डालना होता है. जब ब्राउज़र आपके JavaScript को एक्ज़ीक्यूट करता है और इस तरह का कोई एक्सप्रेशन देखता है, तो उसे पता चलता है कि उसे मैसेज को कंसोल में लॉग करना चाहिए. उदाहरण के लिए, मान लें कि आप किसी पेज
के लिए एचटीएमएल और JavaScript लिखने की प्रक्रिया में हैं:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
पहली इमेज से पता चलता है कि पेज लोड होने और तीन सेकंड तक इंतज़ार करने के बाद, कंसोल कैसा दिखता है. यह पता लगाने की कोशिश करें कि कोड की किन लाइनों की वजह से ब्राउज़र मैसेज को लॉग करता है.
पहला डायग्राम. कंसोल पैनल.
वेब डेवलपर दो सामान्य वजहों से मैसेज लॉग करते हैं:
- पक्का करना कि कोड सही क्रम में चलाया जा रहा है.
- किसी खास समय पर वैरिएबल की वैल्यू की जांच करना.
लॉगिन करने का बेहतर अनुभव पाने के लिए, लॉगिंग मैसेज का इस्तेमाल शुरू करें देखें. console तरीकों की पूरी सूची ब्राउज़ करने के लिए, कंसोल एपीआई का रेफ़रंस देखें. तरीकों के बीच मुख्य अंतर यह है कि वे उस डेटा को कैसे दिखाते हैं जिसे लॉग इन किया जा रहा है.
JavaScript चलाया जा रहा है
कंसोल एक REPL भी होता है. जिस पेज की जांच की जा रही है उसके साथ इंटरैक्ट करने के लिए, Console में JavaScript चलाया जा सकता है. उदाहरण के लिए, इमेज 2 में DevTools के होम पेज के बगल में मौजूद 'कंसोल' दिखता है. और तीसरी इमेज में, पेज का टाइटल बदलने के लिए Console का इस्तेमाल करने के बाद वही पेज दिखता है.
दूसरा डायग्राम. DevTools होम पेज के बगल में मौजूद कंसोल पैनल.
तीसरा डायग्राम. पेज का शीर्षक बदलने के लिए कंसोल का इस्तेमाल करना.
कंसोल से पेज में बदलाव किया जा सकता है, क्योंकि कंसोल के पास पेज के window का पूरा ऐक्सेस होता है. DevTools में, कुछ सुविधा फ़ंक्शन हैं. इनकी मदद से, किसी पेज की जांच करना आसान हो जाता है. उदाहरण
के लिए, मान लें कि आपके JavaScript में hideModal नाम का एक फ़ंक्शन शामिल है. debug(hideModal) चालू होने पर, अगली बार hideModal की पहली लाइन को कॉल करने पर, आपका कोड रुक जाता है.
यूटिलिटी फ़ंक्शन की पूरी सूची देखने के लिए, Console Utilities API रेफ़रंस देखें.
JavaScript चलाने पर, आपको पेज से इंटरैक्ट करने की ज़रूरत नहीं होती. आप कंसोल का इस्तेमाल करके,
ऐसे नए कोड को आज़मा सकते हैं जो पेज से नहीं जुड़ा है. उदाहरण के लिए, मान लें कि आपने अभी-अभी JavaScript में मौजूद अरे के तरीके map() के बारे में सीखा है और आपको इसके साथ प्रयोग करना है. इस फ़ंक्शन को आज़माने के लिए
कंसोल अच्छी जगह है.
कंसोल में JavaScript चलाने का बेहतरीन अनुभव पाने के लिए, JavaScript चलाने की सुविधा का इस्तेमाल शुरू करना देखें.