01前端/Chrome DevTools

  • 更新时间：2020-07-10 04:09
  • 创建时间：2020-06-01 04:35

Console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// dir
dir(document.body);

// inspect
document.body;
inspect($0);

// getEventListeners
getEventListeners(document.body);

// monitor
function sum(x, y) {
  return x + y;
}
monitor(sum);
sum(1, 2);

// monitorEvents
monitorEvents($0, "key");

// log dom as object
console.dir(elem)

// log dom
console.log(elem)

Network

  • Initiator: 可以获取发送该请求的 JS 调用栈

More tools

Layers

查看对查看元素尺寸，位置变化（动画效果）非常有用。

Remote devices / chrome://inspect/#devices

  • 通过 USB 调试移动设备打开的页面
  • 通过 IP:port 调试 node --inspect-brk==host:port xxx

Coverage

标记已使用和未使用的 JS、CSS，并统计他们的占比。可以用于找出关键代码，优化首屏加载速度。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .class1 {
        color: aqua;
      }
      /* .class2 在点击 test 按钮前标记为未使用 */
      .class2 {
        color: lightgreen;
      }
    </style>
  </head>

  <body>
    <button id="dom1">
      test
    </button>
    <script>
      function foo() {
        dom1.classList.add("class1");
      }
      foo();
      /* bar 在点击 test 按钮前标记为未使用 */
      function bar() {
        dom1.classList.add("class2");
      }
      dom1.onclick = bar;
    </script>
  </body>
</html>

资料