"आपको वेब स्टैक और C ++ दोनों को जानना होगा": अलेक्सई कोज़ीटिन्स्की के साथ एक साक्षात्कार जो कि क्रोम देवटूल के विकास के बारे में है और न केवल

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

अब वह वास्तव में क्या कर रहा है? एक सामान्य गैर-Google डेवलपर के लिए DevTools में कुछ उपयोगी कॉपी करना कितना यथार्थवादी है? क्रोम इंजीनियर किस कंप्यूटर का उपयोग करते हैं?

हम वर्तमान में होलीजस 2019 पाइटर सम्मेलन की मेजबानी कर रहे हैं, जहां एलेक्सी ने पहले ही एक नई रिपोर्ट बनाई है, "क्रोम देवटूल प्रोटोकॉल" (रिकॉर्डिंग को मुफ्त प्रसारण में देखा जा सकता है)। और इस अवसर पर, होल्जस कार्यक्रम समिति के दो सदस्यों: दिमित्री दिमित्री माखनेव मखनेव और अलेक्सी ज़ोलोटीह ज़ोलोटीख द्वारा उनसे विस्तार से पूछताछ की गई ।

दिमित्री मखनेव: अपने बारे में थोड़ा बताइए। कहाँ, कैसे, कहाँ, अब क्या कर रहे हो?

अलेक्सई कोज़ीटिन्स्की: मैं थोड़ा पीछे हटूंगा और आपको बताऊंगा कि Google में Chrome DevTools चार साल से अधिक समय से काम कर रहा है। असल में, मैंने एक जावास्क्रिप्ट डिबगर और सब कुछ जावास्क्रिप्ट, नोड और सब कुछ है कि सामान्य रूप से जावास्क्रिप्ट के आसपास कल्पना की जा सकती से संबंधित किया। अब मैं नेटफ्लिक्स नामक एक अन्य कंपनी के लिए काम करता हूं। और यहाँ मैं एक बहुत ही साधारण बात करने आया था: उनके पास अपने स्वयं के अजीब जावास्क्रिप्ट के साथ अपना आंतरिक वेब इंजन है। और पूरी चीज़ को अपने स्वयं के शांत साधनों की आवश्यकता होती है, जिसे "क्रोम देवटूल" कहा जा सकता है। और, तदनुसार, मेरा लक्ष्य इन उपकरणों को बनाना था।
यह अभी भी प्रासंगिक है, मैं कुछ करता हूं और हर चीज के लिए पूरी तरह से जिम्मेदार हूं: इस व्यवसाय के बैकेंड के लिए, देवतल्स के लिए सामान्य रूप से काम करने के लिए। और साथ ही, हमारा लक्ष्य इस तरह से काम करना है कि मैं Chrome DevTools में तस्करी जारी रखूं, जो संभव हो सभी पैच अपग्रेड करने के लिए। ताकि यह न हो कि हम कांटा लगाते हैं, हम हमेशा के लिए तितर-बितर हो जाएंगे और Google से अपने कूल सहयोगियों के काम का परिणाम खो देंगे। इसलिए मैं पहले की तरह ही काम कर रहा हूं - क्रोम देवटूल।

दिमित्री: कूल।

अलेक्सी ज़ोलोटीख: होलीजेएस पर आपकी जीवनी में निम्नलिखित शब्द हैं: "उन्होंने डेवलपर्स के जीवन को बेहतर बनाने के लिए कंपनी के अधिकांश प्रयासों का नेतृत्व किया, जो अतुल्यकालिक स्टैक्स के साथ शुरू हुआ और नए फैशनेबल क्वेरी ऑब्जेक्ट्स के साथ समाप्त हुआ।" पहला, क्यों कोशिश करें? और दूसरी बात, क्या आप हमें अधिक बता सकते हैं - क्या यह संभवतः Google के बारे में अधिक है?

अलेक्सई: चलो "प्रयास" शब्द से शुरू करते हैं। बहुत अच्छा सवाल है। और मेरे पास इसका जवाब है। यह मूल रूप से शब्द "प्रयास" था। चूंकि मैं पिछले कुछ वर्षों से कैलिफ़ोर्निया में रह रहा हूं और काम कर रहा हूं, एक अनुवाद ने मुझे विफल कर दिया। मैंने "प्रयास" के रूप में "प्रयास" शब्द का अनुवाद करने का फैसला क्यों किया? शायद यह अभी भी "प्रयास" नहीं है। बेशक, ये "प्रयास" थे, क्योंकि हमने कुछ करने की कोशिश की थी, लेकिन ये सफल प्रयास थे, हमने उनमें से अधिकांश को पूरा किया।

