Chrome 73开发者工具更新

英文原文地址:https://developers.google.com/web/updates/2019/01/devtools

日志点(logpoint)

使用日志点功能可以避免你在代码中调用cosole.log()来调试代码。
添加日志点的步骤:

  1. 右键点击你想要加日志的行号
  2. 选择“添加日志点”(Add logpoint…)将弹出断点编辑器
  3. 在断点编辑器中输入你想记录的表达式
  4. 按回车或在断点编辑器外点击以保存。行号上会有橙黄色的标识符
    下一次运行到这一行的时候,将在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版本添加的。

保存地理位置特别定制

传感器选项卡里现在支持特别定制的地理位置

  1. 按Control+Shift+P或Command+Shift+P(Mac)打开命令窗口
  2. 键入”sensors”选择“Show Sensors”然后回车打开传感器选项卡
  3. 在地理位置“Geolocations”中点击“管理”(Manage)
  4. 点击“添加位置”
  5. 输入位置名字,经纬度,再点击添加按钮

代码折叠

现在源代码(Sources)和网络(Network)面板支持代码折叠了。但需要在Settings > Preferences > Sources中启用它。

消息选项卡

Frames选项卡被重命名为Messages选项卡。此选项卡仅在调试web socket的时候在网络面板中出现。

发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/87602213