前言
编写完js的相关代码后运行不出结果,但又不是一些很明显很典型的错误,有可能只是其中一句代码写错了,也有可能只是单词拼写错误,总之是一些很细节性的错误。
问题分析及解决方案
遇到这种情况后我们要有自主调试js代码的能力,这个很重要,这比我们记住一些典型的错误更加重要,接下来我们来说一些调式js代码的方法(以google chrome浏览器为例)
- 1:按F12打开浏览器开发者模式
- 2:首先看控制台是否有报错,如下
控制台红色的为错误信息,如果有要先解决这些错误,如果控制台的信息是黄色的,一般都是警告信息,可以不用太关注 - 3:如果控制台没有明显的错误,此时光靠查看控制台已经无法准确判断问题所在,这时要学会debug自己的js代码,
首先找到sources这一选项,然后找到相对应的js代码,接着在有代码行数标记的对方打上断点(点击该位置即可打上断点,再次点击该断点可取消该断点),在代码运行的过程中会停在该断点处,可以查看代码的运行过程,运行过程中相关变量的值,也可以看到每句代码的执行结果,如果哪句代码执行后不是自己期望的效果,基本可以判定是该句代码出现了问题.
总结
前端的debug和后端debug一样都是需要经常使用才能掌握其真正的技巧,也是我们日常开发过程中,找到代码问题所在的一大利器,一定要出现问题先自己debug后再寻求帮助,这样以后排查问题就会越来越顺手!!!