लेकिन एक ही समय में, क्वेरी ऑब्जेक्ट्स - यह कुछ छोटा था जिसे ट्विटर या मीडियम पर पढ़ा जा सकता है, और यही हमने पूरा किया है। और Async डिबगिंग वह है जो हमें क्रोम DevTools में पूरा करने की आवश्यकता है। हमने ऐसा करना शुरू कर दिया, कई बार कोशिश की, क्योंकि यह कोई मामूली बात नहीं है। आप एक समाधान का प्रयास करें - उपयोगकर्ताओं को सुनें, वे आपके पास आते हैं और कहते हैं: "मुझे समझ नहीं आ रहा है कि यहाँ क्या हो रहा है, क्या आप इसके साथ कुछ कर सकते हैं?" आप अलग तरह से कोशिश करते हैं, कुछ और करने की कोशिश करते हैं, और इसलिए, कदम से कदम, कुछ होता है। लेकिन यह कहना महत्वपूर्ण है कि अधिकांश प्रयास सफल रहे।

Google में, मैंने अपना अधिकांश विकास जीवन बिताया। मैं एक बार इंटर्न के रूप में वहां आया था। सेंट पीटर्सबर्ग में एक Google कार्यालय होने पर यह अद्भुत समय में वापस आ गया था। वहां पहुंचकर, मुझे क्रोम DevTools में संलग्न होने के लिए बर्बाद कर दिया गया: मेरे पास कोई अन्य विकल्प नहीं था, क्योंकि मैं क्रोम DevTools टीम में एक प्रशिक्षु के रूप में आया था। मुझे बताया गया था: “यहाँ एक बहुत ही सरल इंटर्न प्रोजेक्ट है। हमारे पास एक अच्छा एपीआई है जो हमें सभी जावास्क्रिप्ट कोड लेने की अनुमति देता है, किसी तरह इसे संसाधित करता है, इसे वापस लौटाता है और क्रोम को हमारे पास आए जावास्क्रिप्ट के बजाय किसी अन्य जावास्क्रिप्ट को निष्पादित करने के लिए कहता है। "

हमारे पास ऐसा एपीआई था, और इसके आधार पर एएसटी पेड़ का निर्माण संभव था। मुझे याद है कि एएसटी-पेड़ों के बारे में होलीजेएस पर एक उत्कृष्ट रिपोर्ट थी। एएसटी-ट्री को पार्स करना और निष्पादन समय को मापने के लिए कोड को इस तरह से निर्देश देना आवश्यक था, और वास्तव में टूलर प्रोफाइल लिखना। और यह एक ऐसी इंटरनेट परियोजना थी, मैं अभी भी GitHub पर कहीं है। यह क्रोम में बहुत लंबे समय से काम नहीं कर रहा है, क्योंकि इसका उपयोग करने वाले एपीआई को इसे खुद से काटने के लिए कहा गया था - इसे बनाए रखना मुश्किल था। मैं उस दिन बहुत दुखी था, क्योंकि यह एपीआई था जिस पर पूरी परियोजना बनाई गई थी - "इसे हटाएं"। और मैंने उसे डिलीट कर दिया। तीन महीने के बाद, मैं इंटर्न से इंजीनियरों के पास गया - मैं Google के साथ रहा और जावास्क्रिप्ट से संबंधित सब कुछ करना शुरू कर दिया। बहुत सरल कुछ के साथ शुरू किया: मुझे कंसोल.लॉग () को ठीक करना था। और फिर धीरे-धीरे यह हुआ कि जावास्क्रिप्ट-संबंधित टूल टीम का मुख्य भाग किसी कारण से टीम से बाहर निकल गया, और मुझे लगभग सभी जावास्क्रिप्ट के साथ छोड़ दिया गया। उस पल में यह बहुत डरावना था, लेकिन मैं तैयार हो गया और धीरे-धीरे कुछ करना शुरू कर दिया, कुछ समझने के लिए।

