浅谈VSCode调试js代码的几种方法
VSCode如何调试js代码？下面本篇文章给大家介绍一下VSCode调试js代码的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《vscode教程》
介绍 VS Code 调试 js 的两种方法：
Quokka.js 插件
Debugger for Chrome 与 Live Server 搭配
Quokka.js 插件
插件地址：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
在扩展商店搜索安装：
在VS code 中使用快捷键 ctrl shift P 调出面版，输入 quo：
可以看到有两个选项，一个是调试 js 的，一个是调试 ts 的。我们选第一个。
可能会有一个询问你是否购买 pro 版的提示，你可以关掉不用理会，也可以选择购买。
尝试在打开的编辑框中输入几句代码：
你会发现，代码的运行是实时的。左边的绿色方块代表语句被成功执行，如果执行不成功，会变成红色。
Debugger for Chrome 与 Live Server 搭配
Debugger for Chrome 插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Live Server 插件地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
请先下载安装这两个插件；本方法需要安装谷歌浏览器。
假设你有这样一个前端项目：
当你安装好 Live Server 后你会发现 VS Code 右下角有个 Go Live 小按钮：
点它！
Live Srever 会创建一个本地开发服务器，并弹出一个浏览器窗口，地址类似这样：
http://127.0.0.1:5500/
同时也会有提示：
你可以暂时关掉这个浏览器窗口，不用担心，在没再次点击右下角的那个小按钮或关掉 VS Code 时，你依然可以通过 http://127.0.0.1:5500/ 打开刚才的网页。
请记住这个端口号：5500，因为后面会用到。当你多开 Live Srever 或其他程序占用了这个端口号时，端口号会自动 1 。
顾名思义，Live Server 是实时更新的。当你修改了项目的文件或代码，Live Server 会马上更新并自动刷新页面。
回到编辑器。
依次点击: 运行图标 -> 创建 launch.json 文件：
用下面的配置覆盖掉原本的配置并保存：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}VS Code 就会在项目所在目录中保存相关的配置：
注意： "url" 字段中的端口号 5500 要与 Live Server 提供的端口号对应。
点击：
你会看到：
如你所愿，它已经正常工作了。
我们把鼠标移到图示位置，点击以打上断点：
然后点击网页上的按钮：
你会看到打上的断点成功拦截执行：
细心的你可能会发现，当点击一次 Go Live 按钮时会打开一个浏览器窗口，再点击一次调试按钮时（快捷键 F5），会打开第二个用于调试的窗口。这可能是没有必要的，我们只需要一个窗口就行了。
下面我们来编辑配置，使这个过程只需打开一次浏览器窗口。
点击 “chrome 调试” 旁边的齿轮：
在打开的编辑框依次点击：
得到如下配置并保存：
在扩展商店搜索 Live Server 并打开它的扩展设置：
需要修改的配置有两个：
1、Chrome Debugging Attachment
点击进入，将 "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。
"liveServer.settings.ChromeDebuggingAttachment": true
2、Custom Browser
点击此选项中的下拉框，我们选择 chrome：
修改完成！
接下来我们重启 Live Srever 服务：
回到 VS Code，按下 F5 键，启动调试：
之后本项目的每次调试你只需要点击 Go Live 按钮并回到 VS Code 按下 F5 键就行了。
当然，chrome 调试 选项可能还是生效的，当你关掉 Live Server 打开的浏览器窗口时，可以尝试使用这个选项再次打开。
如果遇到端口号被占用的情况，可以点击调试旁边的齿轮来修改。
祝：
永无 BUG！
使用到的代码：
<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">请点击下方按钮以获取当前时间</div>
<button id="getTime">获取时间</button>
<script src="./js/index.js"></script>
</body>
</html>// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
let time = document.getElementById("time");
let now = new Date().toLocaleString();
time.innerHTML = now;
}// ./.vscode/launch.json
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "chrome 调试",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}更多编程相关知识，请访问：编程课程！！
以上是浅谈VSCode调试js代码的几种方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
vscode怎么查看word文档 vscode查看word文档的方法
May 09, 2024 am 09:37 AM
首先，在电脑上打开vscode软件，点击左边的【Extension】(扩展)图标，如图中①所示然后，在扩展界面的搜索框中输入【officeviewer】，如图中②所示接着，从搜索结果中选择【officeviewer】安装，如图中③所示最后，打开文件，如docx,pdf等，如下图
vscode怎么绘制流程图_visual_studio code绘制流程图的方法
Apr 23, 2024 pm 02:13 PM
首先要打开电脑中的visualstudiocode，点击左侧四个方块按钮然后在搜索框中输入draw.io查询插件，点击安装安装好后，新建一个test.drawio文件接着选中test.drawio文件，进入编辑模式左侧有各种图形，随意选择，就可以绘制流程图了绘制好后，点击文件→嵌入→svg下面再选择嵌入复制svg代码将复制的svg代码粘贴到html代码中打开html网页，就可以看到绘制的流程图了点击网页上的图片，就可以跳转页面在该页面可以放大缩小流程图在这里，我们选择点击右下角的铅笔图案，跳转网
加州理工华人用AI颠覆数学证明！提速5倍震惊陶哲轩，80%数学步骤全自动化
Apr 23, 2024 pm 03:01 PM
LeanCopilot，让陶哲轩等众多数学家赞不绝口的这个形式化数学工具，又有超强进化了？就在刚刚，加州理工教授AnimaAnandkumar宣布，团队发布了LeanCopilot论文的扩展版本，并且更新了代码库。图片论文地址：https://arxiv.org/pdf/2404.12534.pdf最新实验表明，这个Copilot工具，可以自动化80%以上的数学证明步骤了！这个纪录，比以前的基线aesop还要好2.3倍。并且，和以前一样，它在MIT许可下是开源的。图片他是一位华人小哥宋沛洋，他是
vscode怎么开启后台更新 vscode开启后台更新方法
May 09, 2024 am 09:52 AM
1.首先，打开界面后，点击左上角的文件菜单2.随后，在首选项栏目中点击设置按钮3.接着，在跳转的设置页面中，找到更新板块4.最后，鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮，并重启程序即可
vscode工作区怎么添加文件 vscode工作区添加文件的方法
May 09, 2024 am 09:43 AM
1.首先，打开vscode软件，点击资源管理器图标，找到工作区窗口2.然后，点击左上角的文件菜单，找到将文件夹添加到工作区选项3.最后，在本地磁盘中找到文件夹位置，点击添加按钮即可
vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法
May 09, 2024 am 10:30 AM
1.首先，打开设置菜单中的settings选项2.随后，在跳转的commonlyused页面中找到terminal栏目3.最后，在该栏目右侧取消勾选usewslprofiles按钮即可
VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程
May 09, 2024 am 09:49 AM
1.首先，打开界面后，点击工作区界面2.然后，在打开的编辑面板中，点击文件菜单3.随后，点击首选项栏目下的设置按钮4.最后，鼠标点击勾选CursorSmoothCaretAnimation按钮，保存设置即可
Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法
May 09, 2024 am 10:34 AM
1.首先，打开编辑窗口后，点击左下角的配置图标2.随后，在打开的子菜单中点击管理工作区信任按钮3.接着，在编辑窗口中找到该页面4.最后，根据自己的办公需求勾选相关指令即可
