[学而时习] VSCode调试WEB配置

SeekCode
1,023 阅读4分钟

最终效果

在VSCode编辑器中使用F5打开带有http://localhost/...的网络页面。可以在VSCode编辑器中对代码进行调试，并且避免代码调试过程中出现CORS错误。

配置概述

原有launch.json配置直接启动debug方法失效，在VSCode官方网站Docs上的Debugging内容可以看到已经没有相关的配置说明，本文最终采用Live-Server插件进行配置。

工具准备

  1. VSCode软件，下载地址。
  2. 一个用于测试的项目。
  3. VSCode 上安装插件：Live-Server

配置流程

  1. 用VSCode装载项目

  2. 按F5，出现选择运行环境窗口

  1. 出现能运行的界面，服务是以本地文件访问的方式运行，而不是网络服务的形式运行。

  1. 点击没有配置的下拉按钮，可以看到如下图所示情况，可以选择红色区域内两个选项，其中工作区选选项相当于给VSCode 工作区中的所有文件进行统一配置。而SayHello选项是所在文件目录的项目进行配置，选择此项进行添加配置操作。

  2. 点击配置项为Chrome进行配置，然后会出现.vscode文件夹和launch.json文件。此时配置使项目以本地文件访问的形式运行，这并不是理想效果。

  1. 此时需要对launch.json文件进行修改使它满足需求。
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Open sayhello.html",
            "url": "http://localhost:8080/${fileBasename}",
            "webRoot": "${workspaceFolder}", 
            "sourceMaps": true
          // "webRoot": "${workspaceFolder}/wwwroot" 此语句表示：项目以独立服务启动，不能进行调试
        }
    ]
}

  1. 修改后本地服务是没有办法打开的，结果见下图。并且还报出crbug/1173575, non-JS module files deprecated.警告。原因是使用了浏览器默认限制的非安全端口号，出于安全考虑，都会设置默认的非安全不能访问的端口。网络上有两种解决方案：一是修改网络模式，二是修改Port端口。这两个方法测试后都是没有效的。

  2. 关闭代码运行，启动Live-Server插件，此插件运行的位置在底部状态栏上，如果插件安装过多需要仔细找一下才能看到，如下图。启动后代码就会以网络服务方式运行了。启动前在设置里面找到Live Server Config选项，使用setting.json方式进行配置，添加或修改以下代码

{
    "liveServer.settings.port": 5500,
    "liveServer.settings.CustomBrowser" : "chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.NoBrowser" : true, //启动Live-Server时候不要启动浏览器
    "liveServer.settings.ignoreFiles" : [
            ".vscode/**",
            "**/*.scss",
            "**/*.sass"
    ]
}

Live-Server启动按钮：

  1. 将launch.json中url的值进行修改，修改如下
"url": "http://localhost:5500" //端口号，要与Live-Server的端口号一致
  1. 修改完成以后，我们按F5运行。最终效果图如下

相关参数

launch.json配置参数中文解释，参考此篇文章VSCode launch.json配置详解

Live-Server配置参数：

  • liveServer.settings.port :自定义Live-Server端口号，设置为0，则会产生随机端口号，默认值5500
  • liveServer.settings.root :服务器根目录，默认为当前工作区
  • liveServer.settings.CustomBrowser :自定义要访问的浏览器
  • liveServer.settings.AdvanceCustomBrowserCmdLine :设置浏览器启动参数
  • liveServer.settings.ChromeDebuggingAttachment :启动 Live Server 并从调试窗口中选择“附加到 Chrome”以开始调试，默认为false
  • liveServer.settings.NoBrowser :以不打开浏览器的方式启动服务，默认为false
  • liveServer.settings.ignoreFiles :忽略配置文件列表
  • liveServer.settings.donotShowInfoMsg :不显示log信息，默认为false
  • liveServer.settings.host :设置主机地址，默认127.0.0.1
  • liveServer.settings.donotVerifyTags :HTML 中缺少 body 或 head 或其他支持标记，则关闭提示警告消息，默认值false
  • liveServer.settings.https :开启https协议，示例：
"liveServer.settings.https": {
    "enable": false, //https开关
    "cert": "C:\https\server.cert", //绝对路径
    "key": "C:\https\server.key", //绝对路径
    "passphrase": "12345"
},
  • liveServer.settings.proxy :开启代理，示例：
 "liveServer.settings.proxy": {
    "enable": false, //代理开关.
    "baseUri": "/", //代理起始位置. 
    "proxyUri": "http://localhost/php/" //实际的url.
},
  • liveServer.settings.useWebExt :如果为真，Live Reload将完全由 Live Server Web Extension 控制。 无论 HTML 是否有 <body>标签，Live Reload都适用于每个文件。默认值:false
  • liveServer.settings.fullReload :默认情况下，Live Server 会在不完全重新加载浏览器的情况下注入 CSS 更改。 您可以通过将此设置设为 true 来更改此行为。
  • liveServer.settings.wait :重新加载前的延迟时间，单位为毫秒，默认值:100
  • liveServer.settings.mount :将目录挂载到路由，示例：
{
    "liveServer.settings.mount": [           ["/", "/path1"],
        ["/", "/path2"],
        ["/root", "/dist"]
    ]
}
  • liveServer.settings.useLocalIp: 使用当前的IP作为主机地址，默认值false
  • liveServer.settings.file :进入点文件的路径， 对SPA有用
  • liveServer.settings.multiRootWorkspaceName :当您处于多根工作区时，这是服务器的入口点。

参考文章

Deprecated Debugger for Chrome

Debugging

Visual Studio Code debugger with Chrome refused to connect to localhost

vscode-live-server/settings-docs

vscode调试html页面，及配置说明

avatar
文章
阅读
粉丝