欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VSCode调试Html网页(使用本机 Chrome调试)

程序员文章站 2022-07-14 14:50:27
...

VSCode调试Html网页(使用本机 Chrome调试),调试js,lanch.json配置

第一步:在VSCode中打开你的代码目录

第二步:Debug->Start Debugging->选择ChromeVSCode调试Html网页(使用本机 Chrome调试)

VSCode调试Html网页(使用本机 Chrome调试)

VSCode调试Html网页(使用本机 Chrome调试)

第三步:编辑launch.json如下:

VSCode调试Html网页(使用本机 Chrome调试)

VSCode调试Html网页(使用本机 Chrome调试)

代码如下:

{
    // 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": [
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html?debug=1",
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "runtimeArgs": ["--allow-file-access-from-files","--autoplay-policy=0"],
            "sourceMaps": false,
            "webRoot": "${workspaceRoot}",
            "userDataDir":"${tmpdir}",
            "port":5433
        }
    ]
}

第四步:选择使用本机Chrome调试

VSCode调试Html网页(使用本机 Chrome调试)

第五步:设置断点,按F5就可以*地玩耍了

VSCode调试Html网页(使用本机 Chrome调试)

配置说明:

配置说明:

${workspaceRoot} VS Code当前打开的文件夹

${file} 当前打开的文件

${relativeFile} 相对于workspaceRoot的相对路径

${fileBasename} 当前打开文件的文件名

${fileDirname} 所在的文件夹,是绝对路径

${fileExtname} 当前打开文件的拓展名,如.json