你是怎么调试JavaScript代码的？

浅浅的花香味﹌ 2022-03-09 02:16 279阅读 0赞

用JavaScript编码有半年时间了，程序基于Electron框架：

> Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

平时使用的开发工具主要是Visual Studio Code，这便是一个Electron应用程序。

遇到一些JavaScript语法问题想写一个小测试程序的时候，要么在当前正式代码中加，要么使用Chrome浏览器的开发者工具，但感觉都不太好。

心想，不能像之前学C++那样、用Microsoft Visual Studio 2010(2017)建个控制台工程吗？

我们都知道，用JavaScript写程序，基本上就是分“前端”和“后端”。

### 前端用Chrome就可以调 ###

比如，我建立了一个名为Front的文件夹，然后在里面新建两个文件program.html、program.js(测试代码来自《JavaScript语言精粹》)，然后打开Chrome的开发者工具，在“Sources”中就可以将Front添加到workspace，在program.js上设置断点，刷新program.html就可以单步调试了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70][]

### 后端建议用Visual Studio Code ###

比如，我建立一个名为hello的文件夹，用VS Code将它Open Folder进来，在里面添加一个hello.js，切换到Debug模式，会发现“No Configurations”，添加配置并选择Node：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70 1][]

VS Code会帮我们新建一个launch.json文件，此时，我试图运行了一下：

![20190312092621695.png][]

提示没有找到Node，因为我一直在调试Electron程序，确认电脑上是有Node的，应该是没有添加到环境变量，我在C盘搜索Node.exe，发现位于：  
C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\MSBuild\\Microsoft\\VisualStudio\\NodeJs

将之添加到系统环境变量，重启电脑，然后就运行成功了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70]: /images/20220309/1e5a94afa4a24034bceb0a32684497cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70 1]: /images/20220309/d42afc5fc3ee45ce91fab16275bcc512.png
[20190312092621695.png]: /images/20220309/c425b12107db4ff4bb936621a6ae32a0.png