chrome dev tools 各场景使用技巧

[JOE]

仅通过浏览器dev tools即可解决的问题 场景list:

code:

1. 在浏览器上实时修改代码并更新在相应的本地文件， 修改本地文件即反应在浏览器上。
2. 支持预处理器的实时引用, SourceMap

debug:

1. 捕获各种情况时的断点
   1.1 刷新页面时运行时的断点(debugger; 断前面的; blackBox)

   1.2 条件断点
   1.3 根据行号来设置断点
   1.4 根据dom的变更来设置断点 （如查看弹层样式，鼠标离开时弹层就消失的场景， 或dom变更时的js逻辑）
   1.5 根据事件来捕获断点
   1.6 根据XHR来捕获断点
   1.7 异常断点 Pause on exceptions

2. 查看调用堆栈并过滤无关堆栈 Blackbox

3. google remote debugger

device 设备：

performance性能：
捕获某个ajax的请求并检查从请求到渲染到页面的各时间差
1 ajax的时间组成 （TTFB + download + render）

code 1
(如果你是使用Canary或者Chromiumde，Workspace已经不再是实验选项)
1.在 chrome://flags/#enable-devtools-experiments 中启用 Developer Tools Experiments (开发者工具实验)
2.在 Developer tools 设置 Experiments 选项下开启File system folders in Sources Panel，再重启Developer tools，就会多出Workspace选项(没有见到需要按6次shift开启隐藏选项)。
需要满足的条件或不足之处：
1 remote url不能动态匹配, 不支持bustArg
2 文件内容需要可以匹配上
3 可以修改到本地，但刷新后不能生效
然后在ide 或 dev tools 里面的修改会自动在当前页面生效。