उसी समय, जावास्क्रिप्ट विकसित हुआ, जैसा कि हम जानते हैं, asinks, वादे वहाँ दिखाई दिए। अब हमारे पास पहले से ही async / प्रतीक्षा है, तीर फ़ंक्शन सभी संभावित चौखटे में दिखाई दिए, इसलिए हमें इनलाइन ब्रेकप्वाइंट की आवश्यकता थी (उनके बिना कोई रास्ता नहीं था) - और मैंने किया, किया, इनमें से कई छोटे सुधार किए। Async स्टैक्स बहुत काम के हो गए, यह एक async मॉडल है जो जावास्क्रिप्ट में async का वर्णन बहुत ही सरल भाषा में करता है।

और चूंकि आप जावास्क्रिप्ट के सामने क्रोम देवटूल में काम नहीं कर सकते हैं और V8 इंजन के बारे में कुछ नहीं जानते हैं, इसलिए इस सारे काम के दौरान, मुझे धीरे-धीरे V8 में अधिक से अधिक तस्करी करनी पड़ी। मेरे पास वहां बहुत सारे पैच हैं। कुछ बिंदु पर, हमने क्रोम कोड से V8 कोड में जावास्क्रिप्ट बैकएंड को स्थानांतरित किया। यह, शुरू से ही करने के लिए तर्कसंगत था, लेकिन ऐतिहासिक रूप से वह वहां नहीं था। उसी समय, नोड हमारे पास आया, हमें किसी तरह इसका समर्थन करना पड़ा, और हमने फैसला किया कि अगर हम V8 को डीबग कर सकते हैं, और नोड V8 का उपयोग करने लगता है, तो हम हमारे साथ नोड समर्थन क्यों नहीं बनाते हैं? और हमने इसे किया, इस परियोजना में मैं सबसे महत्वपूर्ण नहीं था, लेकिन मैंने सक्रिय रूप से उन लोगों की मदद की जिन्होंने इसे किया। मैं यह सब Google पर लगभग पाँच वर्षों से कर रहा हूँ।

दिमित्री: आप इनमें से सबसे शांत और सबसे कठिन क्या मानते हैं?

अलेक्सी: किसी कारण से, आखिरी को सबसे अच्छा याद किया जाता है। और आखिरी एक दिलचस्प परियोजना थी जो हमने की थी। यह अब Chrome DevTools कंसोल में है, जब आप टाइप करते हैं, तो आप जो करते हैं उसका लाइव परिणाम देख सकते हैं। यदि आप नई जावास्क्रिप्ट विशेषताओं का परीक्षण करना चाहते हैं (उस समय यह बिगआईंट था), तो आप बस कंसोल में प्रिंट करें, तुरंत परिणाम देखें, और आपको "एन्टर" को दबाने और एक अरब परिणामों के साथ अपने कंसोल को बंद करने की आवश्यकता नहीं है। और यह सही है कि यह लगता है की तुलना में कठिन है। यह हमारे लिए बहुत महत्वपूर्ण था कि आपके सभी भावों के लालची निष्पादन के साथ, हम आपके कार्यक्रम की स्थिति को नष्ट नहीं करेंगे, अन्यथा हमारे सभी उपयोगकर्ता बहुत परेशान होंगे। और ऐसा करने के लिए, हमें जावास्क्रिप्ट लेना था, वी 8 लेना था और उसमें क्षमता को जोड़ना था: किसी भी अभिव्यक्ति को निष्पादित करना, लेकिन यह सुनिश्चित करना कि यह आपके प्रोग्राम की स्थिति को न बदले। और यह मुश्किल था, लंबे समय तक और किसी ने भी हमारे सामने ऐसा नहीं किया है, ऐसे जावास्क्रिप्ट इंजन नहीं हैं। मुझे यकीन नहीं है कि ऐसे इंजन हैं। शायद जावा में है (क्योंकि जावा में, जैसा कि हम जानते हैं, सब कुछ है), लेकिन मुझे यकीन नहीं है। और उस पल में हमने यह किया।

यह एक बहुत लंबी प्रक्रिया थी, जिसमें कई अलग-अलग टीमें शामिल थीं, क्योंकि यह हमारे लिए न केवल "साइड इफेक्ट्स" के बिना निष्पादित करना महत्वपूर्ण था, बल्कि यह भी सुनिश्चित करने के लिए कि अगर आप अचानक (सच्चा) लूप चलाना शुरू करते हैं, तो आप सब कुछ लटका नहीं पाएंगे। दुनिया में, क्योंकि जावास्क्रिप्ट स्ट्रीम अभी भी वही है। और यह एक अलग प्रयास था: यह पता चला कि क्रोम कोड खुद को पसंद नहीं करता है जब जावास्क्रिप्ट एक यादृच्छिक क्षण में समाप्त होता है, जिस स्थिति में यह कहना पसंद करता है: "एमएम ..." और क्रैश। इसे ठीक करना था। और हमने ऐसा किया भी।

इस काम के प्रोजेक्ट के परिणामस्वरूप Google को पेटेंट भी मिल गया। Google ने आपके बाद पीछा करने के लिए नहीं, बल्कि, अन्य कंपनियों की तरह (पुराने ओरेकल को छोड़कर, शायद), अपने आप को बचाने के लिए पेटेंट कराया, अगर कोई उनके पास आता है और कहता है: "दोस्तों, आपने Google बनाया "खोज, यह बुरा है, हमारे पास पेटेंट है।" और किसी कारण से, उन दोस्तों को एक ही समय में जावास्क्रिप्ट डिबगर होगा। Google कहेगा: "और यहाँ हमारे पास जावास्क्रिप्ट डीबगर के लिए ऐसा एक पेटेंट है।" वैसे, पेटेंट वकीलों को बेहतर पता है कि वहां क्या चल रहा है, लेकिन हमने इसका पेटेंट कराया, यह मजेदार था। पेटेंट मिलने पर Google पहेली का एक छोटा टुकड़ा देता है। वह बहुत कूल हैं। और यह बहुत दिलचस्प था, क्योंकि किसी ने भी पहले ऐसा नहीं किया था, और हम इसे करने में कामयाब रहे।

दिमित्री: और ऐसा लगता है कि कुछ बस कंसोल में प्रदर्शित होता है।

अलेक्सई: हाँ, हाँ, यह बिल्कुल "सरल" है। किसी की बोली थी कि किसी भी अच्छी तरह से बनाई गई तकनीक जादू से अप्रभेद्य है।

दिमित्री: ठीक है, हाँ, दिलचस्प है। और जो मैं वास्तव में करना चाहता था, वह नहीं हो सका? और कुछ? अधिक शक्तिशाली?

अलेक्सी: यह एक बहुत ही खतरनाक सवाल है। आप हमेशा सब कुछ करना चाहते हैं, और कभी भी पर्याप्त समय नहीं है। बेशक, हम उन चीजों को खत्म करना चाहेंगे जो हमने शुरू की थीं, लेकिन मैंने इसे खत्म नहीं किया। यह एक async मॉडल है, और async डिबगिंग को अभी भी पूरा करना था, निश्चित रूप से, और उपयोगकर्ता को और अधिक स्पष्ट करने के लिए, कुछ और कदम उठाने के लिए। मुझे यकीन नहीं है कि वहां क्या करना है, लेकिन महत्वपूर्ण बात जो मैं खत्म करना चाहता था: V8 में जावा में हॉटस्पावा के समान एक तंत्र है और इसी तरह की तकनीकों के साथ, जब आप अपने कार्यक्रम में कोड का एक टुकड़ा ले सकते हैं जो अभी चल रहा है और लाभ को अपडेट करें। उदाहरण के लिए, आप एक अपवाद पर बस गए और इसे ठीक करना जानते हैं, तुरंत इसे वहीं ठीक करें, फ़ाइल को सहेजें, और सब कुछ आगे काम करता है, और जैसे कि कोई अपवाद नहीं थे - सब कुछ लाइव तय किया गया था। यह एक बहुत अच्छा उपकरण है। कुछ लोग सोचते हैं कि यह किसी भी तरह से डिबगिंग की जगह ले सकता है, क्योंकि आप धीरे-धीरे कोड को छोटे टुकड़ों में लिखते हैं, आप तुरंत देख सकते हैं कि क्या होता है - इसके बाद डिबग करने की कोई आवश्यकता नहीं है।

और बहुत लंबे समय के लिए, लगभग 9-10 साल पहले, हमारे पास एक कोड था जिसने ऐसा किया था। यह एक और दुनिया में थोड़ा लिखा गया था, एक अलग वास्तविकता में - एक अलग वी 8 था, इन इग्निशन, टर्बोफैन और बाकी सब कुछ नहीं थे। मुझे यकीन नहीं है कि उस समय भी क्रैंकशाफ्ट था, यह वी 8 में पिछले कंपाइलर है। कुछ भी नहीं था। और async / प्रतीक्षा वहाँ नहीं था, निश्चित रूप से। कोड बहुत पुराना था, इसमें कुछ बहुत पुराने आंतरिक V8 उपयोगिताओं का उपयोग किया गया था जो केवल इस कोड के लिए समर्थन करते थे, क्योंकि उस समय कोई भी इस कोड को समझना नहीं चाहता था और इसे फिर से लिखना चाहता था।

