Chrome - JavaScript调试技巧总结（浏览器调试JS）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Chrome - JavaScript调试技巧总结（浏览器调试JS），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4342字，纯文字阅读大概需要7分钟。
内容图文
Chrome?是?Google?出品的一款非常优秀的浏览器，其内置了开发者工具（Windows?系统中按下?F12?即可开启），可以让我们方便地对?JavaScript?代码进行调试。
为方便大家学习和使用，本文我对?Chrome?的调试技巧做个系统的总结。
?
一、设置断点
有两种方法可以给代码添加断点
方法1：在 Source 内容区设置
（1）找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。 （2）刷新浏览器，当页面代码运行到断点处便会暂停执行。
方法2：在 js 文件中设置
（1）我们在?js?源文件中需要执行断点操作的代码前加上?debugger。 （2）刷新浏览器，当页面代码运行到断点处会暂停执行 ?
?
二、设置断点执行条件
? （1）右键点击设置的断点，选择?Edit breakpoint... （2）输入执行断点的条件表达式，当表达式为?true?时断点调试才会生效。有了条件断点，我们在调试代码的时候能够更加精确地控制代码断点的时机
?
三、Call Stack 调用栈
1，界面介绍
（1）当断点执行到某一程序块处停下来后，右侧调试区的?Call Stack?会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。 （2）Call Stack?列表的下方是?Scope Variables?列表，可以查看此时局部变量和全局变量的值。 ?
2，使用技巧
（1）调试时当前调用在哪里，Call Stack?列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处，便会调到相应的位置，方便我们再回头去看看代码。 （2）如果想重新从某个调用方法处执行，可以右键选择?Restart Frame。断点就会跳到此处开头重新执行，同时?Scope?中的变量值也会依据代码重新更改，这样就可以方便地回退来重新调试，省得我们再重新刷新整个页面。 ?
四、DOM 元素设置断点
1，DOM Breakpoints 介绍
除了可以给?js?代码设置断点，我们还可以给?DOM?元素设置断点。因为我们有时候需要监听和查看某个元素的变化、赋值情况，但是并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件。2，使用说明
（1）我们右键点击需要监听的?DOM?节点，选择“Break On...”菜单项，在出现的三个选择项中任选一个便会添加断点。
（2）这三个选择项分别对应如下三种修改情况：
- suntree modifications：子节点修改
- attribute modifications：自身属性修改
- node removal：自身节点被删除
（3）设置好断点后，当 DOM 元素要被修改时，代码就会在自动停留在修改处。
五、统一管理所有断点
我们可能会在不同的文件、不同的位置添加许多断点。这些都会显示在?Source?页面里的?Breakpoints、DOM Breakpoints?区域中：- Breakpoints：js 断点
- DOM Breakpoints：DOM 元素断点
六、快捷键
1，快速定位文件
使用快捷键：ctrl + p
2，快速定位文件中成员函数
使用快捷键：ctrl + shif + o
七、格式化
1，js代码格式化
为了减小体积，有时候我们发现一些?js?源码都是压缩之后的代码，我们可以点击下面的?{}?大括号按钮将代码转成可读格式。
2，格式化返回的 JSON 数据
（1）有时我们调试程序时需要查看服务端返回的数据内容，这个在?Network?选项卡中就可看到。但如果后台返回的是没有格式化的?JSON?数据，查看起来会异常痛苦
?
（2）我们可以通过?chrome?控制台的?copy?接口来实现?JSON?数据的格式化。
（3）首先请求项的右键菜单中选择?Copy Response?拷贝响应内容。
（4）命令行中先输入 copy()，然后将拷贝的数据粘贴到括号中
（5）回车后 copy 接口便会自动将数据进行格式化，并保存到剪贴板中。我们将其粘贴到文本编辑器中就可以看到效果：
八、使用 Snippets 编写代码片段
1，Snippets 介绍
（1）在?Souces?页面下的?Snippets?栏目中，我们可以随时进行?JS?代码的编写，运行结果会打印到控制台。 （2）代码是全局保存的，我们在任何页面，包括新建标签页，都可以查看或运行这些代码。我们不再需要为了运行一小段?JS?代码而新建一个?HTML?页面。 （3）Snippets?的方便之处在于，我们只需要打开?Chrome?就可以编写一份任意页面都可以运行的JS代码2，使用样例
（1）点击“New Snippet”按钮，创建一个新的片段文件
（2）在代码区域输入 js 代码
（3）按下“Ctrl + Enter”或者点击右下方的按钮执行代码，可以看到代码执行成功且反应到当前页面上了。
九、Async 调试
Chrome 调试器的 Async 模式是为调试异步函数所设计一个功能
1，测试代码
下面是一段使用?Promise?的代码：//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭完毕！');
resolve('鸡蛋炒饭');
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log('开始吃饭：' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('用过的碗和筷子');
}, 2000);
});
return p;
}
cook()
.then(eat)
.then(function(data){
console.log(data);
});
2，代码调试
（1）我们都知道?Promise?的回调是异步执行的，默认情况下调用栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难。
（2）开启 Async 模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。
内容总结
以上是互联网集市为您收集整理的Chrome - JavaScript调试技巧总结（浏览器调试JS）全部内容，希望文章能够帮你解决Chrome - JavaScript调试技巧总结（浏览器调试JS）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。