在 Chrome里按 F12 打开 DevTools

可以看到很多选项 Chrome DevTools学习 - 图1

常用基础

目前想到比较基础的就是 Element 和 console

Element

这个是前端最常用的内容了，没啥太多能说的。在某个标签上单机右键可以出现下图的内容：

image.png

  • 注意这里的 copy - copy js path ，在写爬虫、做UI测试的时候很方便
  • 还有 capture node screenshot 截图
  • store as global variable 把当前节点选中存储为变量，写爬虫时候特别方便
  • 右侧还有 computed 查看生效的样式细节

Console

比较常规的查看console信息，常见的 筛选filter

常规的不说，说几个搞爬虫学到的。

  • 你选中一个元素，就可以使用 $0 来获得。
  • 原生提供了 $() === document.querySelector()
  • 原生提供了$$() === document.querySelectorAll()

  • copy() 可以把内容复制到粘贴板

    开发调试

    Network

    image.png

  • 我认为值得说的也就是 这个 filter 方便过滤。

  • 对一个具体的链接可以通过 右键 replay XHR 重新发送
  • 选一个连接，可以查看链接总过程。

image.png

  • Resource Scheduing
    • Queuing 排队，当前请求是否被推迟
      • 可能存在更高优先级的请求，当前的请求被推迟，比如image权重低，css js权重高
      • 触发了最大tcp连接
      • 也可能浏览器正在分配磁盘缓存空间，通常非常快
  • Connection Start 开始连接
    • Stalled 停滞等待，
    • DNS Lookup DNS查找
    • 可能的 Proxy Negotiation 和代理浏览器协商请求
    • Initial connection 初始连接，包括握手和协商ssl
    • SSL SSL握手
  • Request/Response
    • Request sent
    • Waiting TTFB 等待初始响应所花费的时间，也就是 Time to First Byte 。也就是一个指标
    • Content Download 内容下载

此外，可能还有 sw等细微指标。

Source

打断点如何跳过 第三方库，比如 vue 比如jQuery

  • devtools settings
  • 选择 blackboxing 黑盒
  • 选择 Add pattern 添加
  • 选择文件名等

也可以在堆栈信息上 bloackbox script

还有 LocalChange 现场调试代码

Performance

见 相关的文章。