Chrome 73中DevTools的新功能

2019-04-11 本文已影响0人 Magic_小灰灰

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问题＃700519 open_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问题＃717195 open_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问题＃865674 open_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问题＃879856 open_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。添加自定义地理位置