chrome devtools使用进阶——Sources

本文会忽略一些过于基础的知识和细节 持续更新，欢迎关注~

本篇文章介绍Sources面板的使用，截图以下：

左侧面板

---

1. Page 已加载的所有资源，以域名划分文件夹。

2. Snippets 代码片断，不会由于刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)

   

注：如下了解便可

• Filesystem & Overrides 能够加载本地文件夹
• Content scripts 扩展工具的脚本，好比百度翻译插件等

js调试

---

你们都会用的就略了...

右键行号，能够看到其余调试菜单

1. Add conditional breakpoint 条件断点：选择后让你输入一个表达式，这个表达式返回值决定这行代码会不会被暂停

   

2. Blackbox Script 黑盒脚本：跟代码时不会走的代码的内部，好比第三方框架。通常来讲，正确的使用f10 f11 f12不须要使用这个

右侧面板

---

1. Watch 变量监察：添加个变量后会一直监察这个变量的值，当前做用域无值时显示< not availble >

2. Call Stack 函数调用栈：略

3. Scope 做用域：显示断点所在的做用域，级别划分以下：

• Local 当前做用域 展开时做用域下的变量
• Closure (x) 闭包做用域，x是函数名称
• Script 标签做用域
• Global 全局做用域Window

  

4. Breakpoints 断点：略

5. XHR/fetch Breakpoints 请求断点：ajax和fetch请求均可以在这里打断点并在Call Stack显示调用栈，很方便追踪

   

   

6. DOM Breakpoints 这里列出的就是上篇中html的断点

7. Global Listeners 全局监听器：指的是绑定在 window 对象上的事件

8. Event Listeners Breakpoints 全部事件的断点：勾选指定类型，好比Mouse/click，则全部的click事件都会被断住

参考连接

CompileYouth