A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 梦无醉亦殇 初级黑马   /  2019-10-19 20:58  /  2395 人查看  /  10 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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


10 个回复

倒序浏览
当你停下脚步的时候,别忘了别人还在奔跑。
回复 使用道具 举报

世界的温柔 是及时的善意和干净的你
回复 使用道具 举报
我与春风皆过客,你携秋水揽星河
回复 使用道具 举报
余生就那么长,还请衷于自己。
回复 使用道具 举报

海已静,山未青,月落于平行时空。长欢已远,迟眠五更,念心事灯火通明。相遇错失,欢悲照旧,我都承蒙。
回复 使用道具 举报
读书当一意在书,游山水当一意在水,承兴所至,心无旁及。
回复 使用道具 举报
学问,是一张渔网,一个结一个,结出了捕鱼的工具。
回复 使用道具 举报
如果只是向往,远方依旧是远方。
回复 使用道具 举报
为了照亮夜空,星星才站在天空的高处。
回复 使用道具 举报
生活就像一面镜子,你若对她笑,她就对你笑。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马