अगर आपके कंसोल में एक ही कोड बार-बार चल रहा है, तो कोड को स्निपेट के तौर पर सेव करें. स्निपेट के पास पेज के JavaScript कॉन्टेक्स्ट का ऐक्सेस होता है. ये बुकमार्कलेट के एक विकल्प हैं.
सोर्स पैनल में स्निपेट लिखे जा सकते हैं और उन्हें किसी भी पेज पर और गुप्त मोड में चलाया जा सकता है.
उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में बाईं ओर DevTools दस्तावेज़ का होम पेज और दाईं ओर मौजूद Sources > स्निपेट पैनल में कुछ स्निपेट सोर्स कोड दिखाए गए हैं.
यहां एक स्निपेट सोर्स कोड दिया गया है, जो कुछ मैसेज लॉग करता है और होम पेज के एचटीएमएल मुख्य हिस्से को मैसेज वाले <p> एलिमेंट से बदल देता है:
console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
रन बटन पर क्लिक करने से, कंसोल पैनल पॉप-अप होता है. इसमें, स्निपेट लॉग करने पर दिखने वाला Hello, Snippets! मैसेज दिखता है. इससे पेज का कॉन्टेंट बदल जाता है.
स्निपेट पैनल खोलें
स्निपेट पैनल में आपके स्निपेट होते हैं. स्निपेट में बदलाव करने के लिए, उसे इन दो में से किसी एक तरीके से खोलें:
सोर्स >
> स्निपेट पर जाएं.
Command मेन्यू से:
- Command मेन्यू खोलने के लिए, Control+Shift+P (Windows/Linux) या Command+Shift+P (Mac) दबाएं.
Snippetsटाइप करें और स्निपेट दिखाएं चुनें. इसके बाद, Enter दबाएं.
सोर्स>स्निपेट पैनल में, आपको सेव किए गए स्निपेट की एक सूची दिखती है. इस उदाहरण में कोई जानकारी मौजूद नहीं होती.
स्निपेट बनाएं
स्निपेट पैनल में या DevTools में कहीं भी कमांड मेन्यू से संबंधित निर्देश को चलाकर, स्निपेट बनाए जा सकते हैं.
स्निपेट पैनल के ज़रिए आपके स्निपेट को वर्णमाला के क्रम में लगाया जाता है.
सोर्स पैनल में स्निपेट बनाना
- स्निपेट पैनल खोलें.
नया स्निपेट पर क्लिक करें.अपने स्निपेट के लिए कोई नाम डालें और सेव करने के लिए, Enter दबाएं.
निर्देश मेन्यू से स्निपेट बनाना
- अपने कर्सर को DevTools के अंदर कहीं भी फ़ोकस करें.
- Command मेन्यू खोलने के लिए, Control+Shift+P (Windows/Linux) या Command+Shift+P (Mac) दबाएं.
Snippetटाइप करें और नया स्निपेट बनाएं चुनें. इसके बाद, निर्देश चलाने के लिए Enter दबाएं.
अगर आपको अपने नए स्निपेट को अपनी पसंद के मुताबिक नाम देना है, तो स्निपेट का नाम बदलें देखें.
स्निपेट में बदलाव करें
- स्निपेट पैनल खोलें.
स्निपेट पैनल में, उस स्निपेट के नाम पर क्लिक करें जिसमें आपको बदलाव करना है. सोर्स पैनल से, यह कोड एडिटर में खुलता है.
अपने स्निपेट में कोड में बदलाव करने के लिए कोड एडिटर का इस्तेमाल करें. स्निपेट के नाम के बगल में तारे का निशान दिखने का मतलब है कि आपने अब तक बदलाव सेव नहीं किए हैं.
सेव करने के लिए, Control+S (Windows/Linux) या Command+S (Mac) दबाएं.
स्निपेट चलाएं
स्निपेट बनाने की तरह ही, इसे स्निपेट पैनल में और कमांड मेन्यू, दोनों से चलाया जा सकता है.
सोर्स पैनल में स्निपेट चलाएं
- स्निपेट पैनल खोलें.
- जिस स्निपेट को चलाना है उसके नाम पर क्लिक करें. सोर्स पैनल से, यह कोड एडिटर में खुलता है.
एडिटर में सबसे नीचे मौजूद ऐक्शन बार में
Run पर क्लिक करें या Control+Enter (Windows/Linux) या Command+Enter (Mac) दबाएं.
'निर्देश मेन्यू' से स्निपेट चलाएं
- अपने कर्सर को DevTools के अंदर कहीं भी फ़ोकस करें.
- Command मेन्यू खोलने के लिए, Control+O (Windows/Linux) या Command+O (Mac) दबाएं.
!वर्ण टाइप करें. इसके बाद, उस स्निपेट का नाम लिखें जिसे आपको चलाना है.
स्निपेट चलाने के लिए Enter दबाएं.
स्निपेट का नाम बदलें
- स्निपेट पैनल खोलें.
- स्निपेट के नाम पर राइट क्लिक करें और नाम बदलें चुनें.
स्निपेट मिटाएं
- स्निपेट पैनल खोलें.
- स्निपेट के नाम पर राइट क्लिक करें और हटाएं चुनें.