标签：插件 Code Server Live VS 调试 js 端口号
介绍 VS Code 调试 js 的两种方法：
-
Quokka.js 插件
-
Debugger for Chrome 与 Live Server 搭配
Quokka.js 插件
在扩展商店搜索安装：
在VS code 中使用快捷键 ctrl+shift+P 调出面版，输入 quo：
可以看到有两个选项，一个是调试 js 的，一个是调试 ts 的。我们选第一个。
可能会有一个询问你是否购买 pro 版的提示，你可以关掉不用理会，也可以选择购买。
尝试在打开的编辑框中输入几句代码：
你会发现，代码的运行是实时的。左边的绿色方块代表语句被成功执行，如果执行不成功，会变成红色。
Debugger for Chrome 与 Live Server 搭配
请先下载安装这两个插件；本方法需要安装谷歌浏览器。
假设你有这样一个前端项目：
当你安装好 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 调试” 旁边的齿轮来修改。
如果大家想学习前端方面的技术，我把我多年的经验分享给大家，还有一些学习资料，分享Q群：1046097531
标签：插件,Code,Server,Live,VS,调试,js,端口号 来源： https://blog.csdn.net/mashibing_web/article/details/111561498
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。