众所周知，如何使用Chrome DevTools进行开发。 Chrome DevTools本身的开发是什么样的？
Alexei Kozyatinsky之前曾在Google工作过，现在就任职于Netflix，但与以前的工作并没有什么距离。
他现在到底在做什么？ 对于普通的非Google开发人员来说，在DevTools中复制有用的东西有多现实？ Chrome工程师使用哪些计算机？
我们目前正在主持HolyJS 2019 Piter会议，Alexey已经在该会议上发表了新报告“ Chrome DevTools Protocol”（可以在
免费广播中查看该记录）。 这次，HolyJS程序委员会的两名成员对他进行了详细询问：
Dmitry DmitryMakhnev Makhnev和
Alexei zolotyh Zolotykh 。
Dmitry Makhnev：告诉我一些关于你自己的事。 您现在在哪里，如何，在哪里做什么？Alexei Kozyatinsky：我会
再说一遍 ，告诉您Google的Chrome DevTools已经使用了四年多。 基本上，我做了一个JavaScript调试器，所有与JavaScript，Node有关的事情，以及所有围绕JavaScript可以想象的事情。 现在，我在另一家名为Netflix的公司工作。 在这里，我来做一件非常简单的事情：他们拥有自己的内部Web引擎和自己奇怪的JavaScript。 整个过程都需要自己的出色工具，这些工具可以称为“ Chrome DevTools”。 因此，我的目标是制造这些工具。
它仍然很重要，我需要做一些事情，并且对所有事情都负有绝对责任：对于这项业务的后端，对于DevTools前端的正常工作。 同时，我们的目标是以一种可以继续走私Chrome DevTools的方式进行工作，以升级所有可能的补丁程序。 为了避免我们分叉，我们将永远分散，并失去来自Google的出色同事的工作成果。 因此，我继续像以前一样做-Chrome DevTools。
德米特里：酷。Alexei Zolotykh： 您在HolyJS上的传记写有以下措辞：“他领导了公司改善开发人员生活的大部分尝试，从异步堆栈开始，到新的时髦Query Objects结束。” 首先，为什么要尝试？ 其次，您能否告诉我们更多信息-这可能与Google有关吗？阿列克谢：让我们从“尝试”一词开始。 很好的问题。 我对此有一个答案。 这最初是“努力”一词。 由于我过去几年在加利福尼亚生活和工作，所以翻译失败了。 为什么我决定将“努力”一词翻译为“尝试”？ 也许这仍然不是“尝试”。 当然，这些都是“尝试”，因为我们试图做某事，但是这些都是成功的尝试，我们完成了大部分尝试。
但是与此同时，查询对象-它很小，可以在Twitter或Medium上读取，这就是我们已经完成的工作。 异步调试是我们在Chrome DevTools中需要完成的工作。 我们开始这样做，尝试了几次，因为这不是一件小事。 您尝试一种解决方案-听取用户的意见，他们来找您说：“我不明白这里发生了什么，您能对此做些什么吗？” 您尝试不同的方法，尝试做其他事情，因此，逐步地，会发生一些事情。 但重要的是要说大多数尝试都是成功的。
在Google，我度过了大部分的开发生涯。 我曾经作为实习生来过那里。 当圣彼得堡有Google办事处时，那是一段美好的时光。 到达那里后，我注定要从事Chrome DevTools的工作：我别无选择，因为我是Chrome DevTools团队的实习生。 有人告诉我：“这是一个非常简单的实习项目。 我们有一个很酷的API，它使我们能够获取所有JavaScript代码，以某种方式对其进行处理，将其返回，并告诉Chrome执行另一个JavaScript，而不是我们来的JavaScript。”
我们有这样的API，并且在此基础上可以构建AST树。 我记得关于AST树
的报道很不错。 有必要解析AST树并以一种测量执行时间的方式来指示代码，并实际编写工具分析器。 这是一个互联网项目，我仍然在GitHub上的某个地方。 它在Chrome中已经使用了很长时间，因为它使用的API被要求自行删除-很难维护。 那天我感到非常难过，因为这是构建整个项目的API-“删除它”。 然后我删除了它。 三个月后，我从实习生转到了工程师-我留在Google，开始从事与JavaScript相关的所有工作。 从一个非常简单的开始：我必须修复console.log（）。 然后逐渐发生了JavaScript相关工具团队的主要部分由于某种原因离开了团队，而我几乎剩下了所有JavaScript。 那一刻非常恐怖，但我已经准备好并逐渐开始做一些事情，以了解一些事情。
同时，正如我们所知，JavaScript开发出了希望，希望在那里出现了。 现在我们已经有了异步/等待，箭头功能出现在所有可能的框架中，因此我们需要内联断点（没有断点是不可能的）-我确实做了很多小的改进。 异步栈证明是很多工作，这是一个异步模型，以非常简单的语言描述了JavaScript中的异步。
而且由于您无法在JavaScript前端的Chrome DevTools中工作，而且对V8引擎一无所知，因此在所有这些工作中，我逐渐有越来越多的东西走私到V8中。 我那里有很多补丁。 有时，我们将JavaScript后端从Chrome代码迁移到了V8代码。 当然，从一开始就这样做是合乎逻辑的，但从历史上看，他并不在那里。 同时，Node来到我们这里，我们不得不以某种方式支持它，然后我们决定如果我们可以调试V8，而Node似乎使用V8，为什么不与我们一起提供Node支持呢？ 而且我们做到了，在这个项目中我不是最重要的，但是我积极地帮助那些做过的人。 我在Google上做这件事已经有五年了。
德米特里：您认为其中最酷，最难的是什么？阿列克谢：由于某种原因，最后的记忆是最好的。 最后一个是我们所做的有趣的项目。 现在位于Chrome DevTools控制台中，当您键入内容时，您可以看到进行键入操作的实时结果。 如果您想测试新的JavaScript功能（当时是BigInt），则只需在控制台中打印，即可立即看到结果，而无需按Enter键，并用十亿个结果阻塞控制台。 做正确的事比听起来困难。 对我们来说非常重要的是，贪婪地执行所有表达式，我们不会破坏程序的状态，否则我们所有的用户都会非常沮丧。 为了做到这一点，我们必须采用JavaScript，采用V8并为其添加功能：执行任何表达式，但要确保它不会改变程序的状态。 很长时间以来，这很困难，而且在我们之前没有人做过，再也没有这样的JavaScript引擎了。 我不确定根本没有这样的引擎。 也许在Java中存在（因为在Java中，众所周知，一切都在那里），但是我不确定。 那时我们做到了。
这是一个非常漫长的过程，涉及许多不同的团队，因为这对我们来说不仅重要，而且要执行“无副作用”，而且要确保如果您突然开始运行一个无尽的while（true）循环，那么您就不会挂掉一切在世界上，因为JavaScript流仍然是相同的。 这是一项单独的工作：事实证明，Chrome代码本身不喜欢JavaScript在随机的某个时刻结束，在这种情况下，它喜欢说：“ Mm ...”并崩溃。 它必须修复。 我们也做到了。
这项工作的项目使Google甚至获得了专利。 Google申请了专利，不追随您，但像大多数其他公司（可能是旧的Oracle除外）一样，如果有人碰到他们并说：“老兄，您创建了Google， “搜索，这很糟糕，我们拥有专利。” 出于某种原因，这些家伙将同时执行JavaScript调试器。 Google会说：“这里我们拥有JavaScript调试器的专利。” 好吧，专利律师更清楚那里发生了什么，但是我们申请了专利，这很有趣。 获得专利后，Google会解开一小部分难题。 他很酷。 这非常有趣，因为以前没有人做过，而且我们设法做到了。
德米特里：看来控制台中只是显示了一些东西。阿列克谢：是的，是的，当然，这都是非常“简单”的。 有人引述说，任何先进的技术都无法与魔术区分开。
德米特里：是的，很有趣。 而我真正想做的是什么呢？ 还有吗 更强大？阿列克谢：这是一个非常危险的问题。 您总是想做所有事情，并且没有足够的时间。 当然，我想完成我们开始的工作，但我没有完成。 这是一个异步模型，当然，异步调试仍然必须完成，并且对用户来说更明显，以便采取更多步骤。 我不确定该怎么做，但是从我想完成的重要事情开始：在V8中，有一种类似于Java中的
HotSwap的机制，并且具有类似的技术，当您可以在程序中立即运行一段代码并更新增益时。 例如，您确定了一个异常，并且知道如何修复它，立即在此处修复它，保存文件，然后一切正常进行，好像没有异常-一切都已实时修复。 这是一个非常酷的工具。 某些人认为它甚至可以在某种程度上代替调试，因为您逐渐将代码分成小块编写，您可以立即看到会发生什么—在此之后几乎不需要调试。
大约9到10年前的很长一段时间里，我们有一个执行此操作的代码。 它是在另一个世界中写的，在另一个现实中-有一个不同的V8，没有所有这些Ignition，TurboFan和其他所有东西。 我不确定当时是否有曲轴，那是V8中以前的编译器。 没事 当然，也不存在异步/等待。 该代码很旧，它使用了一些非常老的内部V8实用程序，仅对此代码提供支持，因为当时没有人希望理解并重写该代码。
在某个时候，我坐下来重写了它，然后它开始崩溃的次数减少了。 但是他仍然经常说不能编辑您的代码，因为例如，对生成器的支持不足。 编写此代码时，JavaScript中每百万行代码只有一个生成器。 当我们获得异步/等待时，每个异步/等待函数实际上就是一个生成器。 因此，如果您要求使用async / await编辑代码，您将感到失望。
而且，由于这些仍然是开发人员和调试人员使用的工具，因此存在一个令人不愉快的功能：如果使用该工具时，如果它们不能工作十分之二，那么他们将不再使用它。 我非常想完成它。 也许我们会完成它，因为现在我可能会将V8带到我的新工作地点，因此我可以继续进行工作。
德米特里（Dmitry）：这能否仅在调试期间起作用，或者理论上可以在某些单页应用程序生产中更改应用程序的一部分？Alexey：从V8的角度来看，在生产中，更改更容易，暂停时更难更改。 如果已暂停，则您具有当前已在运行的堆栈跟踪。 有必要更新此代码，并强制所有当前堆栈（在代码中引用某些变量）继续工作。 而且，当您刚开始生产时，可以等待JavaScript结束的那一刻（希望在那里没有（true）），在那一刻，所有内容都被无意识地替换了。
而且它要简单得多，因为您只需替换代码即可，而无需更新所有链接。 当然，主要的困难是替换所有链接，重新启动所有框架，重新启动生成器等。
Alex：我突然对将Chrome DevTools用作IDE提出了疑问。 当您编辑JavaScript时，就有了这样的功能，您可以通过某种方式将其绑定到文件系统，并且样式也一样。 我对他有很多疑问，因为它不起作用。 我是一个懒惰的人，例如，我喜欢将其固定在一个地方。阿列克谢：问题显然是为什么它不起作用。 首先，必须说Chrome DevTools从来不是IDE，也从来没有将自己定位为IDE。 IDE是一个不同规模的项目，需要其他工作和更多人员。 Chrome DevTools首先是作为工具构建的，然后是编辑器。 与IDE不同，后者显示为编辑器，然后添加调试器，插件等。
同时，我们了解到用户进行编辑和保存将是一件非常愉快的事情，有几次尝试进行此操作-现在可能是第二次或第三次尝试了……但这都归结为一个事实，即在网络上，考虑到所有这些webpack CSS编译器的存在除此之外，一项非常重要的任务就是将更改应用回去。 您更改了在页面内看到的代码，需要了解该代码在页面中的来源，并仔细地应用更改。
因此，另一方面，我们可以说我们可以简单地将其用于没有这种复杂配置的用户，但是，不幸的是，这仅占我们用户的一小部分。 现在每个人都有webpack，Babel等。 它们很容易在一个方向上转置并执行某些操作，但是要在相反的方向上获取信息则是一个问题。 对于CSS和SASS，这是以某种神奇的方式完成的，有时它似乎可行，但我没有使用它。
您仍然可以询问这种情况将来是否会改变。 您可以使用Visual Studio代码或自己喜欢的IDE（WebStorm或其他工具），在此处编辑代码，然后Chrome DevTools将尝试实时应用这些更改。 但是实际上，我们为Node的前端有一个单独的项目，我们甚至可能稍后再讨论，它在那里的工作要好一些，因为，谢天谢地，Node具有JavaScript的最大编译级别和TypeScript编译级别。 那里已经很困难了，但是我仍然希望在Node上，大多数包和模块都是用纯JavaScript编写的，没有中间的构建步骤。 我没有回答这个问题，但是我可以回答。
德米特里：您如何看待，Chrome DevTools原则上将如何发展？ 期待他最酷的事情是什么？阿列克谢：这是一个难题。 在某个时候，一个人出现在Google I / O上，他为设计师提供了另一个便捷的工具。 不幸的是，这个Chrome扩展名不记得这个名字。 它直接在页面顶部添加了一些元素，使您作为设计师可以更轻松地进行编辑和执行所有操作。 而且有想法认为Chrome DevTools对于设计者可能是更好的工具。 这已经是一个相当方便的工具，例如可以查看CSS等，但是您仍然可以使其更加理想和方便。 例如，更方便地编辑弹性属性和其他小的改进。
而且，在Chrome DevTools上进行工作的一个重要部分是：该项目非常大，它拥有大量用户，并且存在大量错误，任何人都可以在
crbug.com上进行归档。 他们需要修理，有很多，并且花大量的时间只是为了使一切正常。 对于调试我们已经讨论过的JavaScript实时编辑，热插拔可能是一个不错的下一步，但我不知道它可能有也可能没有。
Alexei：在我看来，Chrome DevTools客观上是可以帮助Web开发人员的最复杂的软件。 但是还有其他浏览器-Safari，Edge仍然存在，再次是Firefox。 我想从Chrome DevTools中从其他浏览器中拖出任何工具吗？ 是否有您喜欢的东西，制作得有多酷？Alexey： Chrome DevTools开发人员会定期查看其他浏览器。 从最近我注意到的有趣之处中，我记得Safari有一个非常方便的控制台。 他们很好地组织了到控制台的输出，并使用结果上的箭头添加了导航。 您可以在那里选择一个对象，按“向右”-它会打开。 真是方便。 结果，此功能现在在Chrome DevTools中。
在Firefox中，从DevTools中有趣的事情来看，它们似乎更好地支持所有CSS属性的可视化编辑-所谓的Flex和其他属性，它们直接在页面顶部显示网格，您可以将其全部向上移动下来。 这很酷，我们可以部分拥有它，但不能完全拥有它。 我认为，Firefox DevTools目前对WebAssembly具有最好的支持。 如果由于某种原因您必须编写WebAssembly代码，那么它们比我们要好得多，因为六个月前我们什么都没有，现在我还没有检查它。 我认为他们为此投入了大量精力。
至于Safari ...从某种意义上说，Chrome DevTools是Safari Web Inspector的一个分支，因此，我们竭尽所能。
我记得重要的事情！ 可能只有Firefox具有Time Travel Debugging。 在Mac上，在Firefox的Nightly Build中，您可以沉迷于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 , , .