Chrome-DevTools

• debug
  • 断点类型，最常用的是代码行，还有事件侦听器、异常等
• console
• network
• playground
• code editor
• 强制刷新

debug

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

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

常用功能：

• 跳过行（步进）
• 跳入函数
• 跳出函数
• 继续到此（右键）

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

console

• console 中打印出 fetch 内容

  let a = await fetch()
  await a.json()
  

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

• 在 console 中复制对象 （比如 echarts 开发）

  1. 在 vue 里

    mounted () {
      window.myObject = this.options
    }
  // copy(JSON.stringify(window.myObject))
  

  2. 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 - In

• 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逆向技巧分享 - 知乎

强制刷新

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