开发页面的时候我们不可避免都会遇到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 时 有可能是程序已经运行完成了
|