كيفية التطوير باستخدام Chrome DevTools ، يعلم الجميع. وما شكل تطوير Chrome DevTools نفسه؟
عمل Alexei Kozyatinsky سابقًا في Google وفعل ذلك ، والآن انتقل إلى Netflix ، لكنه لم يبتعد عن أنشطته السابقة.
ماذا يفعل بالضبط الآن؟ ما مدى واقعية أن يقوم أي مطور عادي بخلاف Google بنسخ شيء مفيد في DevTools؟ ما أجهزة الكمبيوتر التي يستخدمها مهندسو Chrome؟
نستضيف حاليًا مؤتمر HolyJS 2019 Piter ، حيث قدم Alexey بالفعل تقريرًا جديدًا ، "Chrome DevTools Protocol" (يمكن رؤية التسجيل في
البث المجاني ). وفي هذه المناسبة ، تم استجوابه بالتفصيل من قبل اثنين من أعضاء لجنة برنامج HolyJS:
ديمتري ديمتريماخنيف ماخنيف وأليكسي زولوتيه زولوتيك .
دميتري مخنيف: أخبرني قليلاً عن نفسك. أين ، كيف ، أين ، ماذا تفعل الآن؟أليكسي كوزياتنسكي: سأعود قليلاً وأخبرك أن Chrome DevTools في Google يعمل منذ أكثر من أربع سنوات. في الأساس ، قمت بعمل مصحح أخطاء JavaScript وكل ما يتعلق بـ JavaScript و Node وكل ما يمكن تخيله حول JavaScript بشكل عام. أنا الآن أعمل في شركة أخرى تدعى Netflix. وهنا جئت لأفعل شيئًا بسيطًا للغاية: لديهم محرك ويب داخلي خاص بهم باستخدام جافا سكريبت غريب خاص بهم. ويحتاج الأمر برمته إلى أدواته الرائعة ، والتي يمكن تسميتها "Chrome DevTools". وبناءً على ذلك ، كان هدفي هو صنع هذه الأدوات.
لا يزال الأمر ذا صلة ، أفعل شيئًا ، وأنا مسؤول تمامًا عن كل شيء: عن الواجهة الخلفية لهذا العمل ، لكي تعمل واجهة DevTools بشكل طبيعي. وفي الوقت نفسه ، يتمثل هدفنا في العمل على نحو يواصل تهريب Chrome DevTools ، لترقية جميع التصحيحات الممكنة. حتى لا يكون الأمر بالنسبة إلى مفترق طرق ، فسوف نفرق إلى الأبد ونفقد نتيجة عمل زملائي الرائعين من Google. لذلك لا أزال أفعل نفس الشيء كما كان من قبل - Chrome DevTools.
ديمتري: بارد.أليكسي زولوتيك: تتضمن سيرتك الذاتية على HolyJS الصياغة التالية: "لقد قاد معظم محاولات الشركة لتحسين حياة المطورين ، بدءًا من مجموعات غير متزامنة وانتهاءً بأشياء استعلام جديدة أنيقة". أولاً ، لماذا تحاول؟ وثانياً ، هل يمكنك إخبارنا بالمزيد - هل من المحتمل أن يكون هذا أكثر حول Google؟أليكسي: لنبدأ بكلمة "محاولة". سؤال جيد جدا ولدي إجابة عليه. كانت هذه في الأصل كلمة "جهود". منذ أن كنت أعيش وأعمل في كاليفورنيا على مدار الأعوام القليلة الماضية ، فشلت الترجمة. لماذا قررت ترجمة كلمة "جهد" إلى "محاولة"؟ ربما لا تزال هذه "محاولة". بالطبع ، كانت هذه "محاولات" ، لأننا حاولنا القيام بشيء ما ، لكن هذه كانت محاولات ناجحة ، أكملنا معظمها.
لكن في الوقت نفسه ، كائنات الاستعلام - كان شيئًا صغيرًا يمكن قراءته على Twitter أو على المتوسط ، وهذا ما أكملناه. والتصحيح المتزامن هو ما نحتاج إلى إكماله في Chrome DevTools. لقد بدأنا القيام بذلك ، حاولنا عدة مرات ، لأن هذا ليس شيئًا تافهًا. جربت حلاً واحدًا - استمعت إلى المستخدمين ، جاؤوا إليك قائلين: "لا أفهم ما يحدث هنا ، هل يمكن أن تفعل شيئًا بهذا؟" حاولت بطريقة مختلفة ، وحاولت القيام بشيء آخر ، وهكذا ، خطوة بخطوة ، يحدث شيء ما. لكن من المهم القول أن معظم المحاولات كانت ناجحة.
في Google ، قضيت معظم حياتي التطويرية. جئت هناك مرة واحدة كمتدرب. لقد عادت في أوقات رائعة عندما كان هناك مكتب Google في سانت بطرسبرغ. عند وصولي إلى هناك ، كنت محكومًا على المشاركة في DevTools في Chrome: لم يكن لدي خيار آخر ، لأنني كنت متدربًا في فريق Chrome DevTools. قيل لي: "هنا هو مشروع بسيط جدا المتدرب. لدينا واجهة برمجة تطبيقات رائعة تتيح لنا أخذ كل شفرة JavaScript ومعالجتها بطريقة ما وإعادتها وإخبار Chrome بتنفيذ JavaScript آخر بدلاً من JavaScript الذي جاء إلينا. "
كان لدينا مثل واجهة برمجة التطبيقات ، وعلى أساسها كان من الممكن بناء شجرة AST. أتذكر أنه حول AST- الأشجار كان هناك
تقرير ممتاز عن HolyJS. كان من الضروري تحليل شجرة AST وتعليمات الكود بطريقة لقياس وقت التنفيذ ، وكتابة ملف تعريف للأدوات بالفعل. وكان مثل هذا المشروع على الإنترنت ، لا يزال لدي في مكان ما على جيثب. لم يكن يعمل في Chrome لفترة طويلة جدًا ، لأن واجهة برمجة التطبيقات (API) التي استخدمتها طُلب منها قطعها بنفسي - كان من الصعب الحفاظ عليها. كنت حزينًا جدًا في ذلك اليوم ، لأنه كان واجهة برمجة التطبيقات التي تم بناء المشروع بالكامل عليها - "احذفها". وحذفته. بعد ثلاثة أشهر ، انتقلت من المتدربين إلى المهندسين - مكثت مع Google وبدأت في القيام بكل ما يتعلق بـ JavaScript. بدأت بشيء بسيط للغاية: اضطررت إلى إصلاح console.log (). ثم حدث تدريجيًا أن الجزء الرئيسي من فريق الأدوات المتعلق بـ JavaScript غادر الفريق لسبب ما ، وتركت مع كل JavaScript تقريبًا. في تلك اللحظة ، كان الأمر مخيفًا للغاية ، لكني استعدت وبدأت فعل شيء تدريجيا ، لفهم شيء ما.
في الوقت نفسه ، تم تطوير JavaScript ، كما نعلم ، وعود ظهرت هناك. الآن لدينا بالفعل التزامن / تنتظر ، ظهرت وظائف السهم في جميع الأطر الممكنة ، لذلك كنا بحاجة إلى نقاط توقف مضمنة (لم تكن هناك طريقة بدونها) - وفعلت ، فعلت ، فعلت العديد من هذه التحسينات الصغيرة. لقد تحولت مكدسات Async إلى الكثير من العمل ، وهذا نموذج غير متزامن يصف المتزامن في JavaScript بلغة بسيطة للغاية.
ونظرًا لأنه لا يمكنك العمل في Chrome DevTools على الواجهة الأمامية لجافا سكريبت ولا تعرف شيئًا عن محرك V8 ، خلال كل هذا العمل ، كان لدي المزيد والمزيد من التهريب إلى V8. لدي الكثير من البقع هناك. في مرحلة ما ، نقلنا واجهة جافا سكريبت الخلفية من شفرة Chrome إلى رمز V8. هذا ، بالطبع ، كان من المنطقي القيام به منذ البداية ، لكنه لم يكن هناك من الناحية التاريخية. في الوقت نفسه ، أتت Node إلينا ، وكان علينا دعمها بطريقة أو بأخرى ، وقررنا أنه إذا استطعنا تصحيح V8 ، ويبدو أن Node يستخدم V8 ، فلماذا لا نجعل Node يدعمنا؟ وفعلنا ذلك ، في هذا المشروع لم أكن الأهم ، لكنني ساعدت بنشاط أولئك الذين فعلوه. لقد كنت أفعل كل هذا على Google لمدة خمس سنوات.
ديمتري: ما رأيك في أروع وأصعب هذه؟أليكسي: لسبب ما ، يتم تذكر الأخير أفضل. وكان الأخير مشروعًا مثيرًا للاهتمام فعلناه. هذا موجود الآن في وحدة تحكم Chrome DevTools ، عندما تكتب ، يمكنك رؤية النتيجة المباشرة لفعل ما تكتبه. إذا كنت ترغب في اختبار ميزات JavaScript الجديدة (في ذلك الوقت كانت BigInt) ، يمكنك ببساطة الطباعة في وحدة التحكم ، ورؤية النتيجة على الفور ، ولا تحتاج إلى الضغط على "Enter" وسد وحدة التحكم الخاصة بك مع مليار النتائج. وفعل ذلك بشكل صحيح هو أصعب مما يبدو. كان من المهم للغاية بالنسبة لنا أنه مع التنفيذ الجشع لكل تعبيراتك ، لن ندمر حالة البرنامج ، وإلا فإن جميع مستخدمينا سيكونون منزعجين للغاية. وللقيام بذلك ، كان علينا أن نأخذ JavaScript ، وأن نأخذ V8 وأن نضيف القدرة عليه: تنفيذ أي تعبير ، لكن تأكد من أنه لا يغير حالة البرنامج. لقد كان الأمر صعبًا ، ولم يعد هناك أحد من مشغلات جافا سكريبت هذه لوقت طويل ولم يقم أحد بذلك من قبل. لست متأكدًا من وجود مثل هذه المحركات على الإطلاق. ربما يوجد في Java (لأنه في Java ، كما نعلم ، كل شيء موجود) ، لكنني لست متأكدًا. وفي تلك اللحظة فعلنا ذلك.
لقد كانت عملية طويلة للغاية ، شملت العديد من الفرق المختلفة ، لأنه كان من المهم بالنسبة لنا ليس فقط التنفيذ بدون "آثار جانبية" ، ولكن أيضًا لضمان أنك إذا بدأت فجأة في تشغيل حلقة لا نهائية (حقيقية) ، فلن تتعطل كل شيء في العالم ، لأن دفق JavaScript لا يزال هو نفسه. وكان هذا مجهودًا منفصلاً: اتضح أن كود Chrome نفسه لا يحبذ أن ينتهي JavaScript في لحظة عشوائية في الوقت المناسب ، وفي هذه الحالة يحب أن يقول: "Mm ..." وتعطل. كان لا بد من إصلاحها. وفعلنا ذلك أيضًا.
أسفر مشروع هذا العمل عن حصول Google على براءة اختراع. حصلت Google على براءة اختراع لعدم ملاحقتك ، ولكن ، مثل معظم الشركات الأخرى (باستثناء Oracle القديمة ، على الأرجح) ، لحماية نفسك إذا حدث شيء ما إذا جاء أحدهم إليهم وقال: "رجال ، لقد صنعت Google "ابحث ، هذا سيء ، لدينا براءات اختراع." ولسبب ما ، سيقوم هؤلاء الرجال بعمل مصحح أخطاء JavaScript في نفس الوقت. ستقول Google: "وهنا لدينا براءة اختراع لمصحح جافا سكريبت". حسنًا ، يعرف محامو براءات الاختراع بشكل أفضل ما يجري هناك ، لكننا براءة اختراع ، كان الأمر ممتعًا. تقدم Google قطعة صغيرة من الأحجية عندما تحصل على براءة اختراع. انه رائع جدا وكان ذلك مثيرا للاهتمام ، لأنه لم يقم أحد بذلك من قبل ، وتمكنا من القيام بذلك.
ديمتري: ويبدو أنه يتم عرض شيء ببساطة في وحدة التحكم.أليكسي: نعم ، نعم ، كل شيء "بسيط" للغاية ، بالطبع. كان اقتباس شخص ما هو أن أي تكنولوجيا جيدة الصنع لا يمكن تمييزها عن السحر.
ديمتري: حسنا ، نعم ، مثيرة للاهتمام. وماذا أردت حقًا القيام به ، لا يمكن القيام به؟ أي شيء آخر؟ أكثر قوة؟أليكسي: هذا سؤال خطير للغاية. أنت دائما تريد أن تفعل كل شيء ، وليس هناك وقت كاف. بالطبع ، أود أن أنهي الأمور التي بدأناها ، لكنني لم أنتهي منها. هذا نموذج غير متزامن ، ولا يزال يتعين تصحيح الأخطاء غير المتزامن ، بالطبع ، وجعله أكثر وضوحًا للمستخدم ، لاتخاذ بعض الخطوات الإضافية. لست متأكدًا مما يجب فعله هناك ، ولكن من المهم أن أرغب في الانتهاء: في الإصدار الثامن ، توجد آلية مشابهة لـ
HotSwap في Java ومع التقنيات المماثلة ، عندما يمكنك أخذ جزء من التعليمات البرمجية في برنامجك قيد التشغيل الآن وتحديث المكسب. على سبيل المثال ، لقد استقرت على استثناء وتعرف كيفية إصلاحه ، وإصلاحه على الفور هناك ، وحفظ الملف ، وكل شيء يعمل بشكل أبعد ، وكما لو لم تكن هناك استثناءات - تم إصلاح كل شيء بشكل مباشر. هذه هي أداة رائعة جدا. يعتقد البعض أنه يمكن حتى أن يحل محل التصحيح بطريقة ما ، لأنك تكتب الكود تدريجيًا على شكل قطع صغيرة ، ترى على الفور ما يحدث - ليست هناك حاجة عملياً للتصحيح بعد ذلك.
ولوقت طويل جدًا ، منذ حوالي 9-10 سنوات ، كان لدينا رمز فعل ذلك. تمت كتابته قليلاً في عالم آخر ، في واقع مختلف - كان هناك إصدار مختلف من الإصدار الثامن ، ولم يكن هناك كل من هذه الإشعال ، و TurboFan وكل شيء آخر. لست متأكدًا من أنه حتى ذلك الوقت كان Crankshaft موجودًا ، إنه المترجم السابق في V8. لم يكن هناك شيء. و متزامن / تنتظر لم يكن هناك أيضا ، بالطبع. كانت الشفرة قديمة جدًا ، فقد استخدمت بعض الأدوات المساعدة الداخلية V8 القديمة التي كانت تدعم فقط لهذا الرمز ، لأنه في ذلك الوقت لم يكن أحد يريد فهم هذا الرمز وإعادة كتابته.
في مرحلة ما ، جلست وأعد كتابتها ، وبدأت في التحطم أقل. لكنه لا يزال يقول في كثير من الأحيان إنه لا يستطيع تعديل الشفرة ، لأنه ، على سبيل المثال ، لا يوجد دعم كاف للمولدات. عند كتابة هذا الرمز ، كان هناك مولد واحد لكل مليون سطر من التعليمات البرمجية في JavaScript. وعندما نحصل على التزامن / الانتظار ، تكون كل وظيفة التزامن / الانتظار هي في الواقع مولد في حد ذاته. لذلك ، إذا طلبت تحرير الكود باستخدام المزامنة / الانتظار ، فسوف تشعر بخيبة أمل.
ونظرًا لأن هذه لا تزال أدوات للمطورين وتصحيح الأخطاء ، فهناك ميزة غير سارة: إذا لم يعملوا مرتين من أصل عشرة عند استخدام الأداة ، فلن يستخدموها بعد الآن. وأود كثيرا أن الانتهاء منه. ربما سنكملها ، لأنه من المحتمل الآن أن أحضر V8 إلى مكان عملي الجديد وبسبب هذا يمكنني الاستمرار في العمل عليه.
ديمتري: هل يمكن أن يعمل هذا بشكل حصري أثناء تصحيح الأخطاء ، أو يمكن نظريًا تغيير جزء من التطبيق في إنتاج تطبيق صفحة واحدة؟أليكسي: من وجهة نظر V8 ، في الإنتاج ، من الأسهل تغييره ، يصبح التغيير أكثر صعوبة عندما تتوقف مؤقتًا. إذا تم إيقافه مؤقتًا ، فسيكون لديك تتبع المكدس الحالي ، والذي يعمل بالفعل. من الضروري تحديث هذا الكود وإجبار كل هذا المكدس الحالي ، الذي يشير إلى بعض المتغيرات في الكود ، على مواصلة العمل. وعندما يكون لديك مجرد إنتاج ، يمكنك الانتظار حتى اللحظة التي انتهت فيها JavaScript (نأمل أن لا يكون لديك (صحيح) هناك) ، وفي هذه اللحظة يتم استبدال كل شيء بشكل غير محسوس.
وهو أبسط بكثير ، لأنه يمكنك ببساطة استبدال الشفرة ، لا تحتاج إلى تحديث جميع الروابط. والصعوبة الأساسية هي ، بالطبع ، استبدال جميع الروابط وإعادة تشغيل جميع الإطارات وإعادة تشغيل المولدات وما إلى ذلك.
أليكس: كان لدي سؤال فجأة حول استخدام Chrome DevTools باعتباره IDE. هناك مثل هذه الوظيفة عندما تقوم بتحرير جافا سكريبت ويمكنك ربطها بطريقة ما بنظام الملفات ونفس الشيء مع الأنماط. ولدي الكثير من الأسئلة له ، لأنها لا تعمل. وأنا شخص كسول ، أحب إصلاحه في مكان واحد ، على سبيل المثال.أليكسي: السؤال ، على ما يبدو ، هو لماذا لا يعمل. من المهم أن نقول في البداية أن Chrome DevTools لم يكن أبدًا عبارة عن IDE ، ولم يضعوا أنفسهم مطلقًا كمعرّف IDE. IDE هو مشروع على نطاق مختلف ، ويتطلب بذل جهود أخرى والمزيد من الناس. تم تصميم Chrome DevTools أولاً كأداة ، ثم كمحرر. على عكس IDEs ، التي تظهر كمحرر ، ثم قم بإضافة مصحح أخطاء ومكونات إضافية وما إلى ذلك.
في الوقت نفسه ، أدركنا أنه سيكون من الجيد جدًا أن يقوم المستخدمون بالتحرير والحفظ ، فقد كانت هناك عدة محاولات للقيام بذلك - الآن ، على الأرجح ، المحاولة الثانية أو الثالثة ... ولكن كل ذلك يرجع إلى حقيقة أنه على الويب ، مع الأخذ في الاعتبار وجود جميع المترجمين Webpack CSS وكل شيء آخر ، مهمة تافهة للغاية هي تطبيق التغييرات مرة أخرى. يمكنك تغيير الكود الذي تراه داخل الصفحة ، وعليك أن تفهم من أين جاء هذا الكود في صفحتك وأن تطبق التغيير مرة أخرى بعناية.
لذلك ، من ناحية أخرى ، يمكننا القول أنه يمكننا ببساطة القيام بذلك للعمل من أجل الأشخاص الذين ليس لديهم مثل هذه التكوينات المعقدة ، ولكن لسوء الحظ ، هذه نسبة مئوية صغيرة جدًا من مستخدمينا. الآن كل شخص لديه webpack ، بابل وهلم جرا. وهي تنقل بسهولة وتفعل شيئًا ما في اتجاه واحد ، لكن الحصول على المعلومات في الاتجاه المعاكس يمثل مشكلة. بالنسبة إلى CSS و SASS ، تم ذلك بطريقة سحرية ، وفي بعض الأحيان يبدو أنه يعمل ، لم أستخدمه.
ما إذا كان هذا سيتغير في المستقبل ، لا يزال بإمكانك السؤال. يمكنك استخدام Visual Studio Code أو IDE المفضل لديك (WebStorm أو أي شيء آخر) ، وتعديل الرمز هناك ، وسيحاول Chrome DevTools تطبيق هذه التغييرات مباشرة. ولكن في الواقع ، لدينا مشروع منفصل للواجهة الأمامية لـ Node ، سنتحدث عنه على الأرجح حتى في وقت لاحق ، إنه يعمل بشكل أفضل هناك ، لأن الحمد لله ، لدى Node الحد الأقصى من التجميع وتجميع TypeScript في JavaScript. إنه أمر صعب بالفعل ، لكن ما زلت آمل أن تتم كتابة معظم الحزم والوحدات النمطية في Node في جافا سكريبت خالص دون خطوات بناء وسيطة. لم أجب على السؤال ، لكنني استطعت.
ديمتري: ما رأيك ، كيف سيتطور Chrome DevTools أكثر من حيث المبدأ؟ ما أروع الأشياء التي تتوقعها منه؟أليكسي: هذا سؤال صعب. في مرحلة ما ، ظهر شخص على Google I / O قام بعمل أداة أخرى مناسبة للمصممين. هذا الامتداد لـ Chrome ، لسوء الحظ ، لا أتذكر الاسم. ويضيف مباشرة أعلى صفحتك بعض العناصر التي تسهل عليك كمصمم تحرير والقيام بكل شيء. وكانت هناك أفكار مفادها أن Chrome DevTools قد يكون أداة أفضل للمصممين. إنها بالفعل أداة ملائمة إلى حد ما يمكنها ، على سبيل المثال ، إلقاء نظرة على CSS وما إلى ذلك ، ولكن لا يزال بإمكانك جعلها أكثر مثالية وملاءمة. على سبيل المثال ، تحرير أكثر ملاءمة للخصائص المرنة والتحسينات الصغيرة الأخرى.
وهناك جزء مهم من العمل على Chrome DevTools: المشروع كبير جدًا ، ويحتوي على الكثير من المستخدمين ومجموعة كبيرة من الأخطاء التي يمكن لأي شخص
تقديمها على
crbug.com . يحتاجون إلى إصلاح ، وهناك الكثير منهم ، ويقضي الكثير من الوقت لمجرد جعل كل شيء يعمل. لتصحيح أخطاء JavaScript المباشرة ، والتي تحدثنا عنها ، قد تكون hotswap خطوة جيدة ، لكنها قد لا تكون أو لا أعرف ، لا أعرف.
Alexei: يبدو أن Chrome DevTools هو أكثر البرامج تطوراً لمساعدة مطوري الويب بموضوعية. ولكن هناك متصفحات أخرى - Safari ، Edge لا يزال هناك ، Firefox مرة أخرى. هل هناك أي أدوات أود السحب من المتصفحات الأخرى في Chrome DevTools؟ هل هناك شيء تريده ، كم هو رائع؟Alexey: يبحث مطورو Chrome DevTools بانتظام عن المتصفحات الأخرى. من المثير للاهتمام الذي لاحظته هناك مؤخرًا ، أتذكر أن Safari كان لديه وحدة تحكم مريحة للغاية. لقد قاموا بتنظيم الإخراج إلى وحدة التحكم بشكل جيد جدًا ، وأضافوا التنقل باستخدام الأسهم الموجودة على النتائج. يمكنك تحديد كائن هناك ، اضغط على "يمين" - سيتم فتحه. كان لعنة مريحة. نتيجة لذلك ، أصبحت هذه الميزة الآن في Chrome DevTools.
في Firefox ، من الأشياء المثيرة للاهتمام في DevTools ، يبدو لي أنها تدعم التحرير المرئي لجميع خصائص CSS بشكل أفضل قليلاً - بهذا أعني الخصائص مثل المرن وغيرها - فهي تظهر لك الشبكة مباشرة أعلى الصفحة ، ويمكنك نقلها كلها للأعلى إلى أسفل. هذا رائع ، لدينا جزئيا ، ولكن ليس تماما. أعتقد أن Firefox DevTools لديه حاليًا أفضل دعم لبرنامج WebAssembly. إذا كان عليك لسبب ما أن تكتب شفرة WebAssembly ، فهي أفضل بكثير منا ، لأنه لم يكن لدينا شيء منذ ستة أشهر ، والآن لم أتحقق منها. أعتقد أنهم يستثمرون الكثير من الطاقة في هذا.
بالنسبة إلى Safari ... بطريقة ما ، فإن Chrome DevTools عبارة عن مفترق لمفتش الويب الخاص بـ Safari ، لذلك اتخذنا كل ما بوسعهم.
تذكرت الشيء المهم! ربما فقط Firefox لديه Time Travel Debugging. على جهاز Mac ، في Firefox’s Nightly Builds ، يمكنك الانغماس في Time Travel Debugging. لقد التزمت الصمت عنه عندما سُئلت عن الخطوات الكبيرة التالية: يبدو ذلك رائعًا جدًا وهائل جدًا - ما زلت لا أعتقد أنه مفيد جدًا. وجهة نظر شخصية. ولكن لديهم ، يمكنك تجربة ، إذا كان يساعدك ، ستكون أداة جديدة مثيرة للاهتمام.
: . , , -- . , ( ) , , 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 , , .