js调试系列断点与动态调试[基础篇]

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技术站