JavaScript के स्निपेट चलाएं

कायस बैस्क

Twitter GitHub Glitch

सोफ़िया इमेलियानोवा

GitHub

अगर कंसोल में बार-बार एक ही कोड इस्तेमाल किया जा रहा है, तो उस कोड को स्निपेट के तौर पर सेव करें. स्निपेट के पास पेज के JavaScript कॉन्टेक्स्ट का ऐक्सेस होता है. वे बुकमार्कलेट के विकल्प हैं.

सोर्स पैनल में स्निपेट लिखे जा सकते हैं और उन्हें किसी भी पेज पर और गुप्त मोड में चलाया जा सकता है.

ध्यान दें: DevTools स्निपेट को आपकी स्थानीय प्राथमिकताओं के तौर पर सेव करता है. DevTools स्निपेट को सेटिंग के साथ सिंक नहीं करता. साथ ही, उन्हें फ़ाइल सिस्टम से ऐक्सेस नहीं किया जा सकता.

उदाहरण के लिए, नीचे दिए गए स्क्रीनशॉट में, बाईं ओर DevTools दस्तावेज़ का होम पेज है. साथ ही, दाईं ओर सोर्स > स्निपेट पैनल में कुछ स्निपेट सोर्स कोड भी हैं.

यहां स्निपेट सोर्स कोड दिया गया है, जो कुछ मैसेज को लॉग करता है और होम पेज के एचटीएमएल बॉडी को मैसेज वाले <p> एलिमेंट से बदल देता है:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

रन बटन पर क्लिक करने पर, कंसोल पैनल पॉप-अप होता है. इसमें, स्निपेट लॉग होने वाला Hello, Snippets! मैसेज और पेज का कॉन्टेंट बदल जाता है.

स्निपेट पैनल खोलें

स्निपेट पैनल में आपके स्निपेट की सूची होती है. किसी स्निपेट में बदलाव करने के लिए, उसे इन दो में से किसी एक तरीके से खोलें:

1. स्रोत > > स्निपेट पर जाएं.

   

2. कमांड मेन्यू से:

   1. Command मेन्यू खोलने के लिए, Control+Shift+P (Windows/Linux) या Command+Shift+P (Mac) दबाएं.
   2. Snippets टाइप करना शुरू करें, स्निपेट दिखाएं चुनें, और Enter दबाएं.

   

स्रोत>स्निपेट पैनल, आपको सेव किए गए स्निपेट की सूची दिखाता है. यह सूची इस उदाहरण में खाली है.

स्निपेट बनाएं

आप स्निपेट पैनल में स्निपेट बना सकते हैं. इसके अलावा, आप DevTools में कहीं भी Command मेन्यू का इस्तेमाल करके, इससे जुड़े निर्देश चलाकर स्निपेट बना सकते हैं.

स्निपेट पैनल आपके स्निपेट को वर्णमाला के क्रम में लगा देता है.

स्रोत पैनल में स्निपेट बनाएं

1. स्निपेट पैनल खोलें.
2. नया स्निपेट पर क्लिक करें.

3. अपने स्निपेट के लिए एक नाम डालें और सेव करने के लिए Enter दबाएं.

   

कमांड मेन्यू से स्निपेट बनाना

1. अपने कर्सर को DevTools के अंदर कहीं भी फ़ोकस करें.
2. Command मेन्यू खोलने के लिए, Control+Shift+P (Windows/Linux) या Command+Shift+P (Mac) दबाएं.

3. Snippet टाइप करना शुरू करें और नया स्निपेट बनाएं को चुनें. इसके बाद, निर्देश चलाने के लिए, Enter दबाएं.

   

अगर आपको नए स्निपेट को अपनी पसंद के मुताबिक नाम देना है, तो स्निपेट के नाम बदलें लेख पढ़ें.

स्निपेट में बदलाव करें

1. स्निपेट पैनल खोलें.

2. स्निपेट पैनल में, उस स्निपेट के नाम पर क्लिक करें जिसमें बदलाव करना है. सोर्स पैनल से, यह कोड एडिटर में खुलता है.

   

3. अपने स्निपेट में कोड में बदलाव करने के लिए, कोड एडिटर का इस्तेमाल करें. स्निपेट के नाम के बगल में तारे के निशान का मतलब है कि आपने अभी तक अपने बदलाव सेव नहीं किए हैं.

   

4. सेव करने के लिए Control+S (Windows/Linux) या Command+S (Mac) दबाएं.

स्निपेट चलाएं

स्निपेट बनाने की तरह ही, इसे स्निपेट पैनल और कमांड मेन्यू, दोनों में चलाया जा सकता है.

स्रोत पैनल में स्निपेट चलाएं

1. स्निपेट पैनल खोलें.
2. उस स्निपेट के नाम पर क्लिक करें जिसे आपको चलाना है. सोर्स पैनल से, यह कोड एडिटर में खुलता है.

3. एडिटर में सबसे नीचे मौजूद ऐक्शन बार में, चलाएं पर क्लिक करें या Control+Enter (Windows/Linux) या Command+Enter (Mac) दबाएं.

   

कमांड मेन्यू से स्निपेट चलाएं

1. अपने कर्सर को DevTools के अंदर कहीं भी फ़ोकस करें.
2. Command मेन्यू खोलने के लिए Control+O (Windows/Linux) या Command+O (Mac) दबाएं.

3. ! वर्ण के बाद उस स्निपेट का नाम टाइप करें जिसे आपको चलाना है.

   

4. स्निपेट चलाने के लिए, Enter दबाएं.

स्निपेट के नाम बदलें

1. स्निपेट पैनल खोलें.
2. स्निपेट के नाम पर राइट क्लिक करें और नाम बदलें चुनें.

स्निपेट हटाएं

1. स्निपेट पैनल खोलें.
2. स्निपेट के नाम पर राइट क्लिक करें और हटाएं चुनें.