इस पेज पर बताया गया है कि Chrome DevTools कंसोल की मदद से, वेब पेज कैसे डेवलप किए जा सकते हैं. कंसोल इसके दो मुख्य तरीके हैं: लॉग किए गए मैसेज देखना और JavaScript चलाना.
लॉग किए गए मैसेज देखना
वेब डेवलपर अक्सर मैसेज को कंसोल में लॉग करते हैं, ताकि यह पक्का किया जा सके कि उनका JavaScript
उम्मीद है. मैसेज को लॉग करने के लिए, आपको अपनेconsole.log('Hello, Console!')
JavaScript. जब ब्राउज़र आपकी 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 चलाने का विकल्प है जिसकी जांच की जा रही है. उदाहरण के लिए, दूसरी इमेज DevTools के होम पेज के बगल में मौजूद कंसोल दिखाती है, और इमेज 3 में उसी पेज को दिखाया गया है जो पेज का टाइटल बदलने के लिए, कंसोल का इस्तेमाल करने के बाद दिखता है.
दूसरी इमेज. DevTools होम पेज के बगल में मौजूद कंसोल पैनल.
तीसरी इमेज. पेज का टाइटल बदलने के लिए, कंसोल का इस्तेमाल करना.
कंसोल से पेज में बदलाव किया जा सकता है, क्योंकि कंसोल के पास पेज की
window. DevTools में कुछ ही सुविधा वाले फ़ंक्शन हैं, जिनकी मदद से किसी पेज की जांच करना आसान हो जाता है. इसके लिए
उदाहरण के लिए, मान लें कि आपकी JavaScript में hideModal नाम का एक फ़ंक्शन है. दौड़ना
अगली बार जब कॉल किया जाता है, तो debug(hideModal) आपके कोड को hideModal की पहली लाइन में रोक देता है.
यूटिलिटी फ़ंक्शन की पूरी सूची देखने के लिए, Console Utilities API का संदर्भ लेख पढ़ें.
JavaScript चलाने पर आपको पेज के साथ इंटरैक्ट करने की ज़रूरत नहीं होती. इसे आज़माने के लिए, कंसोल का इस्तेमाल किया जा सकता है
नया कोड डालें, जो पेज से संबंधित नहीं है. उदाहरण के लिए, मान लें कि आपने अभी-अभी बिल्ट-इन
JavaScript अरे मेथड map() और आपको इसके साथ एक्सपेरिमेंट करना है. कंसोल अच्छा है
यहां फ़ंक्शन को आज़माया जा सकता है.
JavaScript चलाने का अनुभव पाने के लिए, JavaScript चलाने का तरीका जानें देखें कर सकते हैं.