chrome浏览器设置网页（Chrome浏览器调试技巧）

1、谷歌浏览器调试界面友好，性能强大，下面简单介绍开发者工具的几个超级使用的调试技巧。

2、Ctrl P快速搜寻文件

当DevTools被打开的时候，按Ctrl P,就能快速搜寻和打开你项目的文件。

3、Ctrl Shift F搜索一个特定的字符串

如果你希望在源代码中搜索要怎么办呢？在页面已经加载的文件中搜寻一个特定的字符串，快捷键是Ctrl Shift F，这种搜寻方式还支持正则表达式哦

4、Console控制台

想必大家都在用 console.log 在控制台输出点东西，其实console还有其它的方法：

console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定义错误信息 console.info("我是个信息");//在控制台打印自定义信息 console.warn("我是个警告");//在控制台打印自定义警告信息 console.debug("我是个调试");//在控制台打印自定义调试信息 cosole.clear();//清空控制台（这个下方截图中没有）

5、Sources资源

我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，针对压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式

文件原压缩的代码:

转换成可读格式的代码:

6、Sinppets创建一个新的片段文件比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码.

所以推荐使用Sources下面的左侧的Sinppets代码片段按钮这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息

新建了一个名叫：app.js的片段代码，在你的项目环境页面内，该片段可执行项目内的方法

7、Call Stack调用栈

当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出，我们最先走了toggleTab这个方法，然后走到了一个更新对象的方法上，当前调用在哪里，箭头会帮你指向哪里，同时我们可以点击，调用栈列表上的任意一处，即可回头再去看看代码

但是若你想从新从某个调用方法出执行，可以右键Restart Frame(我测试时未发现该功能)， 断点就会跳到此处开头重新执行，Scope 中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看

8、显示和修改变量值

在Console中直接输入变量，或是在Source中选择变量，然后点击右键，在右键菜单中选择" evaluate selected text in console "，就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值，就可以修改变量的值了，相当于我们无需借助编辑器就可以调试线上的数据