用 VSCode 调试网页的 JS 代码

用 VSCode 调试网页的 JS 代码

 

使用起来很方便,可能有人会说chrome devtools也能做到,但 VSCode 来调试网页代码有两个主要的好处:

  1. 在编辑器里面给代码打断点,还可以边调试边改代码。

  2. 调试 Node.js 的代码和调试网页的代码用同样的工具,经验可以复用,体验也一致。

 简单介绍下使用流程

1、点击运行

 2、选择项目添加配置

3、改成自己的配置

4、点击调试箭头

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在VSCode调试网页JS代码,可以按照以下步骤进行操作: 1. 安装VSCode:首先,确保在计算机上安装了VSCode编辑器。可以去官方网站下载并安装VSCode。 2. 安装插件:在VSCode编辑器中,打开扩展面板(可以使用快捷键Ctrl + Shift + X)。搜索并安装"Debugger for Chrome"扩展。 3. 启动调试工具:点击VSCode编辑器左侧的调试图标(或使用快捷键Ctrl + Shift + D),然后点击顶部工具栏中的绿色三角按钮,选择"Chrome"作为调试环境。 4. 配置调试选项:编辑.vscode/launch.json文件,使其具有以下配置: ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Chrome", "url": "http://localhost:8080", // 调试网页地址 "webRoot": "${workspaceFolder}" } ] } ``` 5. 启动调试会话:在VSCode编辑器中,打开要调试网页文件(可以使用快捷键Ctrl + O)。然后,点击顶部工具栏上的绿色播放按钮,以启动调试会话。 6. 调试代码:在网页中插入断点,以便在代码执行到该处时暂停。在VSCode编辑器中,可以使用F5键启动或继续调试。当代码执行到断点时,可以查看变量的值、调用堆栈和其他调试信息。 通过以上步骤,你就可以使用VSCode调试网页JS代码了。记得启动调试前,确保本地以及正在调试网页服务器在同一台机器上,并且网页的URL正确地配置在launch.json文件中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值