JavaScript

JS调试(Debug)方式大全

下文是笔者讲述的Javascript调试的方法大全,如下所示

JS调试简介

JS:
  作为一门编程语言,我们在日常开发中,可能会出现一些语法错误，逻辑错误，
  导致程序运行的效果,并不是我们所需的效果，那么有没有一种高效的调试方法
   能使我们快速定位JS代码的错误位置呢?下文笔者将一一道来,如下所示

查看JS错误的行数

Chrome浏览器，右键--“检查”
 点击 Console 这个tab栏，即可查看错误的行数
JavaScript错误查看方法

JS调试方法

方式1:
   console.log打印日志的方式调试
方式2：
   断点调试法
方式3：
   debugger关键字调试法

console.log调试程序方式

console.log调试程序同document.write、alert调试程序一样
 都是采用输出指定值的方式达到调试程序的目的
例： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="test"></div>
    <script>
        var d = document.getElementById('test');
        console.log(d);
        var a = 'Hello', b = 'JavaScript';
        var c = a + ' ' + b;
        console.log(c);
        d.innerHTML = c;
    </script>
</body>
</html>
chrome-console.log调试法

断点调试

断点是浏览器内置调试工具的重要功能之一，使用设置断点可以让程序在我们需要的地方中断(暂停)
从而方便我们对该处代码进行分析和逻辑处理
以Chrome 浏览器为例
开启断点调试首先需要打开浏览器内置的开发者工具(按F12或单击鼠标右键,在弹出的菜单中选择“检查”)
然后在找到并选择“Sources”
img

1.找到要调试的文件

打开调试工具后，需要在工具的左侧找到要调试的文件并单击打开该文件
JavaScript调试器

2.打断点

给代码打断点非常简单
只需要在单击要调试代码前面的行号即可
若行号被标记为蓝色
则说明已经成功打了断点
chrome-js断点

3.断点调试

打好断点后,刷新页面即可进入调试模式,代码执行到断点的位置会暂停，此时我们可以点击页面中的箭头会按F8来使代码继续执行到下个断点 调试过程中，会在调试工具的最右侧的 Scope 栏显示一些数据。此外，还可以在最右侧的 Watch 栏中录入要调试的变量名，这样在调试过程中就能实时看到代码运行中变量的变化。
断点调试
javascript 调试 watch的方法分享

4.逐语句执行

在调试过程中
我们还可以选择让代码逐句执行或按F10即可 逐句执行配合在 Watch 栏中录入要调试的变量，能够更清晰的看到变量在代码运行过程中的变化：

debugger关键字

当使用debugger关键字时，程序运行到此处会暂停运行,使用此种方式调试程序,其效果同console.log相同 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="test"></div>
    <script>
        var x = 22 * 8;
        debugger;
        document.getElementById('test').innerHTML = x;
    </script>
</body>
</html>