黑马程序员技术交流社区
标题: 谷歌浏览器Chrome的调试心得 [打印本页]
作者: 梦无醉亦殇 时间: 2019-10-19 20:58
标题: 谷歌浏览器Chrome的调试心得
开发页面的时候我们不可避免都会遇到bug，有的bug在vscode中有报错，很好解决 ；但有些bug特别难找，因为并没有报错，可能只是写错单词，代码放错位置，少写了几个参数等等。对于这些bug，实在让人头都大了，短的找半个钟，长的找个一天都未必解决，因此掌握代码调试的技巧是非常非常非常重要的！！！
大家都知道现在很多浏览器都支持js调试功能。可以断点，单步运行，还可以查看js中变量和函数中的值。找到js出问题的地方。而Google浏览器Chrome就是一款功能非常强大的软件，它的调试功能也是非常强大的，熟练运用Chrome的调试功能可以快速找到bug，节约大量时间，提高做项目的速度。Chrome的调试功能也是特别好用，废话不多说，我们开始学习。
1. 通过打印变量的值（最简单基本的调试），可以在js代码中使用alert()和console.log()这两个函数打印变量的值，看看变量的值是否正常。调试步骤：
2. 断点调试（非常经典），断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值和代码执行的顺序，出错的话，调试到出错的代码行即显示错误，停下 。
调试步骤：
1.浏览器中按F12进入开发者控制台
2.选择sources找到要调试的文件
3.可以选择某一句话前面打上断点
3. Watch调试
进入debug模式，然后选中变量，再右键watch 接下来断点调试就可以了
注意 一定要设置合理的断点，程序运行时才会停下来，然后才会出现watch
调试过程中发现需要attach source 时 有可能是程序已经运行完成了
作者: 25个蛋 时间: 2019-10-26 16:42
当你停下脚步的时候，别忘了别人还在奔跑。
作者: 小黑梅 时间: 2019-10-31 18:44
世界的温柔 是及时的善意和干净的你
作者: 1079591475 时间: 2019-11-1 13:14
我与春风皆过客，你携秋水揽星河
作者: chengjiayu 时间: 2019-11-1 14:07
余生就那么长，还请衷于自己。
作者: 黑马润 时间: 2019-11-1 19:15
海已静，山未青，月落于平行时空。长欢已远，迟眠五更，念心事灯火通明。相遇错失，欢悲照旧，我都承蒙。
作者: 流浪的猫~ 时间: 2019-11-2 16:33
读书当一意在书，游山水当一意在水，承兴所至，心无旁及。
作者: 情非得已。 时间: 2019-11-2 17:15
学问，是一张渔网，一个结一个，结出了捕鱼的工具。
作者: 简单77777 时间: 2019-11-2 17:53
如果只是向往，远方依旧是远方。
作者: 雨下的芭蕉 时间: 2019-11-4 10:40
为了照亮夜空，星星才站在天空的高处。
作者: 陈么么 时间: 2019-11-7 09:42
生活就像一面镜子，你若对她笑，她就对你笑。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |