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

Sofia Emelianova
Sofia Emelianova

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

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

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

स्निपेट चलाने से पहले, 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. सोर्स &gt; ज़्यादा टैब. &gt; स्निपेट पर जाएं.

    सोर्स पैनल में मौजूद &#39;ज़्यादा&#39; टैब मेन्यू.

  2. Command मेन्यू से:

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

    कमांड मेन्यू से स्निपेट दिखाएं को चुनना.

सोर्स&gt;स्निपेट पैनल में, आपको सेव किए गए स्निपेट की एक सूची दिखती है. इस उदाहरण में कोई जानकारी मौजूद नहीं होती.

एक खाली स्निपेट पैनल.

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

स्निपेट पैनल में या DevTools में कहीं भी कमांड मेन्यू से संबंधित निर्देश को चलाकर, स्निपेट बनाए जा सकते हैं.

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

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

  1. स्निपेट पैनल खोलें.
  2. नया स्निपेट. नया स्निपेट पर क्लिक करें.
  3. अपने स्निपेट के लिए कोई नाम डालें और सेव करने के लिए, Enter दबाएं.

    स्निपेट को नाम देना.

निर्देश मेन्यू से स्निपेट बनाना

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

    &#39;निर्देश मेन्यू&#39; से &#39;नया स्निपेट बनाएं&#39; चुनें.

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

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

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

    कोड एडिटर में एक स्निपेट खोला गया.

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

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

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

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

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

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

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

    &#39;रन&#39; बटन.

'निर्देश मेन्यू' से स्निपेट चलाएं

  1. अपने कर्सर को DevTools के अंदर कहीं भी फ़ोकस करें.
  2. Command मेन्यू खोलने के लिए, Control+O (Windows/Linux) या Command+O (Mac) दबाएं.
  3. ! वर्ण टाइप करें. इसके बाद, उस स्निपेट का नाम लिखें जिसे आपको चलाना है.

    &#39;खोलें&#39; मेन्यू से स्निपेट चलाया जा रहा है.

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

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

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

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

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