Chrome浏览器调试技巧（chrome调试技巧）

1、谷歌浏览器调试界面友好，性能强大，

chrome调试技巧

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中输入变量名=变量值，就可以修改变量的值了，相当于我们无需借助编辑器就可以调试线上的数据

上面就是小居数码小编今天给大家介绍的关于（chrome调试技巧）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 浏览器篡改怎样恢复教程（浏览器主页面被篡改）
• 关于pc版微信使用技巧（如何删除pc版微信聊天记录）
• excel筛选高级技巧（excel筛选功能）
• 微信加好友出现操作频繁解决技巧（微信加好友操作频繁怎么办）

（282）个朋友认为回复得到帮助。