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中文网其他相关文章！
Visual Studio与VS代码：哪个对您的项目更好？Apr 14, 2025 am 12:03 AMVisualStudio适合大型项目和需要强大调试功能的开发场景，而VSCode则适合需要灵活性和跨平台开发的场景。 VisualStudio提供全面的开发环境，支持.NET开发，集成了调试工具和项目管理功能；VSCode以轻量和扩展性着称，支持多种编程语言，通过插件系统增强功能，适用于现代开发流程。
Visual Studio：探索定价和许可选项Apr 13, 2025 am 12:03 AMVisualStudio提供三种版本：Community免费版适用于个人和小型团队，Professional付费版适合专业开发者和中小型团队，Enterprise旗舰版面向大型企业和复杂项目。
Visual Studio的价值：权衡成本与其收益Apr 12, 2025 am 12:06 AMVisualStudio在.NET开发中价值高，因其功能强大且全面。尽管成本和资源消耗较高，但其带来的效率提升和开发体验改善显着。对于个人开发者和小型团队，Community版是理想选择；大型企业则适合Professional或Enterprise版。
Visual Studio的可用性：哪些版本是免费的？Apr 10, 2025 am 09:44 AMVisualStudio的免费版本包括VisualStudioCommunity和VisualStudioCode。1.VisualStudioCommunity适用于个人开发者、开源项目和小型团队，功能强大，适合个人项目和学习编程。2.VisualStudioCode是一个轻量级的代码编辑器，支持多种编程语言和扩展，启动速度快，资源占用少，适合需要灵活性和可扩展性的开发者。
如何为Windows 8安装Visual Studio？Apr 09, 2025 am 12:19 AM在Windows8上安装VisualStudio的步骤如下：1.从微软官方网站下载VisualStudioCommunity2019安装包。2.运行安装程序并选择所需组件。3.完成安装后即可使用。注意选择与Windows8兼容的组件，并确保有足够的磁盘空间和管理员权限。
我的计算机可以运行与代码吗？Apr 08, 2025 am 12:16 AMVSCode可以在大多数现代电脑上运行，只要满足基本系统要求：1.操作系统：Windows7及以上，macOS10.9及以上，Linux；2.处理器：1.6GHz或更快；3.内存：至少2GBRAM（推荐4GB或更高）；4.存储空间：至少200MB可用空间。通过优化设置和减少扩展使用，可以在低配置电脑上获得流畅的使用体验。
如何使程序与Windows 8兼容？Apr 07, 2025 am 12:09 AM要让程序在Windows8上顺畅运行，需采取以下步骤：1.使用兼容性模式，通过代码检测并启用该模式。2.调整API调用，根据Windows版本选择适当的API。3.进行性能优化，尽量避免使用兼容性模式，优化API调用并使用通用控件。
VS代码在Windows 8上有效吗？Apr 06, 2025 am 12:13 AM是的，vscodeiscompatiblewithwindows8.1）下载theinstallerfromtherfromthevscodewebsiteandensuretheletheLatest.netframeworksinstalled.2）installextensionsionsthecommandline，installextensions inthecommandline，notsomemememandline，NoteMemeMemAlandlower.3）noteSmomeMayMayload
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
Atom编辑器mac版下载
最流行的的开源编辑器
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
禅工作室 13.0.1
功能强大的PHP集成开发环境
