DevTools टर्मिनल

एडी उस्मान
एडी उस्मानी

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

DevTools टर्मिनल, कमांड लाइन में तेज़ी से बदलाव करने के लिए बेहतरीन विकल्प है.
अपने वेब ऐप्लिकेशन पर काम करते समय, Chrome के अंदर कमांड-लाइन में तेज़ी से बदलाव करने के लिए, DevTools के टर्मिनल का इस्तेमाल किया जा सकता है.
DevTools टर्मिनल में cURL का इस्तेमाल करना.
नेटवर्क पैनल में cURL के तौर पर कॉपी करें का इस्तेमाल करने के बाद, पूरा कमांड आसानी से DevTools टर्मिनल में चिपकाया जा सकता है और उसे चलाया जा सकता है.

ब्राउज़र में टर्मिनल का इस्तेमाल क्यों करना चाहिए?

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

DevTools टर्मिनल में 'ग्रंट' चल रहा है.
ब्राउज़र से बाहर निकले बिना, Grunt की मदद से बिल्ड टास्क पूरा कर सकते हैं.

डेवलपमेंट के दौरान टूल के बीच कॉन्टेक्स्ट स्विच करने से आपका ध्यान भटक सकता है. इससे, काम का सही तरीके से काम न करना. हम पहले ही इस बारे में बात कर चुके हैं कि कुछ खास तरह के प्रोजेक्ट के लिए, फ़ाइल फ़ोल्डर का इस्तेमाल करके, ब्राउज़र से बाहर निकले बिना सीधे Chrome DevTools में कोड को डीबग और लेखक के कोड को कैसे बनाया जा सकता है.

Git वर्कफ़्लो.
एक पूरा गिट वर्कफ़्लो भी मुमकिन है. फ़ाइल फ़ोल्डर में लिखने के बाद, गिट डिफ़ेंस में मदद करने के लिए बेहतरीन विकल्प.

इस कहानी को पूरा करने के लिए DevTools टर्मिनल (Dमिट्री फिलिमोनोव) का इस्तेमाल किया गया है. इसमें उसी विंडो से कोडिंग करना, डीबग करना, और बनाना संभव हो जाता है. इसमें आपको टैब, Ctrl, और Git के कलर का भी ऐक्सेस मिलता है. इससे, यह उस टर्मिनल की तरह दिखता है जिसका इस्तेमाल आपने अपने रोज़ के वर्कफ़्लो में किया है.

वर्कफ़्लो

ऑथराइज़ेशन वर्कफ़्लो.
नए प्रोजेक्ट शुरू करने के लिए, गिट क्लोन, योमन या ऐसे किसी भी टूल का इस्तेमाल करें जिसे टर्मिनल से ऐक्सेस किया जा सके.

Chrome में संलेखन के लिए मेरा व्यक्तिगत वर्कफ़्लो अब कुछ ऐसा दिखता है:

  • DevTools टर्मिनल, इसका इस्तेमाल GitHub डेटा स्टोर करने की जगह git clone, नई फ़ाइल touch के लिए या ऐप्लिकेशन बनाने के लिए yo (yeoman) चलाने के लिए करता है. अगर मैं ऐप्लिकेशन की झलक देखने के लिए, नया सर्वर लॉन्च करना चाहूं, तो
  • फ़ाइल फ़ोल्डर: Chrome में मेरे webapp में बदलाव करें और उन्हें डीबग करें. अगर मैंने पहले कोई सर्वर लॉन्च किया था, तो मैं अपने लोकल प्रोजेक्ट को अपनी नेटवर्क फ़ाइलों से मैप कर सकता/सकती हूं. मैं Sass या कम का इस्तेमाल कर सकता/सकती हूं और अपने सीएसएस प्रीप्रोसेसर के बदलावों को मेरी सीएसएस फ़ाइलों के साथ मैप कर सकता/सकती हूं.
  • DevTools टर्मिनल: अब मैं सोर्स कंट्रोल का इस्तेमाल कर सकता/सकती हूं. डिपेंडेंसी के लिए पैकेज मैनेजर (npm, bower) का इस्तेमाल कर सकता/सकती हूं या उसी ऐप्लिकेशन का ऑप्टिमाइज़ किया गया वर्शन जनरेट करने के लिए, बिल्ड प्रोसेस (ग्रंट, बनाना) चला सकता/सकती हूं.
  • हालांकि, विंडो को सेट अप करने में कुछ समय लग सकता है, लेकिन ब्राउज़र के अंदर से अपनी ज़रूरत की ज़्यादातर चीज़ें हासिल करना अच्छी बात है.
