ब्लॉकली और ब्लॉकली सैंपल की मदद से डीबग करना

कभी-कभी ब्लॉकली-सैंपल में कोई प्लगिन डेवलप करते समय, आपको ब्लॉकली सैंपल में उसी तरह के बदलाव करने होंगे. ज़्यादातर प्लग इन, npm रजिस्ट्री से ब्लॉकली को फ़ेच करने के लिए सेट अप किए जाते हैं. इसलिए, आप सिर्फ़ उस कोड का इस्तेमाल कर पाएंगे जो पहले ही npm पर रिलीज़ हो चुका है. इससे ब्लॉकली में किए गए बदलावों को डीबग करना मुश्किल हो जाएगा. जब आपको ब्लॉकली और ब्लॉकली, दोनों सैंपल में बदलाव करने हों और उनकी जांच करनी हो, तो रिलीज़ नहीं किए गए बदलावों को साथ में इस्तेमाल करने के लिए, नीचे दिए गए तरीकों में से किसी का भी इस्तेमाल किया जा सकता है.

पहला तरीका: npm लिंक

npm रजिस्ट्री से पैकेज फ़ेच करने के बजाय, एनपीएम को अपनी मशीन से पैकेज इस्तेमाल करने के लिए कहा जा सकता है. इस तरीके का इस्तेमाल करने पर, आपके पास सोर्समैप का ऐक्सेस होना चाहिए, जिससे blockly_compress को डीबग करना आसान हो जाता है. इस तरीके का इस्तेमाल उन बदलावों के साथ किया जा सकता है जिन्हें अभी तक GitHub पर नहीं भेजा गया है.

1. फिर से हमला करें:

   $ npm run package
   $ cd dist
   $ npm link
   

   ये चरण मुख्य ब्लॉकली को बनाते हैं, उसे पैकेज करते हैं, और फिर पैकेज की गई फ़ाइलों के लिए एक सिमलिंक बनाते हैं.

2. ब्लॉकली-सैंपल के फ़ोर्क में:

   $ npm link blockly
   

   इस चरण से एनपीएम को एनपीएम से पैकेज फ़ेच करने के बजाय पहले बनाए गए सिमलिंक को खोजने के लिए कहा जाता है.

3. प्लगिन की जांच करने के लिए npm run start.

कोर में बदलाव करने पर, आपको उसे फिर से बनाना और रीपैकेज करना होगा.

दूसरा तरीका: GitHub से फ़ेच करना

आप npm को npm रजिस्ट्री के बजाय GitHub से पैकेज फ़ेच करने के लिए कह सकते हैं. इस तरीके का इस्तेमाल करने पर, आपके पास सोर्समैप का ऐक्सेस होना चाहिए, जिससे blockly_compress को डीबग करना आसान हो जाता है. आपको ब्लॉकली का कोई ऐसा वर्शन इस्तेमाल करना होगा जो पहले से ही GitHub पर कहीं पब्लिश हो चुका है.

1. पक्का करें कि आपके प्लग इन के package.json के scripts सेक्शन में ये चीज़ें शामिल हों:

   "postinstall": "blockly-scripts postinstall"
   

   बाद के चरण में, GitHub से इंस्टॉल किए जाने के बाद यह स्क्रिप्ट अपने-आप ब्लॉकली बन जाएगी.

2. package.json में ब्लॉकली के लिए वर्शन नंबर देने के बजाय, गिट पता और ब्रांच का नाम दें:

   "blockly": "git://github.com/google/blockly.git#develop"
   

   अगर आपने अनमर्ज किए गए बदलाव किए हैं, तो यह ब्लॉकली के अपने फ़ायदे का लिंक भी हो सकता है.

3. सामान्य की तरह npm install

4. प्लगिन की जांच करने के लिए npm run start

मुख्य Blockly में बदलाव करने पर, आपको उन्हें बताई गई ब्रांच में GitHub पर पुश करना होगा. इसके अलावा, जब आप npm को GitHub से नया वर्शन फ़ेच करना चाहते हैं, तो आपको npm uninstall blockly (या इसे अपने node_modules से हटाना) करना होगा. इसके बाद, ऊपर बताए गए तरीके से इसे फिर से इंस्टॉल करना होगा.

तीसरा तरीका: बेहतर प्लेग्राउंड

अपने प्लगिन को डीबग करने के लिए, ब्लॉकली मुख्य ऐप्लिकेशन में, बेहतर प्लेग्राउंड का इस्तेमाल किया जा सकता है. इस तरीके का इस्तेमाल करते हुए, blockly_uncompressed का इस्तेमाल किया जा सकता है, जिसे डीबग करना आसान हो सकता है, क्योंकि आप सोर्समैप पर निर्भर नहीं होंगे. अगर आपको सोर्समैप में डीबग करने में समस्या आ रही है या आपको बेहतर प्लेग्राउंड की सुविधाओं का इस्तेमाल करके अपने प्लगिन की जांच करनी है, तो यह तरीका अपनाएं.

1. ब्लॉकली सैंपल सेक्शन में आपकी प्लगिन डायरेक्ट्री में:

   $ npm run build
   $ cd dist
   $ pwd
   

   इससे आपका प्लगिन बनता है और उसका पैकेज तैयार होता है. इसके बाद, यह आपके प्लग इन के लिए Dist डायरेक्ट्री का पूरा डायरेक्ट्री पाथ प्रिंट करता है. इस पाथ को कॉपी करें. हमें अगले चरण में इसकी ज़रूरत होगी.

2. ब्लॉक रूप से, advanced_playground.html में:

   <script src="$PATH_TO_DIST_DIR/index.js">
   

   इसके बाद, आपको अपने प्लगिन के लिए ज़रूरी सेटअप भी करना होगा. उदाहरण के लिए, आपको विकल्प ऑब्जेक्ट में कुछ वैल्यू डालने की ज़रूरत पड़ सकती है. इसे मौजूदा फ़ाइल फ़ोल्डर के सेटअप में करें.

3. अपने प्लग इन की जांच करने के लिए, ब्राउज़र में बेहतर प्लेग्राउंड खोलें.

ब्लॉक रूप से बदलाव करने पर, आपको सिर्फ़ रीफ़्रेश करना होता है. अपने प्लग इन में बदलाव करने पर, आपको npm run build को फिर से चलाना होगा.