[译文]Chrome63中开发者面板(Devtools)新增功能

最新推荐文章于 2024-03-22 10:20:05 发布

大转转FE

最新推荐文章于 2024-03-22 10:20:05 发布

阅读量1.0k

点赞数

本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/79119841

版权

欢迎回来！Chrome 63中提供给DevTools的新功能包括：

  
  注意：你可以通过在地址栏运行 chrome://version 来检查你现在正在运行的chrome版本。
每六个星期chrome会自动更新到新的主要版本。

如果你曾经尝试使用 VS Code 或者 WebStorm 等IDE 来调试你的web app,则你可能会发现打开 devtools的过程会把你的调试的session搞乱。这个问题也会导致无法使用 DevTools 来调试WebDriver.

从chrome 63开始，DevTools现在默认支持了可以远程调试多个客户端，无需额外的配置。

多客户端的远程调试功能之前是在crbug.com上排名第一的DevTools的问题，并且在整个Chromium项目中排名第三。多客户端的远程调试功能的支持也为将其他工具与DevTools集成或以新方式使用这些工具开辟了不少有趣的机会。例如：

支持调试协议的客户端，例如 Chorme驱动，或者包含有Chrome调试功能的IDE，例如： VS Code 或者Webstorm，或者WebSocket客户端，例如Puppeteer，现在可以与DevTools同时运行。
两个独立的WebSocket协议客户端（例如Puppeteer或 chrome-remote-interface）现在可以同时连接到同一个浏览器tab上。
使用chrome.debugger API 的 chrome的扩展程序现在可以与devtools面板同时运行
多个不同的chrome扩展程序现在可以在同一个浏览器tab上同时使用chrome.debugger API。

在DevTools 中，工作区(Workspaces)已经存在一段时间了。这项功能可以让你像使用IDE一样使用DevTools.你可以在DevTools中修改你的源代码，这些修改将会在你的文件系统中保留到你项目的本地版本中。

工作区（Workspaces）2.0在1.0的基础上，添加了更有用的用户体验，并改进了传输的代码的自动映射。此功能原定于Chrome 开发者峰会Chrome Developer Summit（CDS）2016后不久发布，但该团队推迟了这个功能，以解决一些问题。

可以查阅【在chrome devtools中运行lighthouse】 (https://developers.google.com/web/tools/lighthouse/#devtools)来了解如何使用“ 审计”面板来提高你开发的页面的质量。

可以查阅[lighthouse] (https://developers.google.com/web/tools/lighthouse/)来了解如何使用“ 审计”面板来提高你开发的页面的质量。

在DevTools 中，模拟推送通知的功能已经运行一段时间了，但有一个限制：您无法发送自定义数据。在chrome63中的Service Worker面板中，我们添加了新的推送(PUSH)文本框。可以现在就试试：

图表2：模拟发送的推送通知

使用自定义标签出发后台同步事件

在Service Workers面板中，出发后台的同步事件也已经存在了一段时间，从现在开始，你可以发送自定义标签：

图表3：点击 sync 按钮之后，DevTools 使用自定义标签发送了一个背景的同步事件，向service worker更新了内容。

关注