VS code内置浏览器插件-Preview on Web Server

最新推荐文章于 2024-07-25 15:46:21 发布
最新推荐文章于 2024-07-25 15:46:21 发布
阅读量8.4k 收藏 8
点赞数 3
分类专栏： 笔记 Web前端 文章标签： web css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43976257/article/details/115919254
版权

VS code内置浏览器需要自己下载安装，下面我们就来看看下载安装使用VS code内置浏览器的图文教程。

  • 软件名称：

    Visual Studio Code(代码编辑器) v1.51.1 64位 中文免费绿色版

  • 软件大小：

    60.7MB

  • 更新时间：

    2020-11-13立即下载

img

1、打开VS code

img

2、点击如图所示的插件商店

img

3、点击顶部搜索栏输入“Preview on Web Server”

img

4、 搜索结果第一个就是 点击install下载

img

5、回到代码部分 ，鼠标右键单击，鼠标左键单击选择最后一行 如图所示

img

6、这样VS code内置浏览器效果就好了

img

花开如雨
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器 特征 该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on side panel (ctrl+shift+v) ：在侧面板上打开HTML预览。 使用此功能，您可以轻松检查HTML，CSS和JavaScript的操作。 Launch on browser (ctrl+shift+l) ：在默认浏览器上打开网页。 您可以通过网页检查所有操作。 Stop the web server (ctrl+shift+s) ：停止Web服务器。 此功能只能在命令面板中使用。 Resume the web server (ctrl+shift+r) ：恢复Web服务器。 此功能只能在命令面板中使用。 show UI Page (c
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-25 1万+
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
VSCode设置默认打开浏览器
最新发布
Cwcgirl的博客
07-25 630
1、选择目标浏览器打开设置，此处以谷歌浏览器为例子，chrome://settings/2、设置该浏览器为默认浏览后，vscode打开网页默认为谷歌。
Preview on Web Server 插件
初心 - 杨瑞超个人博客
07-30 6935
欢迎加入qq群(IT-程序猿-技术交流群)：757345416 Preview on Web Server 个人认为是一个非常好用的插件，他可以让你预览的web界面同步手机，浏览器，互相同步，达到非常好的测试效果。安装方法如下： 1、点击扩展 2、搜索 Preview on Web Server 3、点击安装 4、安装成功后点击重新加载 5、ok 详情见下图： 下载完成...
在vscode内启动服务，本地访问网站，preview on Web Server，设置插件
weixin_42737733的博客
11-09 1万+
关于html静态页面的地洞和访问，使用view in Browser或者Preview on Web Server。 下载server 步骤 在extensions插件扩展中，搜索server 完成之后重启vscode 在要启动的html页面右键 选择vscode-preview-server:Launch on Browser 自动打开网站并访问页面 配置 在插件...
VS Code插件开发文档-中文版.zip
02-28
`VS-Code-Extension-Doc-ZH_master.zip`可能包含多个示例插件，这些示例展示了如何实现特定功能，比如自定义编辑器小部件、集成外部服务等。学习这些示例可以帮助开发者快速掌握插件开发技巧。 9. **扩展开发工具*...
code-server-4.11.0-arm64.deb安装包
04-13
vscode的Linux端，可以直接浏览器访问IP，在网页中使用VSCode code-server安装包，arm64版本deb包，安装方式: sudo dpkg -i code-server_4.11.0_arm64.deb
react-code-preview:React的代码编辑预览
04-12
npm install @uiw/react-code-preview --save 用法 import React from 'react' ; import { Button } from 'uiw' ; import CodePreview from '@uiw/react-code-preview' ; const code = `import { Button, Divider, ...
vue-doc-preview:Vue文档预览组件
05-06
vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。 英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-previewornpm i vue-doc-preview --save然后，将此组件导入.vue文件。 ...
西门子S7-1200;S7-1500PLC webserver例子代码 TIAV15
12-08
在这个特定的压缩包中，包含了一个名为"68011496_Examples_for_S7WebServer_CODE_v21"的文件，这表明它提供了有关如何在这些PLC上配置和使用Web服务器功能的示例代码。TIA Portal V15是西门子的全集成自动化（ ...
vscode保存代码，浏览器自动刷新页面
y1238r的博客
08-18 1万+
介绍vscode编辑器，保存代码，自动刷新浏览器页面的2种扩展方式。即Live Server和Preview on Web Server扩展。
live Server配置之open-with-Live-Server 无法打开浏览器改用Preview on Web Server插件正常打开浏览器
为梦而生
03-28 2741
live Server配置之open-with-Live-Server 无法打开浏览器改用Preview on Web Server插件正常打开浏览器Preview on Web Server插件安装配置 插件Preview on Web Server的端口号 Preview on Web Server插件安装 参考： https://blog.csdn.net/p15097962069/article/details/108626801 配置 插件Preview on Web Server的端口号 添加
VS运行内置浏览器
ssss39的博客
11-17 1662
点击如图所示的插件商店， 搜索“Preview on Web Server” 并安装。在代码点击鼠标“右键”，选择最下面一项。就可以看到内置浏览器的效果了。
Vscode preview on Web Server 的一个坑
buhdda 的地盘
06-27 9746
Vscode preview on Web Server 同步问题
badboy更改内置浏览器chrome_VS Code如何内置Chrome浏览器？超简单
weixin_39804641的博客
11-21 1855
我们在使用VScode开发项目的时候，需要经常在编辑器和浏览器之间来回切换来查看页面预览效果，开发效率不是那么的高！今天就来分享下如何在VScode中实时预览html界面或vue页面。VScode预览vue页面VScode预览HTML页面不得不感叹vscode插件功能真是强大！vscode预览html1、HTML Preview一个很不错的vscode预览html页面插件在VSCode扩展搜索“H...
VSCode入门教程(2.0)
张晴UU的博客
05-27 1240
很多小伙伴们只是听说VSCode有多牛……看了这篇文章你会相信是真的！
我的第一个Vue程序
Lovnx
07-09 3273
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
在vs code上下载json-server怎么下
07-11
要在VS Code上下载并安装json-server，你需要执行以下步骤： 1. 打开VS Code并进入扩展视图。你可以通过点击左侧的方块图标或使用快捷键`Ctrl+Shift+X`（Windows和Linux）或`Cmd+Shift+X`（macOS）来打开。 2. 在扩展视图的搜索框中输入“json-server”。你将看到与json-server相关的扩展。 3. 选择适合你的json-server扩展，并点击“安装”按钮。等待安装完成。 4. 安装完成后，你可以在左侧的活动栏中找到json-server图标。点击它以启动json-server。 5. 在弹出的终端中，你可以输入命令来启动json-server并指定你的JSON文件作为数据源。例如，使用以下命令启动json-server并将名为`db.json`的文件作为数据源： ``` json-server --watch db.json ``` 这将启动一个本地服务器，它将提供一个RESTful API，以模拟一个真实的后端服务。 现在你已经成功在VS Code上安装了json-server，并可以使用它来模拟后端服务。如果需要进一步帮助，请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值