首页 > 代码库 > Web开发标配--开发人员工具-JS调试

Web开发标配--开发人员工具-JS调试

喜欢从业的专注,七分学习的态度。

JS:全称JavaScript,Web中,js主要在两个地方:

  • html的<script type="text/javascript"></script> 中.
  • js脚本文件中,页面引用js:<script src="http://www.mamicode.com/js/***.js"></script>
    JS调试一般在浏览器开发人员工具“调试程序”Tab页。

F12打开浏览器 开发人员工具。

技术分享
开发人员工具

主要关注点在左侧代码框和右侧监控区域。

关键点: 断点、监控、调试工具。

调试程序简单总结就是断点+监控+调试工具。

断点

调试程序首先在运行前先添加断点,让程序在断点处停止,然后才有监控和调试。
添加断点:行号左侧单击,添加断点后出现断点标志,程序运行到断点处会停止 。

技术分享
断点

监控

当程序停止在程序调试界面后可以添加需要监控的对象,可以监控的的内容包括对象和公式。
添加监控:选择对象或公式,右键,添加监控。

  • 对象监控
    选择对象---右键---添加监控,右侧得到对象的值。

    技术分享
    对象监控
  • 公式监控

选择公式--右键---添加监控,右侧得到对象的值。

技术分享
公式监控

调试工具

当程序在断点处停顿后可以使用调试工具,一步步观察程序走向。

技术分享
调试工具

使用“单步调试”工具一行一行执行,观察程序运行步骤,在遇到调用方法时使用“进入调试”进入调用的方法内部观察运行步骤,在调用层次很深时,使用“跳出”回到方法外层,使用“运行”走完调试。

代码搜索

在调试界面有一个输入框,用于检索当前代码内容,进行内容定位,可回车直接定位。

技术分享
代码检索

开发工具对于每个人都有一些自己的使用习惯,最适合的、最习惯的、自己摸索的、是最好的。

一步一步,坚持积累,坚持学习。

Web开发标配--开发人员工具-JS调试