掌握Chrome的开发技巧 提高你的开发效率

伴随着快速的功能更新以及繁重又精细的开发任务，Chrome成了前端开发中必须掌握的工具，掌握好这些开发技巧，将提高你的开发效率。

一.单步跳转 

在我们平时开发中遇到bug调试的时候 可能大部分新手都会用alert() 入门一些的用console.log()（反正我就是从这个阶段走过来的）。

如果是一些小型的开发以上两个调试还可以，但是现在前端越来越庞大，越来越多的逻辑处理都放在了前端。如果还是用以上的方法进行Bug调试 将会很影响开发效率 。接触过java的人可能知道强大的集成开发工具Eclipse它里面就提供了断点调试，下面我们要说的是js的断点调试，谷歌浏览器，F12打开控制台Source 为用于查看和调试当前页面所加载的脚本的源文件。

在特定代码中设置断点， 在行号边线中点击可在该行代码上添加一个断点后刷新，如下图

如果这个递归函数这段代码报错 我们就可以用这个断点一步一步的来测试 代码运行的哪个地方的时候 出了错误 那如何一步步的测试呢 别急 请看下图:

图中按钮是单步跳转。按照写的逻辑一步一步的执行，每一步传的参数都有显示出来，代入的变量。如果我们不想遇到类似这种循环 不想一步步在里面循环，跳过循环，那就是需要下面的功能

二.断点跳转 

如下按钮继续执行直到下一个断点。如果没有遇到断点，则继续正常执行。跳过循环，直接跳转到下一个断点，直接从32行设置的断点跳转到38行设置的断点。

三.Pretty print

现在构建工具都带有压缩代码的功能，对于处理压缩过的js文件，如图:

对于这种如何调试，谷歌给我们提供了pretty print，格式化代码：

格式化之后：

，这样看起来是不是就爽多了。

四.devtools中的serch

如果我們想在源碼中找到指定的字符串按下Ctrl + Shift + F，即可在所有已加载的文件中查找一个特定的字符串。

也可以用正則表達式來查找，例如一個簡單的數字查找

五.颜色选择器

你可以点击颜色预览，颜色选择器就会弹出。当颜色选择器开启时，如果你停留在某一页面，你的鼠标指针就会转换成一个放大镜，选择像素精度的颜色。如图：

六.Workspaces

Workspaces是Chrome DevTools的一个强大的的功能，这个功能使得Chrome成为一个真正的编译器。Workspaces使Sources标签下的文件和你本地的工程文件相匹配。所以现在你可以直接编辑和保存，而不用复制粘贴到外部的文本编辑器里。 配置Workspaces，你只需要去Sources标签下，在左边的控制面板的任何地方点击右键，并且选择Add Folder To Worskpace, 或者只是把你的整个工程文件夹拖放到DevTools。现在，无论你打开哪一页，被选择的文件夹的子目录和它包含的所有文件都将能被编辑。 为了使它更加的有用，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。如图：

有木有很强大 这是要成为IDE的节奏。有着很多很强大功能 需要我们慢慢钻研学习，服务于开发...