浏览器调试教程-chrome

1 格式化代码

    在调试过程中，有时css、js代码是经过压缩的（代码都在一行）。阅读压缩过的代码非常不方便，通过格式化代码（单击下图的“{}”图标）能让代码变得好看些，如下图：

2 实时代码编辑

    Source 面板下的代码是可以直接编辑的，Ctrl+S（或者Cmd+S）保存后便立即生效，不用刷新页面，而且配合映射到本地磁盘代码的功能可以实现一边修改一边保存到本地源文件。

1.右键单击任意源文件或文件夹--》单击“Add folder to workspace”；



2.选择与之对应的本地文件或文件夹，--》单击“允许”；

3.右击文件--》选择“Map to file system resource...”。

    


4.在弹窗框中选择对应的文件。PS：如果文件名是中文字，在这里找不到对应的文件，无法实现实时代码编辑。

Ctrl+O可以打开快速搜寻文件对话框（模糊匹配）。

 3 source map

    对于CoffeeScript和Sass等预编译语音，可以使用source map技术将编译后代码映射到编译前的代码进行调试，由于没有用过CoffeeScript和Sass，在这就多说了，知道有这回事就行。

4 条件断点

    在代码行数右键可以添加条件断点，



    条件断点允许输入一个表达式，当该表达式在此处计算为true时断点会生效，否则不生效。

5 F10等调试快键

F10：下步，对应第二个图标；
F11：进入函数，对应第三个图标；
Shfit+F11:跳出函数，对应第四个图标。