VS Code中内嵌的浏览器预览插件Browser Preview

最新推荐文章于 2024-10-18 12:56:07 发布
最新推荐文章于 2024-10-18 12:56:07 发布
阅读量8.7k 收藏 9
点赞数 6
分类专栏： vscode 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiffany_kim/article/details/117740125
版权

如果你没有双屏的显示器，又不想来回切换窗口，那么直接在VSCode里进行预览，那简直就是太方便啦~

效果预览：
在这里插入图片描述
安装Browser Preview

打开插件管理，然后搜索Browser Preview插件，直接进行安装。
在这里插入图片描述
安装完成后，在Bar上多出一个图标，点击图标就可以在VSCode里打开浏览器了。
在这里插入图片描述
修改默认打开网址

打开vscode —— 文件 —— 首选项 —— 设置 —— 用户 —— 扩展 —— Browser-preview: Start Url 填入默认打开的地址就可以了。
（打开用户后直接进行搜索 browser preview 也可以。）
在这里插入图片描述

这样就可以啦~~

tiffany_kim
关注
专栏目录
VSCode打造成为开发神器-插件篇
qsj0606的博客
02-27 224
VSCode打造成为开发神器-插件篇 1. 编程语言类 下面的几个插件根据情况安装。 C/C++ Dart dart-import Go Go Doc ** Python** 2. 代码风格类 Beautify： 格式化代码插件，不过现在更推荐使用Prettier。 Prettier - Code formatter： 当前前端最火的格式化代码插件。 Better Align： 对齐代码。 Better Comments： 更好的注释提示插件，推荐使用。 change-case： 驼峰命名、下划线命名等等命
iOS 开发库（iOS Developer Library）
太阳火神的美丽人生
11-06 6933
iOS 开发库（iOS Developer Library）
VSCode Browser Preview 安装和配置指南
最新发布
gitblog_01245的博客
10-18 968
VSCode Browser Preview 安装和配置指南 vscode-browser-preview A real browser preview inside your editor that you can debug. ...
browser:VS Code的嵌入式浏览器
05-17
嵌入式浏览器 VS Code的嵌入式浏览器。 其他语言： 特征 在您的VS Code内部打开一个浏览器。 像这样（另一边是Google搜索）： 像这样（在另一侧查找API文档）： 或以下内容（在另一端预览本地网页）： 完整功能清单 在VS代码中打开任何HTTP / HTTPS URL。 导航，前进，后退，刷新均可用。 在本地记录历史记录，并在输入地址时自动完成。 VS Code重新启动后，恢复打开的浏览器面板。 安装 无需额外的要求，。 用法 只需在键入Open Browser 。 所有命令 Open Browser ：在另一侧打开嵌入式浏览器。 Close Browser ：立即关闭嵌入式浏览器。 Clear Hisotry ：清除本地历史记录。 已知的问题 随时，非常欢迎您提供意见。 发行说明 1.0.0 浏览器的初始版本。 1.0.1 重命名为唯一的Embed
VS code 内置浏览器实时预览插件
Xupingping666的博客
09-22 408
插件 Live Preview。
vscode-browser-preview：编辑器中的真实浏览器预览，您可以对其进行调试
02-26
VS代码的浏览器预览 您可以在编辑器中进行调试的真实浏览器预览。 VS Code的Browser Preview（浏览器预览）使您可以在编辑器中打开可以调试的真实浏览器预览。 浏览器预览由驱动，并通过在新进程中启动无头Chromium实例来工作。 可以是Google Chrome或Microsoft Edge。 这提供了一种在VS Code中呈现Web内容的安全方法，并启用了有趣的功能，例如编辑器内调试等！ 入门 从扩展 单击左侧边栏中的新“浏览器预览”按钮，或运行命令Browser View: Open Preview 确保您的计算机上安装了Google Chrome。 特征 VS Code中的浏览器预览（由提供支持）。 能够同时打开多个预览。 可调试的。 启动URL，并将附加到浏览器视图实例，然后在VS Code中进行调试。 通过chrome://inspect附加Chrom
vscode预览html插件,VSCode插件推荐-VSCode内嵌浏览器插件-Browser Preview
weixin_32647107的博客
06-17 8620
很多小伙伴在开发html页面的时候觉得很不方便。因为显示屏的大小是有限的，只能展示代码或者浏览器窗口的其中一种，哪怕用上了LiveServer，也需要一直切换页面，接下来小编带来的这款插件，可以在VSCode内打开一个浏览器窗口。接下来就让小编来带你了解一下VSCode内嵌浏览器插件-BrowserPreview吧！Browser Preview介绍Browser Preview可以让用户在VS...
VS 插件
weixin_33910759的博客
05-19 150
1.工具-选项-字体和颜色：在项背景点击自定义-色调85 饱和度123 亮度205， 字体则是选择Calibri，个人认为看起来非常舒服。前景字体我选择了偏紫色，会很搭配背景浅绿色以及不会和关键字颜色搞混。背景颜色调成RGB(210,235,215) 可以使用Quick Open File for Visual Studio 2010 插件 Quick Open File for Visua...
Vscode——内置浏览器
qq812457115的博客
05-05 9433
1. 安装插件 Live Server Browser Preview 2. 设置 首选项 > 设置 > 输入Use Browser Preview 勾选
Vscode 如何使用内置浏览器?
薛定谔的猫
07-06 3253
本人使用HBuilderX时使用此内置浏览器使用起来十分不方便（可能版本问题）实际上游览器的结果为通过网上寻找方法依旧没有办法解决，因此就换到VScode上来编写代码。VScode的插件多的优势，我很快就找到了一款内置浏览器插件Browser Preview使用方法就是...
vue中引入TinyMCE实现富文本编辑器
小球的博客
02-28 3621
vue tinymce 富文本编辑器
browser-preview::magnifying_glass_tilted_left: 在浏览器中打开 Sketch 画板的预览
07-24
浏览器预览 在浏览器中快速预览画板。 此插件在浏览器中以2x分辨率预览选定的画板，使用画板背景颜色作为网站背景颜色。 画板在浏览器中水平居中。 安装 :person_running: 素描赛跑者 转到运行程序中的install选项卡并搜索Browser Preview 。 手动安装 下载文件（第一个带有包图标的文件）并解压。 双击browser-preview.sketchplugin包 用法 只需选择一个或多个画板/图层，然后按cmd + shift + p或从插件菜单中选择Preview Artboard 。 您可以使用默认的 mac 键盘设置自定义快捷方式，并将草图的任何快捷方式分配给Preview Artboard 。 如果您希望屏幕与浏览器窗口的左侧对齐，只需在画板名称后缀:left 。 例如，“桌面”将是“桌面：左”。 自定义浏览器 使用设置，您可以选择用于预览画板的浏览器。
browser-preview：default在默认浏览器中预览html文件
02-01
打开浏览器预览 在默认浏览器中预览文件。 上下文菜单 在上下文菜单中选择“ Preview In Default Browser中Preview In Default Browser中预览文件↓ 命令 按Ctrl+Shift+P打开命令列表。 选择“ Preview In Default Browser 。 键绑定 在Win中按Ctrl+F1 ，在Mac中按Cmd+F1 。 如果您认为这很有用，可以给我们，您的支持是我们的动力 :grinning_face: 执照 开放浏览器预览版是在下发布的。
vscode-browse-lite：in VS Code中的嵌入式浏览器
03-03
浏览精简版 VS Code中的嵌入式浏览器 由从 :high_voltage: 页面刷新更快 :last_quarter_moon: 暗模式感知 :artist_palette: 主题感知UI :lady_beetle: 内置devtools支持 :electric_plug: 可扩展的动作 :desktop_computer: 在系统浏览器中重新打开 :check_mark_button: 无遥测 运行“ Browse Lite: Open...命令以启动浏览器 此扩展最初是为构建的。 赞助商 该项目是我的一部分。 执照 麻省理工学院-版权所有（c）2019 Kenneth Auchenberg 麻省理工学院-版权所有（c）2021 Anthony Fu
基于vs的火狐浏览器插件开发
03-25
怎么基于vs2008发开火狐的浏览器插件
python bokeh_使用Bokeh在Python中进行交互式数据可视化
cumei1658的博客
07-13 4406
python bokehBokeh prides itself on being a library for interactive data visualization. Bokeh以成为交互式数据可视化的库而自豪。 Unlike popular counterparts in the Python visualization space, like Matplotlib and Seab...
FckEditor中文配置手册详细说明
zsczyhua的专栏
02-18 1034
javascript调用方式： －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ var FCKeditor = new FCKeditor(”content”); oFCKeditor.BasePath = “FCKeditor/”; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = “Default”; oFCKe
Vscode——vscode实时预览httml网页插件—live server
qq_43201350的博客
01-10 2105
Vscode——vscode实时预览httml网页插件—live server
推荐开源项目：VSCode Browser Preview - 在VSCode中实时预览Web页面
gitblog_00002的博客
03-21 657
推荐开源项目：VSCode Browser Preview - 在VSCode中实时预览Web页面 项目地址:https://gitcode.com/gh_mirrors/vs/vscode-browser-preview 在前端开发过程中，频繁地刷新浏览器以查看代码更改的效果是常态，但这样的流程可能会打断你的编码节奏。 是一个强大的Visual Studio Code扩展，它允许你在IDE内直接...
vs code插件在浏览器中打开
05-12
你可以使用 "Live Server" 插件来在浏览器中打开 VS Code 中的 HTML 文件。安装完插件后，在 HTML 文件上右键，选择 "Open with Live Server"，就会在浏览器中打开该 HTML 文件。另外，你也可以手动在浏览器中打开文件路径，例如：file:///C:/Users/YourUserName/Documents/index.html。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值