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自定义DateDiff函数(兼容所有浏览器)

    下面是详细讲解“JavaScript自定义DateDiff函数(兼容所有浏览器)”的完整攻略。 标题 1. 问题描述 在JavaScript中计算两个日期之间的时间差并不是一个简单的操作。虽然JavaScript有自带的Date对象,可以计算日期之间的差值,但在不同的浏览器中,它的表现和运算方式是不一样的,这就会导致一些兼容性问题。因此,在实际开发中,我们经…

    JavaScript 2023年5月27日
    00
  • js创建对象的几种常用方式小结(推荐)

    下面是“js创建对象的几种常用方式小结(推荐)”的完整攻略。 1. 前言 在 JavaScript 中,创建对象是非常常见的操作之一。为了能够从不同的角度去看待对象创建的方式,不同的方法也应运而生。接下来,我们将会一一讨论对象创建方式的优缺点,以及使用场景。 2. 第一种常用方式:对象字面量 对象字面量是最常见和最简单的方式,由任意数量的“名称/值”对组成。…

    JavaScript 2023年5月27日
    00
  • 详解require.js配置路径的用法和css的引入

    认真阅读本文后,你将完整掌握使用require.js配置路径的方法和css文件的引入方法。 require.js配置路径的用法 require.js是一个基于AMD标准的JavaScript模块加载工具,它可以帮助我们对JavaScript代码进行模块化管理。在使用require.js的过程中,我们需要配置路径来告诉require.js加载什么模块,以及该模…

    JavaScript 2023年6月11日
    00
  • jQuery 创建Dom元素

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

    JavaScript 2023年6月10日
    00
  • 前端HTTP发POST请求携带参数与后端接口接收参数的实现

    下面是详细讲解“前端HTTP发POST请求携带参数与后端接口接收参数的实现”的完整攻略。 一、前端HTTP发POST请求携带参数的实现 1. 使用XMLHttpRequest XMLHttpRequest是前端与服务器进行数据交互最常用的方式。要发送带有参数的POST请求,需要设置请求头和请求体。请求体是以字符串形式发送给服务器的,一般将参数转换成JSON或…

    JavaScript 2023年5月19日
    00
  • javascript实现倒计时跳转页面

    实现倒计时跳转页面,一般分为以下几个步骤: 1.确定倒计时的截止时间,并获取当前时间。 2.根据截止时间和当前时间,计算出倒计时剩余的时间。 3.将倒计时剩余时间格式化为“时 分 秒”形式,并将它显示到页面上。 4.如果倒计时剩余时间大于0,继续每秒更新倒计时时间并显示。 5.如果倒计时剩余时间小于0,跳转到目标页面。 下面是具体步骤: 1.确定倒计时截止时…

    JavaScript 2023年6月11日
    00
  • 红米手机抢购的js代码

    针对红米手机抢购的 JS 代码攻略,我们需要先了解一下抢购的基本原理。 在红米手机抢购页面中,通过 JavaScript 设置定时器定时获取服务器时间,当服务器时间和系统时间一致时,弹出抢购按钮,此时用户点击按钮进行下一步操作。因此,我们需要找到获取服务器时间的 JS 代码,并通过模拟调用该代码来提前获取到服务器时间从而成功抢购。 以下是详细步骤: 步骤一:…

    JavaScript 2023年6月11日
    00
  • JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)

    当我们需要把一个字符串按照某种规则分割成一个数组时,可以使用JavaScript字符串对象的split方法。本文将详细讲解JavaScript字符串对象split方法的使用方法。 split方法基本语法 split()方法的基本语法如下: string.split(separator, limit) 其中,separator参数为分隔符,可以是字符串或正则表…

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