DevTools中的新功能（Chrome 73）
使用Logpoints将消息记录到控制台，而不会通过console.log() 调用使代码混乱。
要添加日志点：
-
右键单击要添加Logpoint的行号。
[图片上传失败...(image-bca9b7-1554969147389)]
image.png
图1。添加日志点
-
选择添加logpoint。该断点编辑弹出。
[图片上传失败...(image-64506e-1554969147388)]
image.png
图2。断点编辑器
-
在“ 断点编辑器”中，输入要记录到控制台的表达式。
[图片上传失败...(image-8e3354-1554969147388)]
image.png
图3。键入Logpoint表达式
school 小费！当注销变量（例如TodoApp）时，将变量包装在对象（例如{TodoApp}）中以在控制台中注销其名称和值。请参阅 始终记录对象open_in_new和 对象属性值简写open_in_new以了解有关此语法的详细信息。
-
按Enter或单击断点编辑器外部以保存。行号顶部的橙色徽章表示Logpoint。
[图片上传失败...(image-f96ffc-1554969147388)]
image.png
图4。第174行的橙色Logpoint徽章
下一次执行该行时，DevTools会将Logpoint表达式的结果记录到控制台。
[图片上传失败...(image-33ece2-1554969147395)]
image.png
图5。控制台中Logpoint表达式的结果
请参阅Chromium问题＃700519open_in_new以报告错误或建议改进。
检查模式中的详细工具提示
检查节点时，DevTools现在显示一个扩展的工具提示，其中包含常用的重要信息，如字体大小，字体颜色，对比度和盒子模型尺寸。
[图片上传失败...(image-eebae6-1554969147395)]
image.png
图6。检查节点
要检查节点：
-
单击“ 检查” [图片上传失败...(image-8ad7e4-1554969147390)]
image.png
。
school 小费！将鼠标悬停在Inspect上 [图片上传失败...(image-c31832-1554969147390)]
image.png
可查看其键盘快捷键。
-
在视口中，将鼠标悬停在节点上。
导出代码覆盖率数据
代码覆盖率数据现在可以导出为JSON文件。JSON看起来像这样：
hdr_strongcontent_copy
[
{
"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是DevTools分析的CSS或JavaScript文件的URL。 ranges描述了所使用的代码部分。 start是使用范围的起始偏移量。 end是结束偏移量。text是文件的全文。
在上面的示例中，范围0到21对应于body { margin: 1em; }并且范围45到67对应于h1 { color: #317EFB; }。换句话说，使用了第一个和最后一个规则集，而中间规则集则没有使用。
要分析在页面加载时使用了多少代码并导出数据：
-
按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开命令菜单。
[图片上传失败...(image-a91bd4-1554969147388)]
image.png
图7。命令菜单
-
开始输入coverage，选择显示覆盖范围，然后按Enter。
[图片上传失败...(image-cd6e8-1554969147388)]
image.png
图8。显示覆盖范围
“ 覆盖”选项卡将打开。
[图片上传失败...(image-d06298-1554969147388)]
image.png
图9。Coverage选项卡
-
单击“ 重新加载” [图片上传失败...(image-5cec62-1554969147390)]
image.png
。DevTools重新加载页面并记录与发送的数量相比使用的代码量。
-
单击“ 导出” [图片上传失败...(image-4dd40a-1554969147390)]
image.png
将数据导出为JSON文件。
Puppeteer也提供代码覆盖率，Puppeteer是由DevTools团队维护的浏览器自动化工具。请参阅覆盖范围open_in_new。
请参阅Chromium问题＃717195open_in_new以报告错误或建议改进。
使用键盘导航控制台
您现在可以使用键盘导航控制台。这是一个例子。
按Shift+ Tab关注最后一条消息（或评估表达式的结果）。如果消息包含链接，则首先突出显示最后一个链接。按下Enter可在新选项卡中打开链接。按Left箭头键突出显示整个消息（参见图13）。
[图片上传失败...(image-1bf097-1554969147394)]
image.png
图11。聚焦链接
按Up箭头键可以聚焦下一个链接。
[图片上传失败...(image-d199ce-1554969147394)]
image.png
图12。聚焦另一个链接
再次按Up箭头键可以聚焦整个消息。
[图片上传失败...(image-22e021-1554969147394)]
image.png
图13。聚焦整个信息
按Right箭头键可展开折叠的堆栈跟踪（或对象，数组等）。
[图片上传失败...(image-8fb0f1-1554969147394)]
image.png
图14。展开折叠的堆栈跟踪
按Left箭头键可折叠展开的消息或结果。
请参阅Chromium问题＃865674open_in_new以报告错误或建议改进。
拾色器中的AAA对比度线
颜色选择器现在显示第二行，以指示哪些颜色符合AAA对比度建议open_in_new。从Chrome 65开始，AA系列已经存在。
[图片上传失败...(image-a127f-1554969147394)]
image.png
图15。AA线（上）和AAA线（下）
两条线之间的颜色代表符合AA建议但不符合AAA建议的颜色。当颜色符合AAA建议时，该颜色同一侧的任何内容也符合建议。例如，在图X中，下面一行以下的任何内容都是AAA，而高于上面一行的任何内容都不符合AA建议。
school 小费！通常，您可以通过增加符合AAA建议的文本量来提高页面的可读性。如果由于某种原因无法满足AAA建议，请尝试至少满足AA建议。
请参阅拾色器中的对比度以了解如何访问此功能。
请参阅Chromium问题＃879856open_in_new以报告错误或建议改进。
保存自定义地理位置覆盖
“传感器”选项卡现在允许您保存自定义地理位置覆盖。
-
按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开命令菜单。
[图片上传失败...(image-1cdd86-1554969147388)]
image.png
图16。命令菜单
-
键入sensors，选择“ 显示传感器”，然后按Enter。“ 传感器”选项卡将打开。
[图片上传失败...(image-630420-1554969147388)]
image.png
图17。传感器选项卡
-
在“ 地理位置”部分中，单击“ 管理”。设置 > 地理位置打开。
[图片上传失败...(image-f1138c-1554969147388)]
image.png
图18。“设置”中的“地理位置”选项卡
-
单击添加位置。
-
输入位置名称，纬度和经度，然后单击“ 添加”。
[图片上传失败...(image-ab4074-1554969147388)]
image.png
图19。添加自定义地理位置
请参阅Chromium问题＃649657open_in_new以报告错误或建议改进。
代码折叠
的来源和网络面板现在支持代码折叠。
[图片上传失败...(image-fd0241-1554969147393)]
image.png
图20。线54至65已折叠
要启用代码折叠：
-
按F1打开“设置”。
-
在设置 > 首选项 > 源下启用代码折叠。
折叠代码块：
-
将鼠标悬停在块开始的行号上。
-
单击折叠 [图片上传失败...(image-4069e2-1554969147389)]
image.png
。
请参阅Chromium问题＃328431open_in_new以报告错误或建议改进。
消息标签
“ 框架”选项卡已重命名为“ 消息”选项卡。此选项卡仅在检查Web套接字连接时在“ 网络”面板中可用。
[图片上传失败...(image-ebdd6-1554969147393)]
image.png
图21。消息选项卡
网友评论