JavaScript单步调试

ゝ一纸荒年。 2022-07-28 01:29 244阅读 0赞

# **JavaScript单步调试** #

作为前端开发人员，单步调试这一项技能往往被忽略，但是我依然觉得单步调试是一个非常实用并且基本的技能。当然，前端开发人员主要与JavaScript接触，在这里，我向大家介绍一下单步调试JavaScript的方法。

我这这里给大家介绍一下单步调试JavaScript的三种方法。

## **1、使用WebStorm对JavaScript进行调试** ##

工具：[WebStorm 10.0.3][]

环境：[Node.js v5.3.0][]

工具、环境的安装和使用我就不在此赘述，请自行百度。

**第一步：**

打开WebStorm并新建一个Empty Project命名为WebTest，在WebTest工程下新建index.js内容如下：

var num = 0;
    num = num + 1;
    var tempNum = add(num);
    num = tempNum;
    console.log(num);
     
    function add(arg) {
        arg = arg + 10;
        return arg;
    }

然后右键单击index.js，选择Run‘index.js’运行，结果为11。

![Center][]

**第二步：**

在第2行添加断点，右键单击index.js，选择Debug‘index.js’。

![Center 1][]

**点击Step Over单步运行程序，遇到方法跳过，观察店里num的变化**

**点击Step Into单步运行程序，遇到方法进入。**

更多的功能大家可以自行尝试。

**注意：**

此时可能报错误：

Cannot stop on breakpoint due to internal error: org.jetbrains.v8.V8CommandProcessor$1: TypeError: f is not a function

解决方法为：

在WebStorm安装目录下的bin文件夹下的WebStorm.exe.vmoptions文件和WebStorm64.exe.vmoptions文件内添加\-Dnodejs.debugger.use.jb.support=false，（注意前面有一个短横线）重新启动WebStorm。

## **2、使用Chrome对JavaScript进行单步调试。** ##

工具：Google Chrome v48

此方法不依赖WebStorm和Node.js，但是我这里用WebStorm创建文件。

**第一步：**

继续在上面的项目中创建index.html，并在index.html中引入index.js，用Chrome运行index.html。

**第二步：**

按F12进入开发者模式，选择Sources，然后继续选择index.js，然后在第二行添加断点，刷新浏览器重新运行，通过Step Over和Step Into进行调试。

![Center 2][]

## **3、用Mozilla FireFox对JavaScript进行单步调试** ##

**![Center 3][]**

如果有什么意见和建议，欢迎交流。

[WebStorm 10.0.3]: https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases
[Node.js v5.3.0]: http://nodejs.cn/
[Center]: /images/20220727/6b83402d47a945a9b7a716fa9b6acd54.png
[Center 1]: /images/20220727/0a408edd556549fb9b828b028a0154eb.png
[Center 2]: /images/20220727/a011122e9c7647d2b9212f8abf51a401.png
[Center 3]: /images/20220727/eed8c4274bba4ef1be391b920f7c5553.png