टर्मिनल में ls का इस्तेमाल करना.
ls का इस्तेमाल करके, मौजूदा चालू डायरेक्ट्री में फ़ाइल नामों की सूची बनाएं. अपने Workspace के बाहर की डायरेक्ट्री को विज़ुअलाइज़ करने का बेहतरीन तरीका.

इंस्टॉल करना

DevTools टर्मिनल को Chrome Web Store से इंस्टॉल किया जा सकता है. अगर आप Mac या Linux उपयोगकर्ता हैं, तो इसे Chrome में जोड़ने के बाद, DevTools खोलने के लिए बस "एलिमेंट की जांच करें" या Ctrl + Shift + I को चुनें. ऐसा करने पर, इसे नए “टर्मिनल” टैब से ऐक्सेस किया जा सकेगा. Windows उपयोगकर्ताओं को Node.js प्रॉक्सी का इस्तेमाल करके, एक्सटेंशन को सिस्टम टर्मिनल से कनेक्ट करना होगा. यह सेट अप पाने के लिए, npm से devtools-terminal मॉड्यूल इंस्टॉल करें: npm install -g devtools-terminal

इसके बाद, एक नई कमांड लाइन विंडो खोलें और devtools-terminal चलाएं. इसके बाद, DevTools खोलें और "टर्मिनल" टैब में, डिफ़ॉल्ट कॉन्फ़िगरेशन विकल्पों का इस्तेमाल करके सर्वर से कनेक्ट करें. ज़रूरत पड़ने पर, पोर्ट और पते को अपनी पसंद के मुताबिक बनाया जा सकता है.

DevTools टर्मिनल, सेटअप के दौरान कनेक्शन की जानकारी को पसंद के मुताबिक बनाने की सुविधा देता है.

सीमाएं

DevTools टर्मिनल की कुछ सीमाओं पर ध्यान देना ज़रूरी है. Mac पर Terminal.app या iTerm2 के उलट, इस पर अभी टैब, एक से ज़्यादा विंडो या इतिहास चलाने की सुविधा काम नहीं करती है. हालांकि, Chrome के जितने चाहें उतने नए टैब खोले जा सकते हैं. हर टैब में, DevTools टर्मिनल इंस्टेंस हो सकता है. ऐसा Chrome ऐप्स स्क्रीन से किया जा सकता है:

DevTools टर्मिनल, हल्के रंग वाली थीम और गहरे रंग वाली थीम, दोनों के साथ काम करता है.
फ़िलहाल, यह एक्सटेंशन डिफ़ॉल्ट लाइट थीम और गहरे रंग वाली थीम, दोनों के साथ काम करता है.

फ़िलहाल, यह एक्सटेंशन पुराने सिस्टम के साथ काम करता है. नेटिव मैसेजिंग एपीआई को बढ़ावा देने के लिए, इस एक्सटेंशन को अगले साल धीरे-धीरे बंद किया जा रहा है. DevTools टर्मिनल के लेखक, दिमित्री फ़िलिमोनोव की योजना है कि आने वाले समय में, वह AP या नेटिव क्लाइंट एपीआई के तौर पर इस एपीआई या नेटिव क्लाइंट एपीआई का इस्तेमाल न करे.

मीटिंग में सामने आए नतीजे

DevTools टर्मिनल (और इससे मिलते-जुलते एक्सटेंशन, जैसे कि Auxilio) की मदद से, डेवलपमेंट के दौरान अपने एडिटर, ब्राउज़र, और कमांड लाइन के बीच स्विच करने से बचा जा सकता है. भले ही, ब्राउज़र में मौजूद टर्मिनल पर सभी लोगों की पसंद न हो, लेकिन हो सकता है कि आपको यह एक्सटेंशन आपके वर्कफ़्लो के लिए फ़ायदेमंद लगे. हमारा सुझाव है कि आप इसे आज़माकर देखें और देखें कि आपको यह कैसा लगा!