vscode 调试_如何使用VSCode调试JS？

2024-05-13 19:08:34

更多精彩，请点击上方蓝字关注我们！

序言

做前端开发的朋友经常需要使用Visual Studio Code编辑代码，很多朋友就想在VSCode调试JS代码，下面我们就介绍下如何配置操作。

一、环境准备

首先安装好VSCode，准备好一个JS项目，在VSCode中安装插件Debugger for Chrome (如下图操作搜索安装即可)。

二、修改配置文件

1. 使用VSCode打开项目

没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试，如下：

然后，使用VSCode打开上述项目，如下：

2. 设置断点

按F5键，在弹出的下拉列表中选择Chrome。

然后打开launch.json配置文件如下：

在configurations内部添加如下内容：

{

"name": "使用本机 Chrome 调试",

"type": "chrome",

"request": "launch",

"file": "${workspaceRoot}/index.html",

// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html

"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径

"sourceMaps": true,

"webRoot": "${workspaceRoot}",

// "preLaunchTask":"build",

"userDataDir":"${tmpdir}",

"port":5433

}

添加后，内容如下：

3. 更改调试方式

4. 调试

如下图，按F5，点击相应的按钮或按响应快捷键即可控制断点执行。

最后

还有问题的朋友，欢迎在评论区给我留言。

vscode 调试_如何使用VSCode调试JS？相关推荐

javascript调试_如何提高JavaScript调试技能
javascript调试 Almost all software developers who have written even a few lines of code for the Web ha ...
vscode 翻译_前端新手 VSCode 入门指南
目录主题推荐图标主题常用插件高效的快捷键个人偏好设置「一」主题推荐 Dracula 插件名:Dracula Official Dark theme for Visual Studio Co ...
android 系统gpu 调试_[RK3288][Android6.0] 调试笔记 --- 读取当前DDR和GPU频率方法
Platform: Rockchip OS: Android 6.0 Kernel: 3.10.92 ddr和gpu的clock都受dvfs模块管控, 所以只要执行: root@rk3288:/ # ...
vscode 调试参数_如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 ...
vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)
文章目录 declaration vscode 对于javascript的支持环境使用node.js调试纯js代码使用浏览器调试试验代码 Note! edge浏览器独立调试编辑并保存代码窗格 ...
VSCode插件、快捷键及代码调试技巧
vscode基本使用快捷键 Ctrl + Shift + P 打开命令面板 Ctrl + Shift + ~ 打开vscode的终端 F5 开始调试 F12 Go to Define Ctrl + ...
分享一些 VsCode 各场景相关的高级调试与使用技巧
VsCode自从诞生以来,以其各自优异的特性迅速走红.尤其是对于前端开发小伙伴来说,几乎成为必不可少的开发工具.所以,熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增. 本文将 ...
如何在vscode上调试php,如何用vscode进行单步调试
快捷键Ctrl + ` 打开默认终端; Ctrl + Shift + ` 新建新的终端; Ctrl + Shift + Y 打开调试控制台,然后再自行切换终端选项; ps: ` 在键盘数字1的左边. ...
vscode之python框架flask 断点调试的配置（官方推荐的配置，务必注意端口）
flask的配置务必注意端口,默认端口5000如果被占用,你访问的数据无法返回,请更换端口! 更多细节配置,看官方文档,最权威:Debugging configurations for Python ...

最新文章

热门文章