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”两个面板。具体步骤如下:

  1. 打开调试工具
  2. 找到需要调试的JS文件,添加断点(或者使用debugger语句)
  3. 切换到“Scope”面板,找到需要修改的变量
  4. 在变量右侧单击鼠标,选择“Add to Watch”将变量添加到“Watch”面板
  5. 在“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>

接下来,可以按照以下步骤使用动态调试:

  1. 打开调试工具
  2. 找到需要调试的JS文件,添加断点
  3. 切换到“Scope”面板,找到变量a
  4. 在变量a右侧单击鼠标,选择“Add to Watch”
  5. 在“Watch”面板中输入“a=100”,按Enter键即可修改变量值
  6. 在控制台中可以查看变量值的变化

示例说明

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

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 用JavaScript操作WinRar

    使用JavaScript操作WinRAR需要使用WinRAR的命令行工具。WinRAR命令行工具具有压缩、解压缩文件的功能以及一些其他选项。下面是关于如何使用JavaScript调用WinRAR命令行工具的完整攻略。 1. 下载并安装WinRAR 要使用WinRAR命令行工具,需要安装WinRAR。WinRAR的官方网站为https://www.rarlab…

    JavaScript 2023年5月27日
    00
  • JavaScript Split()方法

    JavaScript的split()方法用于将字符串分割成字符串数组,返回数组。它可以按照指定的分割符来分割字符串。以下是详细讲解split()方法的攻略: 语法 string.split(separator, limit) 参数:- separator(必须):用于指定分割符的字符串或正则表达式。- limit(可选):一个整数,限定分割后的数组长度。 基…

    JavaScript 2023年5月18日
    00
  • JavaScript高级程序设计(第3版)学习笔记11 内建js对象

    下面是《JavaScript高级程序设计(第3版)学习笔记11 内建js对象》的学习攻略。 常用内建对象 JavaScript中内建对象众多,本章介绍的是一些常用的内建对象。 Boolean对象 Boolean对象只有两种可能的实例,即true和false,如果将其他数据类型转换为Boolean类型,规则是:除了””、0、NaN、null和undefined…

    JavaScript 2023年5月18日
    00
  • jQuery 创建Dom元素

    jQuery 是一款流行的 JavaScript 库,可以方便地操作 DOM 元素。在 jQuery 中,创建 DOM 元素有以下几种方式: 1. 使用 HTML 代码创建 可以使用 jQuery 的 $() 方法创建 DOM 元素,该方法可以接收包含 HTML 代码的字符串作为参数。例如: var div = $("<div>Hell…

    JavaScript 2023年6月10日
    00
  • jQuery 开发者应该注意的9个错误

    jQuery 开发者应该注意的9个错误 引入jQuery的方式错误 错误的方式如下: <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 在上述代码的例子中,我们通过引入了互联网上的jquery库来使用它。这种方式是错误的,因为该方…

    JavaScript 2023年6月10日
    00
  • webpack热模块替换(HMR)/热更新的方法

    Webpack热模块替换(HMR)是一种优化开发工作流的技术,可以在运行时修改代码,而无需刷新页面。这样可以提高我们的开发效率和体验。以下是Webpack热模块替换的详细攻略: 什么是Webpack热模块替换(HMR)/ 热更新? 热模块替换(HMR)是Webpack提供的一种能力,可以让我们在应用程序运行的时候,实现对代码的修改。这意味着我们可以在无需刷新…

    JavaScript 2023年6月11日
    00
  • js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例

    下面我就详细讲解一下这三个操作的完整攻略。 JS常用方法 JS中有许多常用方法,以下是一些常见的方法: querySelector:用于获取文档中匹配指定选择器的第一个元素。 getElementById:根据id获取文档中的元素。 addEventListener:用于向指定元素添加事件句柄。 setTimeout:用于在指定的时间之后执行一次函数。 se…

    JavaScript 2023年5月28日
    00
  • js查看一个函数的执行时间实例代码

    首先,我们可以通过Date对象来获取时间戳,在函数执行前和执行后分别获取时间戳,然后计算时间戳的差值即可得到函数执行时间。 具体操作可以参考下列示例代码: function test() { // 获取函数执行前的时间戳 const startTime = new Date().getTime(); // 模拟函数执行 for (let i = 0; i &…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部