कुछ बिंदु पर, मैं बैठ गया और इसे फिर से लिखना शुरू कर दिया, और यह कम दुर्घटनाग्रस्त होने लगा। लेकिन वह अभी भी अक्सर कहता है कि वह आपके कोड को संपादित नहीं कर सकता है, क्योंकि, उदाहरण के लिए, जनरेटर के लिए पर्याप्त समर्थन नहीं है। इस कोड को लिखते समय, जावास्क्रिप्ट में कोड की प्रति मिलियन लाइनों में एक जनरेटर था। और जब हमें async / wait मिला, तो प्रत्येक async / प्रतीक्षा कार्य वास्तव में अपने आप में एक जनरेटर है। इसलिए, यदि आप async / प्रतीक्षा के साथ कोड को संपादित करने के लिए कहते हैं, तो आप निराश होंगे।

चूंकि ये अभी भी डेवलपर्स और डिबगिंग के लिए उपकरण हैं, इसलिए एक अप्रिय विशेषता है: यदि वे उपकरण का उपयोग करते समय दस में से दो बार काम नहीं करते हैं, तो वे अब इसका उपयोग नहीं करते हैं। और मैं इसे खत्म करना चाहूंगा। हो सकता है कि हम इसे समाप्त कर दें, क्योंकि अब मैं शायद V8 को अपने नए कार्यस्थल पर लाऊंगा और इसके कारण मैं इस पर काम करना जारी रख सकता हूं।

दिमित्री: विशेष रूप से डिबगिंग के दौरान यह काम कर सकता है, या सैद्धांतिक रूप से कुछ एकल पृष्ठ अनुप्रयोग उत्पादन में अनुप्रयोग का एक हिस्सा बदल सकता है?

एलेक्सी: V8 के दृष्टिकोण से, उत्पादन में इसे बदलना आसान है, जब आप रुके हुए हों तो इसे बदलना अधिक कठिन होता है। यदि इसे रोका गया है, तो आपके पास वर्तमान स्टैक ट्रेस है, जो पहले से चल रहा है। इस कोड को अपडेट करना और यह सभी वर्तमान स्टैक को बाध्य करना आवश्यक है, जो आपके कोड में कुछ चर को संदर्भित करता है, काम जारी रखने के लिए। और जब आपके पास उत्पादन होता है, तो आप उस पल का इंतजार कर सकते हैं जब जावास्क्रिप्ट खत्म हो जाता है (चलो आशा करते हैं कि आपके पास वहां (सत्य) नहीं है), और उस पल में सब कुछ स्पष्ट रूप से बदल दिया जाता है।

और यह बहुत सरल है, क्योंकि आप बस कोड को बदल सकते हैं, आपको सभी लिंक को अपडेट करने की आवश्यकता नहीं है। और मुख्य कठिनाई, ज़ाहिर है, सभी लिंक की जगह, सभी फ़्रेमों को फिर से शुरू करना, जनरेटर को पुनरारंभ करना, और इसी तरह।

एलेक्स: मुझे अचानक एक आईडीई के रूप में क्रोम देवटूल का उपयोग करने के बारे में एक सवाल था। इस तरह के एक समारोह है जब आपने जावास्क्रिप्ट को संपादित किया और आप किसी तरह इसे फाइल सिस्टम में बाँध सकते हैं, और शैलियों के साथ एक ही बात। और मेरे पास उसके लिए बहुत सारे सवाल हैं, क्योंकि यह काम नहीं करता है। और मैं एक आलसी व्यक्ति हूं, मुझे एक स्थान पर इसे ठीक करना पसंद है, उदाहरण के लिए।

