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)
扫描二维码关注公众号,回复:
14456313 查看本文章
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会自动加上 。所以 两个 方案 选一个就好