vscode上怎么调试html,怎么在vscode中调试js代码

6f0a974abb231fac456613e3fb0d3754.png

在左侧扩展中搜索Debugger for Chrome并点击安装

e581b7cb0c9350541caa4e3bbcf08e32.png

在自己的html工程目录下面点击f5,或者在左侧选择调试按钮

a02de00ebd5f1c191ff638759f7f81fc.png

选择下拉按钮,会有一个添加,选择chrome

f6179e642f8f9e53cfcf71d1bd1aee6e.png

之后会出现laungh.json的配置文件在自己的项目目录下面

81308f798a5c01f4918567fa6c2e70e6.png

不过对于不同的代码文件要调试的话,每次都需要修改一下配置文件

{ "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceRoot}" }, { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceRoot}" }, { "name": "Launch index.html (disable sourcemaps)", "type": "chrome", "request": "launch", "sourceMaps": false, "file": "${workspaceRoot}/jsTest/test1/test1.html" #每次需要修改这里的文件地址 } ]}

到这里就可以进行调试了,在

239bafb780a27bae0ee98e6c7d4352ac.png

中选择 Launch index.html (disable sourcemaps) 调试项,按f5调试,会出现,同时打开goole浏览器,点击

d7bf7caa8f7b56c83be4508c5c904ab0.png

即可进入调试阶段。

相关文章教程推荐:vscode教程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果要调试 JavaScript 代码,可以在 Visual Studio Code 打开文件夹或者文件,然后按下 F5 键启动调试。 在启动调试之前,你需要先配置一个调试配置文件。可以通过在编辑器打开调试面板(Ctrl+Shift+D),然后点击左上角的“创建或导入配置”按钮来创建一个新的调试配置文件。 你可以选择 JavaScript 调试器,然后按照提示填写调试配置信息,包括要调试的文件路径、启动命令等。 一旦配置完成,你就可以使用 F5 键启动调试,在代码设置断点,然后查看调试信息了。 ### 回答2: 在VSCode调试JavaScript代码可以按照以下步骤进行: 1. 打开VSCode,点击左侧面板上的调试图标(带有一个虫子的图标)或使用快捷键`Ctrl+Shift+D`来切换到调试视图。 2. 在调试视图的顶部,点击配置按钮(齿轮图标)打开调试配置。 3. 如果是首次配置,可以选择一个预设的调试环境。对于JavaScript代码,可以选择Node.js环境。如果没有预设环境,可以选择“添加配置”来手动配置。 4. 在配置文件,找到"configurations"字段,点击"Add Configuration"来添加调试配置。 5. 在弹出的选择窗口,选择“Node.js”作为调试环境。 6. 配置完成后,VSCode会自动生成一个名为"launch.json"的文件,里面包含了调试配置信息。在这个文件,可以修改调试选项,如调试的入口文件、启动参数等。 7. 在配置文件修改入口文件的路径为需要调试的JavaScript文件路径。可以使用绝对路径或者相对路径。 8. 设置断点:在要调试的JavaScript代码单击左侧的行号,会出现一个红色的圆圈,表示设置了一个断点。断点用于在调试过程暂停代码执行。 9. 开始调试:回到调试视图,点击“开始调试”按钮(绿色的播放按钮)或者使用快捷键`F5`开始调试。 10. 当代码执行到设置的断点处时,程序会在那里暂停,此时可以观察变量的值、执行堆栈等调试信息。还可以使用调试控制台输入表达式并查看结果。 11. 调试过程,可以使用调试控制台的控制按钮(如暂停、继续、单步执行等)来控制代码的执行。 12. 在调试完成后,可以点击“停止调试”按钮(红色的方块按钮)或者使用快捷键`Shift+F5`结束调试。 通过上述步骤,我们可以在VSCode方便地进行JavaScript代码调试,帮助我们更好地理解和解决代码的问题。 ### 回答3: VS Code是一个功能强大的代码编辑器,也可以使用它来调试JavaScript代码。 以下是在VS Code调试JavaScript代码的步骤: 1. 安装VS Code:首先,您需要在计算机上安装VS Code。您可以从官方网站(https://code.visualstudio.com/)下载并安装适用于您的操作系统的版本。 2. 打开文件夹:打开VS Code后,选择“文件”>“打开文件夹”选项,然后选择包含您的JavaScript代码的文件夹。 3. 创建调试配置文件:在VS Code,选择“视图”>“调试”或使用快捷键Ctrl+Shift+D打开调试视图。接下来,单击调试视图的齿轮图标,这将打开“launch.json”文件。如果没有该文件,它将提示您创建一个新的调试配置文件。 4. 配置调试器:在“launch.json”文件,您可以选择要使用的调试器。对于JavaScript代码,您可以选择“Node.js调试器或“Chrome”调试器,具体取决于您的需求。例如,如果您想在浏览器调试代码,可以选择“Chrome”调试器。 5. 启动调试会话:完成调试配置后,您可以点击调试视图的“启动调试”按钮,或使用F5键启动调试会话。 6. 设置断点:在代码选择要设置断点的行,然后运行调试会话。当程序执行到断点时,程序将停止,并允许您逐步检查代码的执行过程。 7. 查看变量和表达式:在调试会话,您可以查看当前的变量和表达式的值。您可以在调试视图的“变量”或“表达式”部分查看这些信息。 8. 继续执行代码:在检查代码后,您可以选择继续执行剩余的代码,或者使用单步调试命令逐行执行代码。 以上是在VS Code调试JavaScript代码的基本步骤。通过调试,您可以更轻松地找到和修复代码的错误,并对代码的执行过程进行深入分析。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值