入门

在线帮助

在线参考 https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn

Elements

左侧源码显示区，右侧样式（Styles），可以实时调试，调试后，将结果复制到源码的html或css中，永久生效。

Console

调用、调试js函数测试

Sources

Network

资源请求的网络传递信息

curl 格式


xxxxxxxxxx
15
1
curl 'https://common.cnblogs.com/images/festival/spring-festival-logo-2021.png' \
2
  -H 'Connection: keep-alive' \
3
  -H 'Pragma: no-cache' \
4
  -H 'Cache-Control: no-cache' \
5
  -H 'sec-ch-ua: "Chromium";v="85", "\\Not;A\"Brand";v="99"' \
6
  -H 'sec-ch-ua-mobile: ?0' \
7
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4169.0 Safari/537.36' \
8
  -H 'Accept: image/webp,image/apng,image/*,*/*;q=0.8' \
9
  -H 'Sec-Fetch-Site: same-site' \
10
  -H 'Sec-Fetch-Mode: no-cors' \
11
  -H 'Sec-Fetch-Dest: image' \
12
  -H 'Referer: https://www.cnblogs.com/' \
13
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
14
  -H 'Cookie: pgv_pvi=1996131328; Hm_lvt_39b794a97f47c65b6b2e4e1741dcba38=1601129038; _ga=GA1.2.1055537914.1601129038; _gid=GA1.2.870731121.1613371159; _gat=1; __gads=ID=389270987606a8fd:T=1601129038:R:S=ALNI_Macwc9DKQ3AB2cTBW9j095ZbaVckg' \
15
  --compressed

Applications

Security

快速格式化

在 Sources 面板中查看脚本时，请点击 Pretty-Print 图标，将缩减的脚本转换成更便于人阅读的形式。

https://developers.google.com/web/tools/chrome-devtools/javascript/pretty-print?hl=zh-cn

javascript调试

断点endpoint

1. Call Stack 调用栈

未完待续（20220122）。

微软产品研发团队加入chromium开发阵营后，基于自身与自有用户的原因考虑引入了大量的浏览器新特性，以用于其市场扩张，使得chromium的更新迭代速度加速，鞭策了chrome的研发团队，不再挤牙膏。
console debug 实现实时DOM操作。
network 分析请求流。