程序员经验分享-hwhale

在VS code中打开网页预览

2023-05-16

在VS code中打开网页预览

在平时进行前端设计的时候，你是否会因为无法实时观察到网页的变化而苦恼，每一次都要重新打开html文件的过程过于繁琐，现在就有一种新的方式能够让你在coding的时候实时观察到网页效果的变化。

Live Server

我们首先需要安装live server插件
在这里插入图片描述

安装完成后，我们右键你创建的html文件会有一个open with live server选项

点击那个选项就会使用默认浏览器打开你的html文件

在这里插入图片描述

打开文件效果：

在这里插入图片描述

但是这样你就需要保持这个浏览器窗口一直在你编辑器的上方，是不是很麻烦？那么接下来的步骤就可以使得其变成编辑器中的一部分。

Browser Preview

VS code插件中悉心地提供了预览插件，叫做Browser Preview。我们下载这个插件

在这里插入图片描述

然后我们点击左下角的齿轮（设计）按钮，选择settings

在这里插入图片描述

在左边的Extensions一栏中找到Live Server Config

在这里插入图片描述

将其中的Use Browser Preview选项勾选，这样它就会默认使用Browser Preview而不是默认浏览器。

在这里插入图片描述

之后我们按照前面一样的操作右键html文件，选择open with live server

在这里插入图片描述

我们就会发现，现在他就会默认开双列，然后在右列使用了Browser Preview来展示我们的网页。

在这里插入图片描述

这样我们就可以一边coding，一边看到网页的变化了。

Hint

实际上，假如你使用codepen进行编程，那么他默认会在下方渲染他的前端代码，你也可以实时观察到网页的变化。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Code

中打开网页预览

在VS code中打开网页预览 的相关文章

随机推荐

  • jsoncpp linux平台编译和arm移植

    0x00 下载 http sourceforge net projects jsoncpp 或者 http download csdn net detail chinaeran 8631141 0x01 Linux平台编译 安装 scons

  • 摩斯密码解码脚本

    摩斯密码解码脚本 解题思路 0010 0100 01 110 1111011 11 11111 010 000 0 001101 1010 111 100 0 001101 01111 000 001101 00 10 1 0 010 0

  • php匹配关键字并跳转页面

    php匹配关键字跳转页面 strstr函数搜索要从目标字符串中搜索的字符串 xff1b strstr函数仅用于检查字符串是否存在 xff1b strstr函数的用法如下 lt php b 61 39 or 39 name 61 GET 39

  • docker常见命令小结

    docker常见命令小结 常见命令 docker ps 查看正在运行的容器 docker exec it 264bb068855e bin bash 进入容器 xff0c 并作出修改 docker commit 3bd0eef03413 l

  • 前端html文件下载，同源与异源下载

    属性说明download下载的资源的名称target打开该连接的方式 self blank href资源的地址 本地 远程地址 a标签跳转 lt DOCTYPE html gt lt html gt lt head gt lt meta c

  • Python图像(字母数字)识别

    本文只针对数字或字母验证码识别 准备工具 tesseract ocr w64 setup v4 1 0 20190314 exepip install pytesseractpip install pillow中文包 tesseract o

  • Python习题

    1 题目 xff1a 编写一个程序 xff0c 使用for循环输出0 10之间的整数 xff1b 代码 xff1a span class token keyword for span i span class token keyword i

  • 面向对象模块和包

    文章目录 1 1 模块1 2 模块的使用2 包 1 1 模块 参考链接 xff1a Python 面向对象 模块和包 来源 xff1a CSDN Python面向对象 模块和包 来源 xff1a CSDN 概念 xff1a 每一个以py为拓

  • SUNDIALS库的编译和使用

    SUNDIALS库的编译和使用 1 简介 SUNDIALS SUite of Nonlinear and DIfferential ALgebraic equation Solvers 是由美国劳伦斯利福摩尔国立实验室 xff08 Lawr

  • 【ing】在Linux虚拟机上安装Sundials库（图文）

    1 Sundials库下载 Sundials下载地址 2 具体步骤 2 1 下载sundials 2 2 0 本次尝试选择sundials 2 2 0进行安装 Sundials文件内容如下 xff1a 2 2 创建安装目录 安装目录名称为

  • 基于docker部署Prometheus

    文章目录 基于Docker搭建Prometheusgitee 介绍Prometheus一 安装运行Prometheus docker版 部署Prometheus1 安装docker联网状态下阿里云离线安装包下载2 下载镜像包3 启动node

  • 程序设计思维与实践 Week11 作业 E 选做题11-1 东东与 ATM

    题目描述 xff1a 一家银行计划安装一台用于提取现金的机器 机器能够按要求的现金量发送适当的账单 机器使用正好N种不同的面额钞票 xff0c 例如D k xff0c k 61 1 2 N xff0c 并且对于每种面额D k xff0c 机

  • kubectl edit

    文章目录 kubectl edit官方文档语法示例 kubectl edit 官方文档 使用默认编辑器 编辑服务器上定义的资源 使用命令行工具获取的任何资源都可以使用edit命令编辑 edit命令会打开使用KUBE EDITOR xff0c

  • kubectl exec

    文章目录 kubectl exec通过bash获得pod中某个容器的TTY xff0c 相当于登录容器 命令行 创建一个test文件 xff1a kubectl exec exec命令同样类似于docker的exec命令 xff0c 为在一

  • kubectl describe

    文章目录 describe语法选项 示例描述一个node详细信息描述一个pod描述calico yaml中的资源类型和名称指定的pod描述所有的pod描述所有包含label k8s app 61 calico kube controller

  • k8s自动化安装脚本（kubeadm-1.21.1）

    文章目录 介绍软件架构安装教程更新内容2023 02 102022 10 202022 08 06准备部署包 操作步骤环境准备结构备注 解压部署包修改host文件初始化环境验证ansible配置 安装k8s集群登录master的节点添加no

  • Shell——docker启动yapi

    文章目录 脚本简介脚本注解执行方式脚本内容 脚本简介 基于运维统一脚本中 17 平台管理下的Yapi管理平台部署系统版本Centos7docker环境 脚本注解 该脚本快速部署yapi平台 xff0c 已通过docker commit把对应

  • Shell——查看基础信息脚本

    文章目录 脚本简介脚本注解安装方式执行方式执行结果 脚本内容新版本旧版本 脚本简介 基于运维统一脚本中 xff0c 19 脚本安装下的检查服务器脚本安装使用yum安装 yum仓库 xff0c 系统版本Centos7 脚本注解 该脚本为了快速

  • k8s自动化安装脚本（kubeadm-1.23.7）

    文章目录 介绍软件架构版本介绍更新内容2023 02 192023 02 152023 02 142023 02 102022 10 202022 08 06准备部署包 操作步骤环境准备结构备注 解压部署包修改host文件脚本使用方式初始化

  • 在VS code中打开网页预览

    在VS code中打开网页预览 在平时进行前端设计的时候 xff0c 你是否会因为无法实时观察到网页的变化而苦恼 xff0c 每一次都要重新打开html文件的过程过于繁琐 xff0c 现在就有一种新的方式能够让你在coding的时候实时观察

热门标签