DevTools टर्मिनल

Addy Osmani

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

DevTools टर्मिनल, आपके वेब ऐप्लिकेशन पर काम करते हुए Chrome के अंदर से कमांड लाइन में तेज़ी से बदलाव करने के लिए काम का है.

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

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

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

ब्राउज़र से बाहर निकले बिना, ग्रंट की मदद से बिल्ड टास्क चलाना.

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

पूरी तरह से गिट वर्कफ़्लो भी किया जा सकता है. Workspace में खाता बनाने के बाद, git diff के लिए शानदार है.

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

वर्कफ़्लो

जिट क्लोन, योमन या किसी ऐसे टूल का इस्तेमाल करके नए प्रोजेक्ट शुरू करें जिसे टर्मिनल से ऐक्सेस किया जा सके.

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

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

ls का इस्तेमाल करके, मौजूदा डायरेक्ट्री में फ़ाइलों के नाम की सूची बनाएं. यह आपके Workspace से बाहर की डायरेक्ट्री को विज़ुअलाइज़ करने के लिए सही है.

इंस्टॉल करना

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

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

सीमाएं

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

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

यह एक्सटेंशन वर्तमान में NPAPI पर निर्भर करता है, जो कि Native Messaging API के लिए अगले साल के दौरान धीरे-धीरे खत्म हो रहा है. DevTools टर्मिनल के लेखक दिमित्री फ़िलिनोव निकट भविष्य में इस API या स्थानीय क्लाइंट API के लिए NPAPI से दूर जाने की योजना बना रहे हैं.

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

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