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

Posted 2020-09-20

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

JS：全称javascript，Web中，js主要在两个地方：

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

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

开发人员工具

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

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

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

断点

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

断点

监控

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

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

  
  

  对象监控

• 公式监控

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

公式监控

调试工具

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

调试工具

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

代码搜索

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

代码检索

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

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