Chrome-DevTools

debug

  • 选项:恢复脚本执行,跳过下一个函数调用,进入函数,跳出当前函数
  • 按键,用组合键更好按
  • 对断点行,watch 监视表达式,console 打印求值
  • scope 值可编辑,不用离开 DevTools 就能看修正效果
  • 监视表达式,观察值的变化
  • 保存看效果

断点类型,最常用的是代码行,还有事件侦听器、异常等

常用功能:

  • 跳过行(步进)
  • 跳入函数
  • 跳出函数
  • 继续到此(右键) image.png

Debugging in the browseropen in new windowJavaScript debugging reference - Chrome Developersopen in new windowChrome设置断点的各种姿势, js断点调试心得, Chrome DevTools 中调试 JavaScript 入门 - Just Codeopen in new window使用断点暂停代码  |  Tools for Web Developers  |  Google Developersopen in new window

console

  • console 中打印出 fetch 内容
    let a = await fetch()
    await a.json()
    

Chrome 开发者工具中文文档-在线手册-html 中文网open in new window

  • 在 console 中复制对象 (比如 echarts 开发)

    1. 在 vue 里
      mounted () {
        window.myObject = this.options
      }
    // copy(JSON.stringify(window.myObject))
    
    1. copy(JSON.stringify(myObject)) 缺点是函数会被丢掉
  • 可以通过在函数中插入 console.count('执行次数') 来观察重复执行的情况

network

  • 在开启开发工具下,长按刷新按钮出现菜单,Empty Cache And Hard Reload 强制全部请求走网络,模拟新客访问

  • 点击截图,查看当时请求状态

  • cmd + 点击,同时查看多种资源

  • 过滤 -method:OPTIONS

  • 隐藏来自扩展请求 -scheme:chrome-extension

  • XAR 导出 录制、然后网络上右键

    How to generate a HAR file in Chrome or Firefox - KB254 - Inopen in new window

  • Replay XHR 重放请求,不必刷新页面

playground

可以巧用 snippets 作 playground,快速调试代码

放在 IIFE 里,使代码可反复运行

(async function (){

})()
copy
open(url)
await fetch(url)
(await fetch(url).status

vue render 错误,不好定位,可以定位查看编译后的代码

code editor

Control+M 跳转到匹配括号
Command+D 选中光标所在
Command+U 上个位置

js逆向技巧分享 - 知乎open in new window

强制刷新

  1. 浏览器发请求设置 no-cache
  2. 清除本地缓存,再请求

程序执行

image.png

有名函数

Function Call 宏任务 Microtasks 微任务 image.png

MutationObserver 也是微任务

image.png

rAF 是宏任务

image.png

面试必问的异步顺序问题,用 Performance 轻松理清 - 知乎open in new window

perf

image.png

image.png

image.png

当访问元素的offsetTop属性时,浏览器会进行重排操作。因为offsetTop属性表示元素相对于其offsetParent元素的上边距的像素值,所以在获取offsetTop值之前,浏览器需要确定元素的位置和大小,从而触发重排操作。因此,多次访问m.offsetTop会导致多次重排操作,影响性能。

当 JavaScript 运行时,前一帧中的所有旧布局值都是已知的,可供您查询。因此在帧的开头纯粹的查询没有问题,如果有其它样式修改、再查询,浏览器必须重排布局,以回答最新值。

Now, in order to answer the height question, the browser must first apply the style change (because of adding the super-big class), and then run layout. Only then will it be able to return the correct height. This is unnecessary and potentially expensive work.

Analyze runtime performance - Chrome Developersopen in new window

main 中竖向,是调用栈

元素越多,CPU 调低,问题越明显

激活态元素定位

setTimeout(() => { debugger }, 3000)

执行后,点击触发元素。断点会停住

Last Updated:
Contributors: gongyi01