Chrome Devtools — Sources

1、使用谷歌控制台Sources面板能够：

• 查看文件
• 编辑 Css 和 JavaScript。
• 建立和保存 JavaScript 的代码段，您能够在任何页面上运行此代码段。 代码段与小书签类似。
• 调试 JavaScript。
• 设置工做区，以将您在 DevTools 中做出的更改保存到文件系统的代码中。

2、熟悉 Sources 面板

​

3、左侧面板

【3.1】page 已加载的所有资源，以域名划分文件夹。

【3.2】Content Scripts 浏览器扩展工具的脚本，好比我安装了 Axure 原型扩展插件

​

【3.3】Snippets 代码片断，能够在这里添加一小段程序，这个一小段程序能够访问这个页面中的变量和函数等。不会由于刷新丢失，使用：添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove)

​

【3.4】Filesystem&Overrides 能够加载本地文件夹

4、中间面板

【4.1】添加断点

断点： 代码行号所在的位置叫作行号槽，点击行号槽，为相应的行添加断点，并在相应的行号上面加上一个相似肩章的五边形图标。特别提一下的是，这个图标的颜色是蓝色的

​

条件断点： 右键一个没有添加断点的行号，选择 "Add conditional breakpoint"，输入你的条件，当条件知足时，断点才会生效。回车后，效果以下

​

行内断点： 我先在15行处添加了一个断点，当程序中断在 15 行时，出现了下图的例子。但与通常的例子不一样的是，上面有 3 处标红的位置，表示 3 处断点。但第 1 个断点跟后 2 个不同的是，第 1 个断点是默认处于激活状态，然后 2 个则不是，只有点击激活后才能生效

​

【4.2】右键行号

• Add breakpoint 添加断点
• Add conditional breakpoint 添加条件断点
• Never pause here 永不停顿
• Blackbox script (黑盒脚本) 咱们写项目时，不少时候是要引用第三方库或框架的，当咱们调试时，调试的对象应该是咱们本身写的代码，但不少时候，咱们常常在焦灼地进行下一步下一步时，忽然代码跳到了第三方库或框架的源码上去，这让咱们焦灼的心里更添了一把柴火。黑盒脚本就是用来解决这个问题的。它可以将一个脚本文件标记为 "Blackbox Script"，那么咱们就永远不可能进入这个文件内部，这个文件对咱们来说就是一个黑盒子。为何要强调“永远”呢？由于不只普通的断点不能访问这个被标记了的脚本，其余的，好比说 DOM 断点、事件断点等等都没法访问那个脚本文件内部。

【4.3】右键已断点行号

• Remove breakpoint 删除断点
• Edit breakpoint 修改断点
• Disable breakpoint 忽略断点
• Blackbox script (黑盒脚本)

【4.4】打开文件 以用 Cmd + p / Ctrl + p 在任何一个功能面板上搜索一个文件

5、右侧面板

【5.1】按钮组介绍

​

继续执行代码，直到遇到另外一个断点。

​

按正常步骤，应该会一行一行的执行相关代码，以便深刻探索哪些代码影响着正在更新的变量。若是你的代码中调用了另外一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上。

​

当中断停留在一个函数调用处时，会进入被调用的函数而且调试器将将其执行到该函数定义中的第一行。

​

当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句

​

单步执行

​

在不取消断点标记的状况下，使得全部断点失效

​

在异常处产生断点

【5.2】面板介绍

• Watch (变量监听)：对加入监听列表的变量进行监听,在该面板的右侧有添加变量和刷新变量列表的按钮。以下图：

  在断点1，2，3时所监听到num的值分别是undefined，0，1。

​

• Call Stack (函数调用堆栈)：Call Stack 面板会显示代码的执行路径。好比在 fnA() 中调用了 fnB()，fnB() 中调用了 fnC()，那么中断若是在 fnC() 内部的话，那么 Call Stack 面板会依次显示 fnC、fnB、fnA

​

• Scope (做用域): Scope 面板显示了你当前断点所在函数全部属性的值。Scope 会显示三种类型的值： Local、Closure 和 Global。以下图，当前做用域里的对象是本地参数Local

​

• BreakPoints (断点列表)：展现断点列表，将每一个断点所在文件/行数/该行简略内容展现

​

• XHR Breakpoints (请求断点列表)：对达到知足过滤条件的请求进行断点拦截，点击该面板右侧加号按钮，会跳出"Break when URL contains"以填写过滤条件。以下图，咱们对请求URL包含字母a的内容进行断点

​

• DOM Breakpoints (DOM断点列表)：给DOM加断点，在达到规定条件时触发断点，截断javascript的执行而且定位到断点处。例如：在 Elements 面板，右键 body 元素—>Break on —>attribute modifications，在DOM Breakpoints面板中会显示DOM元素名

• Event Listener Breakpoints (可断点的事件监听列表)：打开这个列表，能够在监听事件而且在触发该事件时进入断点，调试器会停留在触发事件代码行。只须要展开事件列表，选择要监听的事件打上勾便可。

​

【5.3】右键Breakpoints里面某个断点

• Remove breakpoint：删除选中的断点
• Deactivate breakpoints：暂时忽略全部断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Activate all breakpoints可恢复全部断点)
• Disable all breakpoints： 暂时忽略全部断点 (暗淡断点标志和断点列表，右键列表某个断点选择 Enable all breakpoints可恢复全部断点)
• Remove all breakpoints：删除全部断点
• Remove other breakpoints：删除其余断点