`
zccst
  • 浏览: 3336542 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript调试技巧之:快速定位

阅读更多
作者:zccst

2014-11-20

再次思考一个调试的流程:

但实际上找到错误的方式和路径是并行的,一条路不同,换条路走,比如


a, 查看报错信息,然后用console.log()和console.dir()。


b. 设置断点调试。比如,在当前行或前后设置断点,逐行运行,查看数据是否符合预期。有时代码甚至没走你的逻辑。通过这种方式也能发现一些问题。


c. 全局搜索关键字。比如IE7小页面左下角一直出现取消二字(其他浏览器没有),直接寻找费力的情况下,可以试试搜索,并且重点看标签是否封闭,立马发现问题。


d. 最绝的是,注释掉出错代码前面的代码,直至找到错误。这一招真的很灵,今天又遇到了,在找jQuery给select添加option,立即又设置select的默认值时,就特别管用。



2014-11-13
讲想查看的那一行代码,复制到firebug里,查找到,然后设置断点。

还记得加班到很晚吗?



2014-9-3  解决问题的思路和步骤:
1,看报错行
2,console.log
一般情况下,这样就能解决问题了,至少能解决80%以上的问题。当然这些都是基础问题,对于一些稍难的问题,该怎么办呢?

3,设断点
(1)看堆栈变量赋值情况

(2)层层跟进


批注:设置断点调试一直是我的软肋,遇到问题死都想不到断点调试,已经很多次了,每次请教高手时,他们都说设个断点试试。




2014-6-11
掌握新的调试方法:设断点,看arguments的值。
结论1:如果是一个点击事件函数function(arg1, arg2){},那么该函数的arguments的第三个参数一定是event对象。也就是默认的event对象放在了arguments的最后一个,此乃一大发现。
结论2:设断点虽然很早就知道了,但实际中使用较少,所以还是不够熟练,不能充分利用设置断点来解决问题。
结论3:得好好学习一下控制台的使用


2011-10-12

1. 使用alert

2. 使用地址栏
使用地址栏,输入javascript: doSomething(),可以在Runtime时输出或者执行一些代码。输出东西时也使用alert,例如在地址栏输入:
javascript: alert(document.getElementsByTagName("a").length);

可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数,可以输入例如:javascript: deleteFirstChildNode();

3. 错误查看器
最快捷的错误查看器当属Firefox的错误控制台,快捷键ctrl+shift+j。在你觉得脚本执行不正常时,首先按一下这个快捷键,往往能立刻知道哪里出了问题,并且点一下就能到问题脚本所在的位置,非常方便,强烈推荐!

4. 用浏览器的扩展或插件查看错误
这个话题比较大,一时说不完,所以先说说用扩展或插件来查看错误。对我来讲,Firebug一般就够用了,比较常见,就不截图了。启用Firebug控制台后,如果页面上js脚本错误,就会立刻在右下角显示出来,点击可以查看错误。有一点需注意,我的Firebug有时会报这个带乱码的错误:

我一直不清楚这个为什么会乱码,但我知道这个是跨域的错误,比较常见。

其他浏览器的错误查看器,在这里我也简单总结一下:



Chrome:菜单 – 开发人员 – JavaScript控制台,下方可以看到类似于Firebug的console,在这里可以看到错误和警告信息。

Opera:菜单 – 工具 – 高级 – Error Console,功能比较强大,可以查看各类错误。

Safari:4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。

IE8:非常不好用,但是也有。开发人员工具 – Script标签 – 点击右边的console。在这个console里可以看到错误信息,但是不太友好。


5. console.log
在代码中使用console.log,也就是类似于alert,只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log,还有console.error,console.info等等。详见Firebug的console API。


6. Console
最后正式介绍一下Console,也就是控制台。Life is short, use console!以Firebug的console为例,把几个常用功能介绍总结一下:
    查看js对象
输入一个名字,例如window,window对象就会出现在结果中。这时可以点击这个window对象!点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了,方便吧!

    查看DOM对象
输入document.getElementById(“el_id”),这时el_id这个元素就会出现在结果中,点击可以看到它的详情,例如看看它当时的HTML代码。

    在Runtime执行脚本
输入任何的js代码,立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。

关于这个console,在输入js脚本时,别忘了按tab键进行代码自动补齐哦!代码补齐和提示功能,在Chrome、Safari和Opera里同样有效,IE8就惨点了。Chrome和Safari做的也非常好,大家可以试一下啊。

简而言之,掌握快速定位,可以迅速解决JavaScript开发中的琐碎问题,以上办法中,我的建议是,遇到问题先用错误查看器看一下,不行再使用Console,基本上就能很快定位问题原因了!
分享到:
评论

相关推荐

    嵌入式八股文面试题库资料知识宝典-深圳禾苗通信科技有限公司.zip

    嵌入式八股文面试题库资料知识宝典-深圳禾苗通信科技有限公司.zip

    Arduino UART实验例程【正点原子EPS32S3】

    Arduino UART实验例程,开发板:正点原子EPS32S3,本人主页有详细实验说明可供参考。

    电力弹簧技术在主动配电网规划与运行优化调度中的应用研究

    内容概要:本文详细探讨了电力弹簧技术在主动配电网规划及运行优化调度中的应用。首先介绍了电力弹簧技术作为智能电网调控手段的优势,如自适应性强、响应速度快、节能环保等。接着阐述了主动配电网规划的目标和策略,包括优化电网结构、提高能源利用效率和降低故障风险。随后讨论了运行优化调度的原则和方法,强调了实时监测、智能调度策略以及优化调度模型的重要性。最后通过实际案例分析展示了电力弹簧技术在提升电网稳定性、可靠性和能效方面的显著效果,展望了其广阔的应用前景。 适合人群:从事电力系统规划、运行管理的研究人员和技术人员,以及对智能电网感兴趣的学者和学生。 使用场景及目标:适用于希望深入了解电力弹簧技术及其在主动配电网规划和运行优化调度中具体应用的专业人士。目标是掌握电力弹簧技术的工作原理、优势及其在实际项目中的实施方法。 其他说明:本文不仅提供了理论分析,还有具体的案例支持,有助于读者全面理解电力弹簧技术的实际应用价值。

    honor_1.145_testgray20250427.apk

    honor_1.145_testgray20250427.apk

    嵌入式八股文面试题库资料知识宝典-【开发】嵌入式开源项目&库&资料.zip

    嵌入式八股文面试题库资料知识宝典-【开发】嵌入式开源项目&库&资料.zip

    鸿蒙生态HarmonyOS:万物互联时代的操作系统革新与发展路径

    内容概要:本文详细介绍了华为推出的面向全场景的分布式操作系统HarmonyOS。HarmonyOS旨在打破设备间的壁垒,实现万物互联,通过分布式软总线和分布式任务调度等核心技术,让不同设备协同工作,如手机、平板、智能家居等设备间无缝流转任务。其应用生态涵盖教育、金融、出行等多个领域,华为通过资金、技术支持和流量扶持吸引开发者,推动生态繁荣。HarmonyOS从2019年首次发布至今,经历了多个版本迭代,性能和安全性不断提升,用户体验更加智能便捷。尽管面临应用生态丰富度不足、市场竞争压力等挑战,华为通过优化开发工具、加强市场推广等策略积极应对。未来,HarmonyOS将在分布式技术、AI融合和隐私安全等方面持续创新,并在智能家居、车联网、工业互联网等领域拓展生态。 适合人群:对操作系统技术感兴趣的专业人士、开发者、科技爱好者。 使用场景及目标:①了解HarmonyOS的技术架构和分布式技术的特点;②探讨HarmonyOS在智能家居、车联网等领域的应用前景;③评估HarmonyOS对现有操作系统市场的潜在影响。 阅读建议:HarmonyOS作为一款面向全场景的操作系统,不仅涉及技术实现,还包括生态建设和用户体验。因此,在阅读过程中,应重点关注其技术优势、应用场景及未来发展潜力,结合自身需求思考其在实际生活和工作中的应用价值。

    少儿编程scratch项目源代码文件案例素材-简单杀戮.zip

    少儿编程scratch项目源代码文件案例素材-简单杀戮.zip

    基于阻抗控制和工艺优化的机器人磨抛技术研究.pdf

    基于阻抗控制和工艺优化的机器人磨抛技术研究.pdf

    少儿编程scratch项目源代码文件案例素材-扛住别被压.zip

    少儿编程scratch项目源代码文件案例素材-扛住别被压.zip

    【操作系统领域】HarmonyOS架构解析:分布式设计与全场景智能应用的创新实践

    内容概要:本文详细介绍了华为自主研发的面向全场景的分布式操作系统——HarmonyOS的架构设计及其在智能家居、智能穿戴、智慧出行等领域的应用。HarmonyOS采用分层架构,包括内核层、系统服务层、框架层和应用层,各层分工明确,协同工作,为用户提供稳定、高效、智能的操作系统。其核心特性包括分布式架构、微内核设计、组件化开发和一次开发多端部署,这些特性使得不同设备能够实现互联互通和资源共享,为用户带来无缝的全场景智能体验。此外,文章还探讨了HarmonyOS面临的生态建设和兼容性挑战,以及未来的发展前景和技术创新方向。 适合人群:对操作系统架构感兴趣的科技爱好者、智能设备开发者及相关行业从业者。 使用场景及目标:①了解HarmonyOS架构设计及其在智能家居、智能穿戴、智慧出行等领域的具体应用;②掌握HarmonyOS的核心特性,如分布式架构、微内核设计、组件化开发和一次开发多端部署;③探讨HarmonyOS面临的挑战及其未来发展方向。 其他说明:HarmonyOS的出现不仅为华为在智能设备领域的发展提供了有力支撑,也为整个行业的创新发展注入了新的活力。作为科技爱好者和关注者,我们应持续关注HarmonyOS的发展,共同见证它在智能设备领域创造更多的辉煌。

    嵌入式八股文面试题库资料知识宝典-linux驱动开发.zip

    嵌入式八股文面试题库资料知识宝典-linux驱动开发.zip

    开关磁阻电机技术参数与建模技术深度解析:4kW电机性能详述

    内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。

    嵌入式八股文面试题库资料知识宝典-新岸线.zip

    嵌入式八股文面试题库资料知识宝典-新岸线.zip

    基于支持向 量机和余弦相似度的故障诊断方法.pdf

    基于支持向 量机和余弦相似度的故障诊断方法.pdf

    Objective-C+ARKit实现图片识别、平面捕捉、人脸识别+源码(毕业设计&课程设计&项目开发)

    Objective-C+ARKit实现图片识别、平面捕捉、人脸识别+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 ARKit实现图片识别、平面捕捉、人脸识别 ARKit需要ios11 以及 A11处理器或更高版本设备支持 Objective-C+ARKit实现图片识别、平面捕捉、人脸识别+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 ARKit实现图片识别、平面捕捉、人脸识别 ARKit需要ios11 以及 A11处理器或更高版本设备支持~ Objective-C+ARKit实现图片识别、平面捕捉、人脸识别+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 ARKit实现图片识别、平面捕捉、人脸识别 ARKit需要ios11 以及 A11处理器或更高版本设备支持

    少儿编程scratch项目源代码文件案例素材-火柴人大战 中世纪战争.zip

    少儿编程scratch项目源代码文件案例素材-火柴人大战 中世纪战争.zip

    嵌入式八股文面试题库资料知识宝典-并行科技笔试题.zip

    嵌入式八股文面试题库资料知识宝典-并行科技笔试题.zip

    嵌入式八股文面试题库资料知识宝典-进程线程.zip

    嵌入式八股文面试题库资料知识宝典-进程线程.zip

    嵌入式八股文面试题库资料知识宝典-金山问题.zip

    嵌入式八股文面试题库资料知识宝典-金山问题.zip

    少儿编程scratch项目源代码文件案例素材-火柴人战争.zip

    少儿编程scratch项目源代码文件案例素材-火柴人战争.zip

Global site tag (gtag.js) - Google Analytics