vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器

Preview on Web Server 插件 作用

此扩展提供在web服务器上执行的HTML预览。保存文件时，此扩展会自动重新加载浏览器或侧面板（实时预览功能）。您可以从上下文菜单或编辑器菜单调用这些功能。

主要特点如下:

侧面板预览（ctrl+shift+v）：打开侧面板上的HTML预览。使用此功能，您可以轻松地检查HTML、CSS和JavaScript的操作。

在浏览器上启动（ctrl+shift+l）：在默认浏览器上打开网页。您可以通过网页检查所有操作。

停止web服务器（ctrl+shift+s）：停止web服务器。此功能只能从命令选项板使用。

恢复web服务器（ctrl+shift+r）：恢复web服务器。此功能只能从命令选项板使用。

显示UI页面（ctrl+shift+u）：显示UI页面。您可以在UI页面更改选项。

Preview on Web Server 插件用法

安装好之后 就可以 使用了（ps：安装完插件 重新 启动 vd-code）

1. 鼠标 左键  找到 vscode-preview-server:Preview on side panel 或者 快捷键 Ctril+Shift+v

效果图：

 Preview on Web Server 插件 设置 浏览器

一、 系统 自带的设置

方案一：

  设置 给电脑设置默认 浏览器 win10 为例子(其他系统自行百度)

  设置(1)-应用(2)-默认应用(3)-web浏览器(4)

  (1).设置

 点击 左下角 图标 -设置

 (2)应用 

 (2)默认应用

方案二：

直接搜索 默认应用 然后 后面和上面一样

 二、插件 里设置

 方案一：

用插件自带的设置  

1. 找到插件 点击 设置图标

2. 拓展设置 找到 Browers 即可

 方案二：

找到  vs-code里的运行 打开 配置 加上这个 即可

 "previewServer.browsers": [
        "chrome",
  ]

实际上 用方案一 设置完 这个settings.json会自动加上 。所以 两个 方案 选一个就好