怎样设置vscode默认的浏览器（vscode如何设置默认浏览器）

我们在使用VScode开发项目的时候，需要经常在编辑器和浏览器之间来回切换来查看页面预览效果，开发效率不是那么的高！今天就来分享下如何在VScode中实时预览html界面或vue页面。

   

VScode预览vue页面

   

VScode预览HTML页面

不得不感叹vscode插件功能真是强大！

vscode预览html

1、HTML Preview

一个很不错的vscode预览html页面插件

在VSCode扩展搜索“HTML Preview”，点击安装，通过如下快捷键预览页面。

  • 打开浏览器预览 - ctrl shift v or cmd shift v
  • 编辑器侧边预览 - ctrl k v or cmd k v

2、Live Server

一个超赞的微型http服务器（相当于使用nodejs的http-server ）

在VSCode扩展搜索“Live Server”，点击安装

打开命令面板（ F1 或 Ctrl Shift P 或 Shift ⌘ P），输入“ Live Server: Open With Live Server ”开启服务，“ Live Server: Stop Live Server ” 关闭服务。

3、Preview on Web Server

在VSCode扩展中搜索“Preview on Web Server”，点击安装

  • 编辑器侧边预览 - ctrl shift v
  • 外部浏览器预览 - ctrl shift l
  • 重启web服务 - ctrl shift r
  • 关闭web服务 - ctrl shift s
  • 展示UI操作面板 - ctrl shift u

如下图：还支持鼠标右键快捷打开

vscode预览vue|react|angular

Browser Preview | 让你能够在VSCode中打开一个真实的浏览器进行预览并调试。

  • 在VSCode扩展中搜索“Browser Preview”，点击安装

安装好 Browser Preview 插件后，左侧边栏会看到一个新增的图标。点击这个图标，就能在 VS Code 里打开一个浏览器，输入网址即可调试vue/react/angular等页面。

使用建议

按需安装Visual Studio Code插件，建议控制安装数量在三十个插件以内，否则会影响Visual Studio Code使用性能。

❤️ 最后

如果觉得这篇内容对你有帮助，点个「关注/转发」，让更多人也能看到你的分享！

赞 (0)

相关推荐

  • 华为手机中把百度浏览器设置为默认的浏览器如何操作

    华为手机中把百度浏览器设置为默认的浏览器如何操作

    有的小伙伴在使用华为手机时,想要将百度浏览器设置为默认的浏览器,但是却不知道该如何进行操作,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,点击并打开设置选项.2. 第二步,来到设置页面后,点击 ...

  • Mac电脑怎么将Firefox设置为默认Web浏览器

    Mac电脑怎么将Firefox设置为默认Web浏览器

    现在有越来越多人在使用Mac电脑,有些新用户不知道怎么将Firefox设置为默认Web浏览器,接下来小编就给大家介绍一下具体的操作步骤.方法11. 首先第一步根据下图箭头所指,找到并点击[系统偏好设置 ...

  • 怎样将IE8设置为默认的浏览器

    步骤/方法 01 如何将IE8设置为默认的浏览器呢?这里我们首先使用360软件管家进行设置,如图所示:第一种方法: 02 点击设置默认软件,开始设置: 03 第二种方法:运行IE8,点击其工具栏中的& ...

  • 怎么将360浏览器设置为默认的浏览器

    多多我喜欢用360浏览器打开QQ空间,担是它总是用QQ浏览器打开,不喜欢,多多我就将360设置为了默认浏览器 操作方法 01 点击360浏览器,打开网页 02 然后在右上角的菜单栏中.点击.工具. 0 ...

  • 怎么将浏览器设置为默认的浏览器

    怎么将浏览器设置为默认浏览器 操作方法 01 首先打开浏览器,发现现在还没有工具菜单栏,将光标移到浏览器上边栏,单击鼠标右键 02 选择"菜单栏"选择菜单栏 03 现在就出现了菜单 ...

  • 将酷狗设置为默认的音乐播放器设置步骤

    我们首先打开酷狗音乐盒。 然后点击主菜单→设置选项，如图： ​然后在常规选项卡中勾选使用酷狗浏览器作为默认播放器的选项，最后点击确定按钮即可，如图所示：

  • UC字体设置在哪里 UC浏览器大字体设置方法

    小米Note在发布时特别强调了"大字体模式",方便近视人群和上了年纪的老朋友,其实在UC浏览器中,你可以通过设置实现"大字体模式". 假如你还不知道的话,就来了 ...

  • 手机微信中默认的浏览器怎么设置修改

    手机微信中默认的浏览器怎么设置修改

    今天给大家介绍一下手机微信中默认的浏览器怎么设置修改的具体操作步骤.1. 打开手机上的微信,进入主页面后,点击页面底部的发现选项.2. 进入发现页面后,点击上方的[朋友圈]选项.3. 在打开的朋友圈页 ...

  • 怎么设置Mac电脑默认网页浏览器

    怎么设置Mac电脑默认网页浏览器

    现在有很多人在使用Mac电脑,有些用户想知道怎么设置电脑默认网页浏览器,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,点击左上角[苹果]图标.2. 第二步在弹出 ...

  • 如何设置Mac电脑默认网页浏览器

    如何设置Mac电脑默认网页浏览器

    现在有很多人在使用Mac电脑,有些新用户不知道如何设置默认网页浏览器,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,点击左上角[苹果]图标.2. 第二步在弹出的 ...