掌握调试工具的用法

是九二呀

于 2023-05-06 23:55:33 发布

阅读量162

点赞数

分类专栏：前端 HTML+CSS+JavaScript JavaScript+jQuery 文章标签：前端 javascript

本文链接：https://blog.csdn.net/Y9232/article/details/130536313

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JavaScript

14 篇文章 0 订阅

订阅专栏

JavaScript+jQuery

1 篇文章 0 订阅

订阅专栏

程序调试是程序设计中的重要一环，在JavaScript中可以使用Chrome调试工具的方式来调试程序。

下面是示例代码：

var t = prompt("请输入一个整数", "");
				if (t > 6) {
					for (var i = t, i > 0; i--) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.writ("<br/>");
					}
				else {
					for (var i = t; i > 0; i--) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.write("<br/>");
					}
					for (var i = 1; i <= t; i++) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.write("<br/>");
					}
				}

在运行代码的时候发现，页面空白，并且提示框也没有弹出。

一、Chrome开发者工具

Chrome自带了JavaScript调试工具，即Chrome开发者调试工具，具有强大的代码调试功能，使用方法是在浏览器中打开网页，按F12键即可进入调试界面。

Chrome开发者工具常用的八个模块及其功能介绍，如下：

$\rightarrow$ Element：用于查看和编辑当前页面的HTML和CSS元素。

$\rightarrow$ Console：用于显示脚本中输入出的调试信息或运行测试脚本等。

$\rightarrow$ Sources：用于查看和调试当前页面加载的脚本的源文件。

$\rightarrow$ Network：用于查看http请求的详细信息，如请求头、响应头及返回内容等。

$\rightarrow$ TimeLine：用于查看执行脚本时间、页面元素渲染时间等信息。

$\rightarrow$ Profiles：用于查看CPU执行时间和占用内存等信息。

$\rightarrow$ Application：用于记录网站加载的所有资源信息，包括储存数据。

$\rightarrow$ Audits：用于优化前端页面，加速网页加载速度等。

二、语法错误的排除

使用Chrome浏览器打开代码，按F12键进入调试界面。

自动暂停按钮表示开启运行时错误自动暂停功能，能准确定位出错脚本的位置。在15行停住，说明此行有错且显示了错误图标。

经检查，“i=t”后的逗号应为分号，修改后此处错误消失。

然后发现21行也出现了错误，发现else之前少了一个“}”。

根据提示依次排除了程序中的所有错误，然后重新运行程序发现当输入数字大于6时，输入几个数字，页面就出现几个数字，与预想的效果并不一致。

三、逻辑错误的排除

Chrome开发者工具提供设置断点、单步调试的方式调试程序。

1.确定断点位置

当输入框输入7时，只输出1行7个数字，程序第15行是第一层for循环，主要控制数字的行数，将断点设在此行。单击15行出现一个断点标识。

图中①~⑤的含义为：①停止断点调试。②单步调试，不进入函数体内部。③单步调试，进入函数体内部。④跳出当前函数。⑤禁用所有的断点，不做任何调试。

2.单步调试

重新运行程序，并在弹出框输入7，当程序运行到第15行停止。

可以看见在页面右侧提供了两个按钮，分别是停止断点调试和单步调试，这里选择单步调试，可以看到程序在第16行和第17行来回跳转。

直到在页面输出数字7后，停止在19行，这表示在输出<br/>时出现了错误。

经发现是writ拼写错误，修改之后如下图：

3.修改错误

修改好的代码如下：

var t = prompt("请输入一个整数", "");
				if (t > 6) {
					for (var i = t; i > 0; i--) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.write("<br/>");
					}
				} else {
					for (var i = t; i > 0; i--) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.write("<br/>");
					}
					for (var i = 1; i <= t; i++) {
						for (var j = 1; j <= i; j++) {
							document.write(j + "&nbsp;&nbsp");
						}
						document.write("<br/>");
					}
				}

当输入的数字小于等于6时，如下图：