Chrome-DevTools
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 开发)
- 在 vue 里
mounted () { window.myObject = this.options } // copy(JSON.stringify(window.myObject))
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 上个位置
强制刷新
- 浏览器发请求设置 no-cache
- 清除本地缓存,再请求