英文原文地址:https://developers.google.com/web/updates/2019/01/devtools
日志点(logpoint)
使用日志点功能可以避免你在代码中调用cosole.log()来调试代码。
添加日志点的步骤:
- 右键点击你想要加日志的行号
- 选择“添加日志点”(Add logpoint…)将弹出断点编辑器
- 在断点编辑器中输入你想记录的表达式
- 按回车或在断点编辑器外点击以保存。行号上会有橙黄色的标识符
下一次运行到这一行的时候,将在console上打印日志点表达式的值。
检查(Inspect)模式下的详细提示(tooltip)
在检查一个阶段时,现在将显示一个展开的tooltip,其中包含一般意义上的重要信息,比如字体大小颜色,对比度,盒模型。
导出代码覆盖率数据
代码覆盖率数据现在可以导出为JSON文件了。JSON长这样:
[
{
"url": "https://wndt73.glitch.me/style.css",
"ranges": [
{
"start": 0,
"end": 21
},
{
"start": 45,
"end": 67
}
],
"text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
},
...
]
其中“url”是要分析的CSS或JS文件。“ranges”记录了代码中覆盖的部分。”text”是文件的全文。
在控制台(console)中使用键盘导航(navigate)
现在你可以使用键盘在控制台中导航。例子如下:
按下”Shift + Tab”将焦点移动到最后的消息(或表达式的结果)上。如果消息中包含链接,那么最后一个链接将首先被高亮显示。按回车可以在新标签页打开,用方向键可以做控制高亮和展开等操作。
颜色选择器增加AAA对比度显示
颜色选择器现在增加了第二行用于显示AAA对比度,第一行AA是chrome 65版本添加的。
保存地理位置特别定制
传感器选项卡里现在支持特别定制的地理位置
- 按Control+Shift+P或Command+Shift+P(Mac)打开命令窗口
- 键入”sensors”选择“Show Sensors”然后回车打开传感器选项卡
- 在地理位置“Geolocations”中点击“管理”(Manage)
- 点击“添加位置”
- 输入位置名字,经纬度,再点击添加按钮
代码折叠
现在源代码(Sources)和网络(Network)面板支持代码折叠了。但需要在Settings > Preferences > Sources中启用它。
消息选项卡
Frames选项卡被重命名为Messages选项卡。此选项卡仅在调试web socket的时候在网络面板中出现。