अलेक्सई: सवाल, जाहिरा तौर पर, यह काम क्यों नहीं करता है। यह कहना शुरू में महत्वपूर्ण है कि Chrome DevTools कभी भी एक आईडीई नहीं थे, उन्होंने कभी भी खुद को आईडीई के रूप में तैनात नहीं किया। आईडीई एक अलग पैमाने की परियोजना है, इसमें अन्य प्रयासों और अधिक लोगों की आवश्यकता होती है। Chrome DevTools को पहले एक टूल के रूप में बनाया गया था, और फिर एक संपादक के रूप में। आईडीई के विपरीत, जो एक संपादक के रूप में दिखाई देते हैं, और फिर एक डिबगर, प्लग-इन और इसी तरह जोड़ते हैं।

उसी समय, हम समझ गए कि हमारे उपयोगकर्ताओं के लिए इसे संपादित करना और सहेजना बहुत सुखद होगा, ऐसा करने के कई प्रयास थे - अब, शायद, दूसरा या तीसरा प्रयास ... लेकिन यह सब इस तथ्य पर उतरता है कि वेब पर इन सभी वेबपैक CSS कंपाइलर्स के अस्तित्व को ध्यान में रखते हुए। और बाकी सब कुछ, एक बहुत ही गैर-तुच्छ कार्य है जो परिवर्तनों को वापस लागू करता है। आप उस कोड को बदलते हैं जो आप पृष्ठ के अंदर देखते हैं, आपको यह समझना होगा कि यह कोड आपके पेज में कहां से आया है और परिवर्तन को ध्यान से लागू करें।

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

क्या यह भविष्य में बदल जाएगा, आप अभी भी पूछ सकते हैं। आप विज़ुअल स्टूडियो कोड या अपने पसंदीदा आईडीई (वेबस्टॉर्म या कुछ और) का उपयोग कर सकते हैं, वहां कोड को संपादित कर सकते हैं, और क्रोम DevTools इन परिवर्तनों को लाइव लागू करने का प्रयास करेंगे। लेकिन वास्तव में, हमारे पास नोड के लिए हमारे सामने के लिए एक अलग परियोजना है, हम शायद इसके बारे में बाद में भी बात करेंगे, यह वहां थोड़ा बेहतर काम करता है, क्योंकि, भगवान का शुक्र है, नोड के पास जावास्क्रिप्ट में संकलन और टाइपस्क्रिप्ट संकलन का अधिकतम स्तर है। और यह वहां पहले से ही मुश्किल है, लेकिन मुझे अभी भी उम्मीद है कि नोड पर अधिकांश पैकेज और मॉड्यूल मध्यवर्ती बिल्ड चरणों के बिना शुद्ध जावास्क्रिप्ट में लिखे गए हैं। मैंने सवाल का जवाब नहीं दिया, लेकिन जैसा मैं कर सकता था।

दिमित्री: आपको क्या लगता है, Chrome DevTools सिद्धांत में आगे कैसे विकसित होंगे? उससे उम्मीद करने के लिए सबसे अच्छी चीजें क्या हैं?

एलेक्सी: यह एक मुश्किल सवाल है। कुछ बिंदु पर, एक व्यक्ति Google I / O पर दिखाई दिया, जिसने डिजाइनरों के लिए एक और सुविधाजनक उपकरण बनाया। क्रोम के लिए यह विस्तार, दुर्भाग्य से, मुझे नाम याद नहीं है। और यह सीधे आपके पृष्ठ के शीर्ष पर कुछ तत्व जोड़ता है जो आपके लिए एक डिजाइनर के रूप में संपादित करने और सब कुछ करने में आसान बनाते हैं। और ऐसे विचार थे कि Chrome DevTools डिजाइनरों के लिए एक बेहतर उपकरण हो सकता है। यह पहले से ही एक काफी सुविधाजनक उपकरण है जो उदाहरण के लिए, सीएसएस और इतने पर देख सकता है, लेकिन आप अभी भी इसे और अधिक आदर्श और सुविधाजनक बना सकते हैं। उदाहरण के लिए, फ्लेक्स गुणों और अन्य छोटे सुधारों का अधिक सुविधाजनक संपादन।
और क्रोम DevTools पर काम करने का एक महत्वपूर्ण हिस्सा है: परियोजना बहुत बड़ी है, इसमें बहुत सारे उपयोगकर्ता हैं और बग की एक बड़ी धारा है जिसे कोई भी crbug.com पर दर्ज कर सकता है। उन्हें मरम्मत करने की आवश्यकता है, उनमें से बहुत सारे हैं, और सब कुछ बनाने के लिए बहुत समय खर्च किया जाता है। जावास्क्रिप्ट लाइव डीबगिंग के लिए, जिसके बारे में हमने बात की थी, हॉटस्पैप एक अच्छा अगला कदम हो सकता है, लेकिन यह हो सकता है या नहीं, मुझे नहीं पता।

