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

Kayce Basques

Sofia Emelianova

अगर आपको कंसोल में एक ही कोड को बार-बार चलाना पड़ता है, तो कोड को स्निपेट के तौर पर सेव करें. स्निपेट के पास पेज के 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);

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

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

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

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

   

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

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

   

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

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

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

स्निपेट पैनल, आपके स्निपेट को अंग्रेज़ी वर्णमाला के क्रम में लगाता है.

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

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

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

   

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

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

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

   

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

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

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

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

   

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

   

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

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

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

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

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

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

   

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

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

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

   

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

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

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

स्निपेट मिटाना

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