chaussen

Chrome浏览器63版开发者工具(DevTools)新功能

原文链接: developers.google.com

Chrome浏览器63版开发者工具(DevTools)新功能

Kayce Basques

作者 Kayce Basques

Google公司技术撰稿人

欢迎回来!Chrome浏览器63版又有了新功能,包括:

注: 可以在chrome://version地址查看目前运行的Chrome浏览器版本。Chrome浏览器每六个星期会自动更新到最新的主要版本。

观看下面视频,了解更多信息!

https://www.youtube.com/embed/Eyw_mwbABIQ?autohide=1&showinfo=0&enablejsapi=1

支持多客户端远程调试

用VS Code或WebStorm之类的IDE编辑器试过调试程序的人可能都碰到过这种情况,开发者工具(DevTools)一打开调试操作就全乱了。这个问题也使得用WebDriver做测试时无法使用开发者工具(DevTools)进行调试。

现在,在Chrome浏览器63版里不需要设置,开发者工具(DevTools)默认即支持同时运行多个远程调试的客户端程序。

多客户端远程调试是crbug.com上受关注度第一的问题,在整个Chromium项目里关注度排第三。支持多客户端也为其它工具与开发者工具(DevTools)之间的整合带来新思路,还给那些工具创造了新用法,很令人关注。比如:

  • 像ChromeDriver,VS Code编辑器,Webstorm编辑器的Chrome调试扩展程序等协议客户端,还有像Puppeteer那样的WebSocket客户端,现在都可以与开发者工具(DevTools)同时运行。
  • 两个独立的WebSocket协议客户端,如Puppeteerchrome-remote-interface现在可以同时连接到同一个网页标签上去。
  • chrome.debugger API接口的Chrome扩展程序现在可以与开发者工具(DevTools)同时运行。
  • 多个不同的Chrome扩展程序现在可以在同一时间、同一网页标签上使用chrome.debugger API接口。

工作存储空间(Workspaces)2.0版

工作存储空间(Workspaces)在开发者工具(DevTools)里已经有一段时间了。这个功能使用户能把开发者工具(DevTools)当作IDE编辑器来用。可以在开发者工具(DevTools)里修改源代码,所做的修改能存储在文件系统里,保存在项目的本地版本中。

工作存储空间(Workspaces)2.0版从1.0版脱胎而来,给用户加入了更贴心的使用体验,改进了转编译代码的自动映射功能。这个功能原本计划要在2016年Chrome开发者峰会(CDS)后不久发布的,但开发小组要解决一些问题,所以推迟了。

请看2016年峰会(CDS)上关于开发者工具(DevTools)的发言。其中的“创建(Authoring)”部分大约在14分28秒左右,可以认识一下2.0版的实际应用。

https://www.youtube.com/embed/HF1luRD4Qmk?autohide=1&showinfo=0&start=868&enablejsapi=1

四种新的监听项目

Chrome浏览器63版监听(Audits)面板有四种新的项目:

  • 能否以WebP图片格式显示图片。
  • 能否以合适的纵横比例处理图片。
  • 是否避免使用已知有安全漏洞的前台JavaScrip库。
  • 浏览器错误是否记录到控制台终端上。

Chrome开发者工具(DevTools)里运行灯塔(Lighthouse)自动化工具,了解如何使用监听(Audits)面板来改善页面质量。

灯塔(Lighthouse)自动化工具,了解更多关于这个项目是如何推动监听(Audits)面板功能的。

模拟自定义数据推送通知

模拟推送通知功能在开发者工具(DevTools)里已经有一段时间了,却有一个局限:不能发送定义数据。但现在Chrome浏览器63版在服务工作器(Service Workers)面板里加了新的推送(Push)文本输入框,就可以发送了。

  1. 简单推送演示网页。
  2. 点击开启推送通知(Enable Push Notifications)
  3. Chrome浏览器提示时,点击允许(Allow),允许通知发送。
  4. 启动开发者工具(DevTools)。
  5. 服务工作器(Service Workers)面板。
  6. 推送(Push)文本输入框里写点什么东西。

模拟自定义数据推送通知。 图1 通过服务工作器(Service Workers)面板里的推送(Push)文本输入框,模拟自定义数据推送通知。

  1. 点击推送(Push)按钮,发送通知。

模拟出来的推送通知 图2 模拟出来的推送通知

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

触发后台同步事件功能也已经在服务工作器(Service Workers)面板里有一段时间了,但现在可以发送自定义标签了:

  1. 打开开发者工具(DevTools)。
  2. 服务工作器(Service Workers)面板。
  3. 同步(Sync)文本框里输入一些文字。
  4. 点击同步(Sync)按钮。

触发自定义后台同步事件

图3 点击同步(Sync)后,开发者工具(DevTools)会以自定义标签更新内容(update-content)来发送一个后台同步事件给服务工作器。