अलेक्सई: क्रोम देवटॉल्स, यह मुझे लगता है, वेब डेवलपर्स की मदद करने के लिए उद्देश्यपूर्ण रूप से सबसे परिष्कृत सॉफ्टवेयर है। लेकिन अन्य ब्राउज़र हैं - सफारी, एज अभी भी है, फ़ायरफ़ॉक्स फिर से। क्या कोई उपकरण है जो मैं क्रोम देवटॉल्स में अन्य ब्राउज़रों से बाहर निकालना चाहूंगा? क्या कुछ ऐसा है जो आपको पसंद है, यह कितना ठंडा है?

एलेक्सी: क्रोम देवटूल डेवलपर्स नियमित रूप से अन्य ब्राउज़रों को देखते हैं। दिलचस्प है कि मैंने हाल ही में वहां देखा, मुझे याद है कि सफारी में बहुत सुविधाजनक कंसोल था। उन्होंने बहुत अच्छी तरह से कंसोल को आउटपुट संरचित किया, और परिणामों पर तीर का उपयोग करके नेविगेशन जोड़ा। आप वहां एक ऑब्जेक्ट का चयन कर सकते हैं, "दाएं" दबाएं - यह खुल जाएगा। यह बहुत सुविधाजनक था। परिणामस्वरूप, अब यह सुविधा Chrome DevTools में है।

फ़ायरफ़ॉक्स में, DevTools में दिलचस्प चीजों से, यह मुझे लगता है कि वे सभी CSS गुणों के दृश्य संपादन का थोड़ा बेहतर समर्थन करते हैं - इसका मतलब है कि फ्लेक्स और अन्य जैसे गुण - वे आपको पृष्ठ के शीर्ष पर सीधे ग्रिड दिखाते हैं, और आप सभी को स्थानांतरित कर सकते हैं नीचे। यह शांत है, हमारे पास आंशिक रूप से यह है, लेकिन पूरी तरह से नहीं। फ़ायरफ़ॉक्स DevTools, मुझे लगता है, वर्तमान में WebAssembly के लिए अब तक का सबसे अच्छा समर्थन है। यदि किसी कारण से आपको WebAssembly कोड लिखना है, तो वे हमसे बहुत बेहतर हैं, क्योंकि हमारे पास छह महीने पहले कुछ भी नहीं था, अब मैंने इसकी जांच नहीं की है। मुझे लगता है कि वे इसमें बहुत अधिक ऊर्जा निवेश कर रहे हैं।

सफ़ारी के लिए ... एक तरह से, क्रोम देवतल्स सफ़ारी के वेब इंस्पेक्टर का एक कांटा है, इसलिए हमने उन सभी को लिया जो उनके पास थे।

मुझे महत्वपूर्ण बात याद आ गई! संभवतः केवल फ़ायरफ़ॉक्स में टाइम ट्रैवल डिबगिंग है। मैक पर, फ़ायरफ़ॉक्स के नाइटली बिल्ड में, आप टाइम ट्रेवल डिबगिंग में लिप्त हो सकते हैं। जब मैं निम्नलिखित बड़े कदमों के बारे में पूछा गया था, तो मैं उसके बारे में चुप रहा: यह बहुत अच्छा लगता है, बहुत ही स्मरणीय है - मुझे अभी भी विश्वास नहीं है कि यह बहुत उपयोगी है। व्यक्तिगत दृष्टिकोण। लेकिन उनके पास यह है, आप कोशिश कर सकते हैं, अगर यह आपकी मदद करता है, तो यह एक नया दिलचस्प उपकरण होगा।

: . , , -- . , ( ) , , CSS. , - , .

, , . ? , ? , - ?

: . ? , , crbug.com , feature request. feature request', , : , , . , . : Chrome DevTools, Chrome DevTools, , . , , , .

, , , — , , Chrome. , , , Chrome DevTools , . , -, , Chrome . -, - , , , - , , … , , .

: Google? :)

: Google , , . - , layers panel, -. , , . , , , , . , , .

? Cmd/Ctrl + Shift + P, Show layers — . Discoverability Chrome DevTools — , , , . - , . , - . , , , .

: , , , .

: .

: , - . . , , .

: HolyJS. .

