chrome除了使用F10和F11，还有什么可以使用到？（一）

[XYooo]

chrome除了F10，F11还是有很多其他有用的功能，下面是一些功能介绍！！很有用
本篇文章主要的是：snippets和javascript断点

（一）chrome使用技巧之snippets
首先讲的是snippets，snippets是可以跟console媲美。主要是针对js代码，方便调试。使用场景如下：①例如平时看到某些很高大上的代码，想亲手实践下正确性，②或是想调试下，

直接在浏览器的控制台里进行码代码，enter后就可以看到结果了还可以对代码进行调试

这里就要请出我们的snippets了。snippets在哪？请看下面截图：

调试过程：在空白区域右键选择new可以新建文件，右键刚才新建的文件选择run可以运行写的测试代码

（二）copy 格式化拷贝
在项目开发中，我们可能需要将后台数据拷贝到本地，作为本地数据进行调试。即使后台返回没有格式化的JSON数据也不需要在本地调试中手动修改数据，

说到JSON的格式化，有下面两种方式：
（1）JSON.stringify的格式化功能，例如四个空格的缩进
JSON.stringify({name: 'lxjwlt'}, null, 4);
（2）可以使用chrome控制台的copy接口解决这一问题：

①请求项的右键菜单中选择Copy Response拷贝响应内容
②命令行中使用copy接口处理数据
③得到格式化的JSON数据

（三）断点设置和调试技巧
本文主要介绍其中的 JavaScript 断点设置和调试功能，也就是其中的 Sources Panel（以前叫 Scripts）

（1）Sources Panel 的左边是内容源，包括页面中的各种资源。其中，又分 Sources 和 Content scripts。
Sources 就是页面本身包含的各种资源，它是按照页面中出现的域来组织的，这是我们要关注的。（很重要）
Content scripts 是 Chrome 的一种扩展程序。编写、调试这类扩展的开发者才要关心它们，如果你的浏览器没安装任何扩展，那么 Content scripts 就看不到任何东西。（暂时没用过）

（2）Sources Panel 的右边是调试功能区，最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。

（3）在源代码上设置断点
Breakpoints 列表，添加的每个断点都会出现在这里，点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话，利用 Breakpoints 列表中的断点快速定位非常方便。（ps以前并没有在意这里）
对于每个已添加的断点都有两种状态：激活和禁用。在 Breakpoints 列表中每个断点前面都有一个复选框，取消选中就将禁用该断点或者断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面

Chrome 断点设置 - - 临时禁用所有已添加的断点，再点一下恢复原状态。

（4）条件断点
有条件的断点仅在满足您指定的条件时触发。

右键单击一个还没有断点的行号，并按 Add conditional breakpoint 可创建一个有条件的断点。 如果您已在行代码中添加了一个断点，并想为该断点设置条件，则右键点击并按 Edit breakpoint。

（5）调用栈（Call Stack）
在断点停下来时，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，比如有一个函数 g() 其中又调用了函数 f() ，而我在 f() 中设置了一个断点，那么我在 console 中执行函数 g() 的时候会触发断点，其调用栈显示如下：

最上面是 f()，然后是 g()。调用栈中的每一层叫做一个 frame，点击每个 frame 可以跳到该 frame 的调用点上。

PS此外，还可以在 frame 上用右键菜单重新开始执行当前 frame，也就是从该 frame 的开始处执行。比如在函数 f() 的 frame 上 Restart Frame， 断点就会跳到 f() 的开头重新执行，context 中的变量值也会还原。这样结合变量修改和编辑代码等功能，就可以在当前 frame 中反复进行调试，而不用刷新页面重新触发断点了。（很重要的，可以重新执行断点）

（5）变量 Scope列表
Call Stack 列表的下方，在这里可以查看此时局部变量和全局变量的值。

在断点调试时，可以用鼠标选择想要查看的变量或表达式，然后右键菜单执行“Evaluate in Console”，就可以看到该表达式的当前的值了。

（6）临时修改 JavaScript 代码
通常我们在调试代码时习惯：修改代码→刷新页面→重新检查，这么一个循环。但其实 Chrome 中可以临时修改 JS 文件中的内容，保存（Ctrl+S）就可以立即生效，结合 Console 等功能就可以立即重新调试了。但注意这个修改是临时的，刷新页面修改就没了。

chrome还有其他的很多用处，比如XHR断点以及DOM断点等，以及使用chrome优化web应用。会在chrome除了使用F10和F11，还有什么可以使用到？（二）中介绍