JavaScript代码如何在VScode进行调试？

JavaScript代码如何在VScode进行调试？

1.使用Node.js

首先，看到.js，顺其自然以为是一个JavaScript的库，但实际上并不是。node它相当于除了浏览器以外的JavaScript运行环境。

首先，到官网下载node

下载 | Node.js 中文网 (nodejs.cn)

直接下载对应系统的安装包。

下载好安装之后，点击VScode左侧的工具栏中的调试。接着下拉选项，选择Node.js。

选择一个当前js“包含”的目录，可以是父目录，会把完整目录自动生成，但不能是不想关的目录（兄弟目录非父目录）。

最后点击调试或者是按F5即可运行JavaScript代码，可以在代码行左侧添加红点断点，即可逐步进行调试。

不过，node运行js代码的弊端是解析不了DOM方法，以及window对象等等浏览器的API，因为node就像Java的jvm一样，不需要依赖于浏览器。

但如果换一个文件的时候，需要重新按照步骤进行调试。

2.利用Live Server插件（本地服务器）

先放演示代码

    <button id="bn">CLick me</button>
    <script src="l2.js"></script>

let bn = document.getElementById("bn");
bn.onclick = () => {
  alert("ok");
};

本次尝试拦截alert方法输出ok字符串

首先，在VScode的工具栏找到扩展。然后在搜索栏里搜索Live Server插件，下载并安装。

然后在html文件中鼠标右键，会显示Open with Live Server，然后点击进去。

然后会打开浏览器，本地的url变成了http协议的域名。把网站的地址进行复制。

返回到VScode中，在html或js文件下按住 Ctrl + Shift + p，输入debug open link，然后按下回车。

接着粘贴我们刚刚复制的地址。

此时，会打开一个新的浏览器以提供调试专用。（主要是依靠套接字进行获取）

并且我们在alert(“ok”);那一行打了一个红点调试，现在如果点击按钮的时候，代码执行会在这被停住。

此时，我们的在VScode进行调试就圆满结束了。

（如果出现调试的灰色的点，那么是浏览器的地址有中文导致，或者在调试的时候修改了代码没有及时刷新）

3.对方法2的工程化适用

演示代码

    <button class="ct">创建p元素</button>
    <script src="main.js"></script>

function append_p_element() {
  let p = document.createElement("p");
  let text = document.createTextNode("这是一个p元素");
  p.appendChild(text);
  document.getElementsByTagName("body")[0].appendChild(p);
}
let ct = document.getElementsByClassName("ct")[0];
ct.onclick = () => {
  append_p_element();
};

上面的方法2是针对一般的小demo演示，假如你的项目是一个长期维护或很大代码量的时候，那么如果每次都是debug回车也许并不是那么的方便。（下图模拟演示工程代码，不规范见谅）

首先，对html文件鼠标右键，打开Open with Live Server。(保证本地服务器开启)

（如果没有安装Liver Server插件需要搜索安装）

开启之后不需要复制浏览器url，直接返回VScode（但是端口号需要注意一下），进入调试页面，下拉选项。选择项目的目录（所在的工作区）

然后选择chrome或者是edge浏览器（根据擅长爱好），我这里选择的是edge浏览器。

然后会生成一个json文件的配置

需要改的几项。url的端口改成刚刚Open with Live Server打开的浏览器url（网页地址）的端口，比如我这里是5501。

还有，如果你的这个项目不属于工作区目录的子元素（后代元素），比如以上是在子目录demo_1的子元素文件，那么需要改成。

            "url": "http://localhost:5501\\demo_1\\index.html",

这是最终配置好的结果

然后返回js或者html文件，调试会新增这样的一个选项、

直接点击绿色的按钮运行，则进入调试运行的状态。然后跟方法2的效果类似，这样配置一次之后，维护项目进行调试特别的方便。

我这次对添加子节点方法进行断点，然后效果依然可以使用，当事件触发时断点中断执行。

B站这位小姐姐视频参考

第2方法适合于测试一个功能或学习一个案例，对项目代码量并不是很高的且不需要维护，建议使用。而第3方法由于需要维护，因此不需要每次进行配置，而node则是给浏览器外写js的另外一种选择。

萌新技术可能不够，请多多指教。