debugger for chrome 配置(调试js)

本文介绍如何使用VSCode进行JS调试,包括配置方法和利用插件实现本地调试,效果接近后端,适用于前端开发者进阶学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vscode真的什么插件都可以实现一些意想不到的功能呀,

调试js 是我们 进阶的一个必要途径,

如何调试js 呢, 在Chrome中那就不用说了, 那在vscode中呢,
这就需要我们借助插件来实现了, 但是插件,我们还需要配置好,才能在本地调试, 跟后端的几乎没有差别的效果,


在vscode的 run点击下拉箭头, 选择add ,即可添加配置

  • 配置如下:

    1. 一个需要在html中调试的,
    2. 一个直接调试js文件的
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
     
        {
            "type": "chrome",
            "request": "launch",  // 可以是attach和launch
            "name": "调试 Chrome",  // 此项配置的名字,显示在调试页的配置选择下拉框中。
            "url": "http://localhost:8088",  // chrome 自动启动时打开的网址(你开发环境的部署地址)。
            "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(正常情况下就是项目根目录)。
            "sourceMaps": true
        },
        {
            "name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开    
            "type": "chrome",    
            "request": "launch",    
            "url": "${file}",    
            "sourceMaps": true,    
            "webRoot": "${workspaceRoot}"    
        },    
        {    
            "name": "nodeLauch", //单独调试js,即可以直接运行js    
            "type": "node",    
            "request": "launch",    
            "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件    
            "stopOnEntry": false,    
            "args": [],    
            "cwd": "${workspaceRoot}",    
            "runtimeExecutable": null,    
            "runtimeArgs": [    
                "--nolazy"    
            ],    
            "env": {    
                "NODE_ENV": "development"    
            },    
            "console": "internalConsole",    
            "preLaunchTask": "",    
            "sourceMaps": false,    
            "outDir": null    
        } 
    ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值