JS调试系列:断点与动态调试(基础篇)是一篇介绍JavaScript调试的基础知识和调试技巧的文章。
本文主要介绍了调试中的两个基础概念——断点和动态调试,以及如何在Chrome浏览器中使用这两种调试方式来定位和解决JavaScript代码问题。
以下为本文的详细攻略:
断点调试
断点介绍
断点是指我们在代码某一处打上标记,当程序执行到这一处时会自动停下来,等待我们的进一步调试。在调试过程中,断点是一个非常重要的工具,可以帮助我们定位问题,查看代码执行的细节等。
添加断点
在Chrome浏览器中,添加断点非常简单。我们只需要在需要添加断点的代码行左侧单击即可,如下所示:
function calc() {
var a = 10;
var b = 20;
var c = a + b; // 在这一行添加断点
console.log(c);
}
启动断点调试
添加好断点后,我们需要启动调试,让程序停在断点处等待我们的操作。这可以通过两个方式完成:
- F12打开开发者工具,在Sources选项卡中找到需要调试的js文件,选中后在需要添加断点的代码行左侧单击即可添加断点。
- 在需要调试的页面上打开开发者工具(快捷键为Ctrl+Shift+I),切换到Sources选项卡,在要断点的代码行左侧单击即可添加断点。
调试过程
开启断点调试后,程序会在运行到断点处自动停下。此时可以使用F10、F11等快捷键进行单步执行、单步进入等操作。在执行过程中可以查看变量值、调用栈等调试信息,以便我们更好地定位问题。
以下是一个示例代码,用来展示断点调试的过程:
<html>
<head>
<title>断点调试示例</title>
</head>
<body>
<script>
function calc() {
var a = 10;
var b = 20;
debugger; // 在这一行添加断点
var c = a + b;
console.log(c);
}
calc();
</script>
</body>
</html>
取消断点
如果我们不再需要某个断点,可以通过单击该断点左侧的蓝色圆点来取消它。当然,如果要取消所有断点,可以通过单击开发者工具左下角的“停止”按钮来实现。
动态调试
动态调试介绍
动态调试是指在程序运行时动态修改程序中的变量、函数等内容,以便我们更好地定位和解决问题。
例如,在调试过程中,我们发现某个函数的逻辑有问题,但不清楚是哪个变量引起的。这时我们可以通过动态调试的方式来修改变量值,以便在执行时查看变量值的变化,找到问题所在。
添加动态断点
添加动态断点需要使用到开发者工具中的“Scope”和“Watch”两个面板。具体步骤如下:
- 打开调试工具
- 找到需要调试的JS文件,添加断点(或者使用debugger语句)
- 切换到“Scope”面板,找到需要修改的变量
- 在变量右侧单击鼠标,选择“Add to Watch”将变量添加到“Watch”面板
- 在“Watch”面板中输入要修改的变量,并在后面加上等于号和变量值即可完成修改
调试过程
以下是一个在调试过程中使用动态调试的示例:
<html>
<head>
<title>动态调试示例</title>
</head>
<body>
<script>
var a = 10;
function calc() {
var b = 20;
var c = a + b; // 添加断点
console.log(c);
}
calc(); // 执行一次函数
</script>
</body>
</html>
接下来,可以按照以下步骤使用动态调试:
- 打开调试工具
- 找到需要调试的JS文件,添加断点
- 切换到“Scope”面板,找到变量a
- 在变量a右侧单击鼠标,选择“Add to Watch”
- 在“Watch”面板中输入“a=100”,按Enter键即可修改变量值
- 在控制台中可以查看变量值的变化
示例说明
示例1
以下代码是一个加法计算器的实现,当用户点击“计算”按钮时,会在页面上显示计算结果。如果输入的不是数字,会提示输入错误。
<html>
<head>
<meta charset="UTF-8">
<title>加法计算器</title>
</head>
<body>
<form>
<input type="text" id="num1"/></br>
<input type="text" id="num2"/></br>
<button onclick="calc()">计算</button></br>
</form>
<p id="result"></p>
<script>
function calc() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (isNaN(num1) || isNaN(num2)) {
alert("请输入数字");
} else {
var result = parseFloat(num1) + parseFloat(num2);
document.getElementById("result").innerHTML = result;
}
}
</script>
</body>
</html>
在这个实现中,点击“计算”按钮后会触发calc()函数。我们可以通过添加断点来调试calc()函数,查看其运行过程中是否有错误。
在浏览器中打开该页面后,按F12打开Chrome的开发者工具,在Sources面板中找到该页面的js代码文件,然后在calc()函数的第一行添加断点。
接着再次点击“计算”按钮,页面会停留在calc()函数的第一行。我们可以使用F10等快捷键逐过程查看代码执行过程,通过观察代码执行时变量的值来定位问题。
示例2
以下代码是通过JavaScript实现的一个简单的计数器,点击“+”按钮可以增加计数器的值,点击“-”按钮可以减少计数器的值。
<html>
<head>
<meta charset="UTF-8">
<title>计数器</title>
</head>
<body>
<button onclick="add()">+</button>
<button onclick="sub()">-</button>
<p id="count"></p>
<script>
var count = 0;
function add() {
count++;
document.getElementById("count").innerHTML = count;
}
function sub() {
count--;
document.getElementById("count").innerHTML = count;
}
</script>
</body>
</html>
在这个实现中,我们可以使用动态调试的方式来修改计数器的值,以便在程序运行时查看变量的变化。
在浏览器中打开该页面后,按F12打开Chrome的开发者工具,切换到Scope面板,可以看到变量count。在变量count旁边点击鼠标右键,选择“Add to Watch”将其添加到Watch面板中。
接着,我们可以在Watch面板中修改count变量的值,以观察程序的执行情况。
在Watch面板中输入“count=10”,按Enter键后,可以看到计数器的值变成了10。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js调试系列 断点与动态调试[基础篇] - Python技术站