01前端/Chrome DevTools

Console

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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");

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>

资料