Skip to main content

devtools1

· 6 min read

本文分享一些不常见但很有用的JavaScript 调试技巧，能够有效提高浏览器开发工具的使用效率。

一、元素面板​

首先介绍的是 Elements 面板。

元素.png

1. 重新排列元素的位置​

可以拖放元素以在位置上上下移动，可用于编辑/调试 HTML 结构。

dom_move.gif

2. 在元素面板中引用节点​

可以通过 $0 调试元素面板选中的 DOM 节点。

注意：如果你在你的项目中使用 jQuery，你可以使用$($0)jQuery API 来访问和应用这个元素。

参考元素.gif

3. 用一个 DOM 节点做很多事情，比如截屏？​

可以在不退出调试器工具的情况下截取 DOM 节点的屏幕截图。

选择一个节点按下 ctrl-shift-p（Mac 快捷键），输入 screen 搜索截图功能，完成 DOM 节点的屏幕截图。

截图.gif

同时，按下 ctrl-shift-p 后还有很多功能可以使用，可以自行探索。

二、控制台面板​

接下来介绍的是 console 面板的使用技巧：

cosnole.png

1. 多行 console​

按住shift-enter以继续执行每一行，完成后，按enter键，可以实现多行日志。

多行控制台.gif

2. 控制台日志格式化​

除了 console.log('Hi')，还有一些更有用的格式化版本：

  • %s 将变量格式化为字符串；
  • %d 将变量格式化为整数；
  • %f 将变量格式化为浮点数；
  • %o 可用于打印 DOM 元素；
  • %O 用于打印对象表示；
  • %c 用于传递 CSS 来格式化字符串。

在控制台面板中下列代码：

console.log(
  '%c I have %d %s',
  'color: green; background:black; font-size: 20pt',
  3,
  'Bikes!'
)

输出如下：

格式控制台.png

3. 存储为全局变量​

可以将 JSON 对象的任何部分保存为可在控制台面板中访问的全局变量：

global_var_console.gif

4. 控制台面板中的高级日志记录​

4.1 console.dir​

console.log(['Apple', 'Orange]);

输出：

高级日志1.png

console.dir(['Apple', 'Orange'])

输出与上面几乎相同，但它明确表示类型为Array。

高级日志2.png

4.2 console.table​

console.table 会在控制台中打印一个表格。

当您处理复杂的对象时，只需将其打印为 table 即可。

看看它的实际效果：

控制台表.gif

5.保存控制台日志​

只需选中图示复选框，即可在导航到其他页面时保留控制台中的日志：

保存日志.gif

6. console.group​

有时，保持日志松散会导致调试延迟。

console.group 可以将所有日志组合在一起。

console.group('Testing my calc function');
console.log('adding 1 + 1 is', 1 + 1);
console.log('adding 1 - 1 is', 1 - 1);
console.log('adding 2 * 3 is', 2 * 3);
console.log('adding 10 / 2 is', 10 / 2);
console.groupEnd();
`

输出是一个分组的日志：

分组日志.png

7. console.time​

console.time 可以测量执行一段代码需要多长时间。

function test time() {
  var users= [
    {
      firstname: "Tapas",
      lastname: "Adhikary",
      hobby: "Blogging"
    },
    {
      firstname: "David",
      lastname: "Williams",
      hobby: "Chess"
    },
    {
      firstname: "Brad",
      lastname: "Crets",
      hobby: "Swimming"
    },
    {
      firstname: "James",
      lastname: "Bond",
      hobby: "Spying"
    },
    {
      firstname: "Steve",
      lastname: "S",
      hobby: "Talking"
    }
  ];

  var getName = function (user) {
    return user.lastname;
  }

  // Start the time which will be bound to the string 'loopTime' 
  console.time("loopTime");

  for (let counter = 0; counter < 1000 * 1000 * 1000; counter++) {
    getName(users[counter & 4]);
  }

  // End the time tick for 'loopTime
  console.timeEnd("loopTime");
}

从控制台面板或节点环境中运行上述代码后，您将获得如下输出，

loopTime: 2234.032958984375ms

这是计算十亿用户的姓氏所需的总时间（以毫秒为单位）。

8. $_ 获取上一个的执行输出​

$_ 可以获取上一个的执行输出，作为输入提供给您的下一个执行逻辑。

last_ref.gif

小结​

以上是我整理的一小部分 DevTools 使用技巧。

您可以从 Google 的 Web 开发人员工具 中找到完整使用文档。

往期精彩​

本文翻译自 Tapas Adhikary 的原创文章。