: - , , - , . , - . , : - , - . - .



: , - Chrome, , , . . — , . — . - - , ?

: . , Chrome . -, Chrome, .

GitHub Chrome DevTools ( ), , DevTool' Chrome, . , , - Chrome DevTools, . , - , -, . - . , cookies.

, DevTool' , , . , JavaScript', CSS, HTML . single-page application. , - - , , , .

— - , (, - ), Chrome, , , . cs.chromium.org , .

, , « », Chrome , good first bug — , .

, , JavaScript — V8 , Chrome. , , , . - , - , - Chrome, Node. , - Node, Node, Chrome. , , .

, V8 - , - DevTool' . Chrome, , - , 15 Chrome.

: , Chrome?

: , Lenovo , Google Chrome . Xeon, 64 128 — . , 32 . , . , GTA 2 .

, - . - — Google , , Google , . , , . Chrome C++, . , .

: .

: , SSH - , , . - , SSH. Mac, : « ». Mac', , , - , -, , , .

: . , ?

: -, . Cessna, , 17 . - 17 Chrome DevTools.

: , -, , . , , . -, ndb ( - ), . , , Chrome DevTools, - V8 Node. ndb, - Node? - ?

: ndb — . Chrome DevTools Node . : Node URL, , . dedicated — Node. chrome://inspect, «open dedicated frontend», - . , , . - , , , . , , , — . value, , , .

, , . -, npm — «npm install -g ndb» — . Chrome, . Chrome, . 2,6 Chrome DevTools . . .

, - value: child-, , . ndb .

, Node Node. , , , - Node, , .

- Visual Studio Code, Node. . - IDE , Python, , . Node. : Chrome DevTools — , ndb — Node.

, , Google Chrome Labs — GitHub- , . , , 15 Hacker News - . , ( , ), - . .

, , Node . , Node Windows, Linux Mac, — , , .

, , , , n . - , , . , environment- Windows , Linux — , . . Windows-, - .

, . - , , , . , . , — , Node, , , . , , , , . ndb, , Carlo . Carlo — Electron. Electron , , Electron .

: Google, Chrome?

: , ndb. , , ndb.

: , . Chrome DevTools, , , ? , , ?

: Chrome DevTools? . , , , Chrome DevTools, , JavaScript. , , , , Java, JavaScript, , - . , .

: -, . -. , , C++. , Chrome DevTools , . , , - -, , , . Chrome DevTools , - C++, -.

C++, JavaScript, CSS… HolyJS, , CSS — , , . , , ! .

, C++, -, . - , , , , . , careers.google.com , , , Chrome DevTools, , , software engineer-, . software- , , : « Chrome DevTools».

: ++? - .

: . , , — , , , . : - , , , - .

, C++ - , . , «Hello, world!», . , , Chrome. C++ Chrome, C++ 11, . Boost .

: . , - 239, ? - ? single page application.

: , , , , . , computer science- . : — , — , .

, . Google , Google . , , . , . computer science- , …

239, , , , , . , , - . , JavaScript — ? यह कोई समस्या नहीं है। , a, b c, JavaScript, , JavaScript . JavaScript — , .

, CS- , . , - , , . , , , , -. , , computer science- — , , must have, . , , , , . , .

: , - JavaScript, -, , - ?

: . , , , - , , , Stack Overflow, , . , , . , async- , garbage collector .

: . : ? , , ? ? .

: . , CSS . , , . — Google-, - . , , , , , . , , . .

, — . . , , DeepMind StarCraft (. .: Zest, soO Stats ) — Reinforcement Machine Learning. Reinforcement Machine Learning . youtube, 15 , , .

, --, - , , . , , . , CSS.

: ?

: , . , . , . , YouTube — CSS. , , . , , — .

: . ? ?

: , , . Node.js, Node. , . , , - - , — , . , , - , , . यह जटिल है।

, — « Node.js» — , , , , Node.js, . , , , . , .

: . , . , -, ? - , , - — , . ?

: , . , , . , , - . , - , , - , -. . — DevTools: — , , — .

. , , . , , , JavaScript-, , . . , , , — .

, (« , CSS -») . , (diversity, CSS ), . , , . . — . — , . — .

: : HolyJS?

: HolyJS, . , , . , , , .

: , ...

: , . — . . . HolyJS , , , . , , . , , , , , — . . - .

« Chrome DevTools» ( ) HolyJS, 24 . YouTube , , .