前端代码调错技巧


前言

编写完js的相关代码后运行不出结果,但又不是一些很明显很典型的错误,有可能只是其中一句代码写错了,也有可能只是单词拼写错误,总之是一些很细节性的错误。


问题分析及解决方案

遇到这种情况后我们要有自主调试js代码的能力,这个很重要,这比我们记住一些典型的错误更加重要,接下来我们来说一些调式js代码的方法(以google chrome浏览器为例)

  • 1:按F12打开浏览器开发者模式
  • 2:首先看控制台是否有报错,如下
    在这里插入图片描述
    控制台红色的为错误信息,如果有要先解决这些错误,如果控制台的信息是黄色的,一般都是警告信息,可以不用太关注
  • 3:如果控制台没有明显的错误,此时光靠查看控制台已经无法准确判断问题所在,这时要学会debug自己的js代码,
    在这里插入图片描述
    首先找到sources这一选项,然后找到相对应的js代码,接着在有代码行数标记的对方打上断点(点击该位置即可打上断点,再次点击该断点可取消该断点),在代码运行的过程中会停在该断点处,可以查看代码的运行过程,运行过程中相关变量的值,也可以看到每句代码的执行结果,如果哪句代码执行后不是自己期望的效果,基本可以判定是该句代码出现了问题.

总结

前端的debug和后端debug一样都是需要经常使用才能掌握其真正的技巧,也是我们日常开发过程中,找到代码问题所在的一大利器,一定要出现问题先自己debug后再寻求帮助,这样以后排查问题就会越来越顺手!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值