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