vscode中加入live server插件并在浏览器中展示

于 2024-04-28 23:05:44 发布
阅读量563 收藏
点赞数 5
文章标签： vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Arinck/article/details/138293613
版权

1.找到阔展插件

2.在搜索框写入圈1“live server ”插件，选择圈2安装

3.等待安装完毕 后

4.安装插件完成后，重启VSCode软件

5. 打开写好的html代码页面后，可以点击右下角的“Go Live”标识，即可自动打开默认浏览器并运行编写代码，写的过程中要及时保存代码可以实现网页代码的实时预览。

 

 

 6.还有一种方法打开浏览器，在代码页面的任何位置右击，如图，选择“Open With Live Server”或者使用快捷键“alt+L ait+O”,也可以打开默认浏览器。

Arinck
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【VSCode】插件推荐 - Live Server
m0_49239264的博客
06-02 464
简单易用：您可以通过在VSCode的侧边栏中找到Live Server插件，点击"Go Live"按钮或在HTML文件上右键选择"Open with Live Server"来启动服务。自动刷新功能：当您在VSCode中编辑HTML、CSS或JavaScript文件并保存更改时，Live Server会自动在浏览器中刷新页面，让您立即看到最新的变化。多浏览器支持：Live Server支持在不同的浏览器上运行，您可以在插件设置中指定默认浏览器，甚至可以为不同的项目设置不同的浏览器。
VSCode调试揭秘：Live Server助力完美测试Cookie与Session，远超“Open in Browser“！
最新发布
啊猪是的读来过倒的博客
06-09 1173
适用于简单的本地文件访问，但不支持跨域Cookie和Session的处理。通过本地HTTP服务器访问文件，支持跨域Cookie和Session的处理，并提供更多的配置灵活性。对于需要测试跨域功能的开发者来说，它是一个更好的选择。所以，在开发过程中，如果需要处理跨域相关的Cookie和Session，建议使用。然而，如果你只是需要简单地查看本地HTML文件，open in browser 可能就足够了。
vscode的插件Live Server
qq_40324997的博客
07-08 401
点击vscode扩展按钮，搜索Live，点击安装，如图：（我的已经装过了，所以不显示安装按钮） 安装成功后，vscode右下角会出现雷达一样的小图标 点击该图标即可在默认浏览器查看网页了！！！ 此插件为前端开发启动了个服务，大大节省了开发刷新工作量，点赞！ ...
vscode插件系列-live server
前端啤酒屋
11-26 1523
Live Server 直译为实时服务器。这个插件是一个具有实时重新加载功能的小型开发服务器。用来破解html/js/css文件，而不适用于部署最终的站点。 优势 vscode拓展方便，一键安装架设本地服务器环境，并且可解决自动刷新的问题。 在需要打开的启动页右键 open with live server 默认接口为5500 就可以方便的启动项目 ...
VS Code -- Live Server
weixin_43588715的博客
03-22 5557
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
VScode下安装Live Server（自动刷新html页面）
追求卓越583的博客
08-30 5221
VScode下安装Live Server（自动刷新html页面）
VS Code插件live server的安装和使用
sinat_37024730的博客
02-06 3902
VS code中live server插件的安装和使用
vscode常用插件压缩包
07-13
- `Debugger for Chrome`：支持在VSCode中直接调试运行在Chrome浏览器上的JavaScript应用。 - `Debugger for Node.js`：为Node.js应用程序提供调试支持。 5. **前端开发插件**： - `Live Server`：提供实时预览...
vscode如何设置默认打开的浏览器为Chrome
10-14
总结来说，通过安装“Open in Browser”插件并设置默认浏览器为Chrome，以及利用“Live Server”插件进行页面热更新，你可以提升在VSCode中的Web开发效率。记住，持续关注和更新你的插件库，保持VSCode的优化配置，...
vscode插件离线安装包
08-30
2. **ritwickdey.LiveServer-5.7.9.vsix**: Live Server 是一个实时预览服务器插件，可以在本地启动一个 Web 服务器，并实时刷新浏览器，每当你的 HTML、CSS 或 JavaScript 文件发生变化时，无需手动刷新，极大地...
Live Server Web Extension-crx插件
04-02
此扩展名为Live Server（Vscode扩展 - 必需v3.0.0 +）。 您必须为vscode安装Live Server扩展以才能使用此添加项。 按照此链接设置：https：//github.com/ritwickdey/live-server-web-extension#Setup 演示：...
补充vscode插件
11-02
在VSCode中，插件是扩展其核心功能的关键，它们可以提供额外的编程语言支持、代码美化、调试工具、版本控制集成、性能分析、代码片段等实用功能。下面是一些流行的VSCode插件及其作用： 1. **Prettier**：这是一个...
在vscode中安装使用live Server（前端搭建自己的本地服务器环境）
z1093541823的博客
04-27 3630
在vscode中安装使用live Server（前端搭建自己的本地服务器） 在扩展中搜索live Server，找到并下载，下载完后点击设置图标，点击扩展设置
VsCode扩展插件LiveServer使用和代理设置
RoadToTheExpert的专栏
04-28 7282
前言： 有时候，要用http来运行一个本地网页，调试ajax, restful, websocket等操作。 尽管有很多IDE如 Eclipse, VisualStudio, PhpStorm 可以实现。但这些工具好像太重型，在一台新电脑上安装也是费时。 还有 php, python, nodejs 等都有 cli、 cgi、第三方库 来启动 http 服务。但这也仅仅是开了web服务器。...
【VSC插件】LiveServer 安装使用指南
hzxOnlineOk的博客
06-29 6536
当我们碰到文件引入导致的跨域问题，而测试环境又不存在不同源时，live-server这个插件允许我们起一个前端本地服务，这样子就把资源和网站服务同源了 1.左键点击下图圈出的图标或者快捷键Ctrl+Shift+X，到下图的EXTENSIONS界面。 2.搜索Live Server点击绿色的Install即可安装，笔者是已经装好了所以才没有Install按钮的。 3.安装成功的表示是如下图所示，右键HTML文件有Open with Live Server选项（如果没有这个选项的话..
mac的vscode底部不出现GoLive图标的原因
bingyue0126的博客
02-29 414
go live图标不出现，右键不显示对应操作
VS Code中的Java
热门推荐
大强博客
08-08 1万+
VS Code中的Java VS Code中的Java支持是通过扩展提供的，并通过简单，现代的工作流程针对轻量级Java项目进行了优化。Marketplace中的热门扩展提供了基本的语言功能，如项目支持，代码完成，linting，调试，测试，代码格式化，代码片段，以及包括Maven和Tomcat在内的工具集成。 下载VS代码 - 如果您尚未下载VS Code，请快速安装适用于您的平台（Win...
golive 直播服务器安装
qthello
06-27 2783
安装 golive 直播服务器 一，源码 下载 https://github.com/gwuhaolin/livego/blob/master/README_cn.md 二，vscode 编译 https://www.jianshu.com/p/f952042af8ff 三，生成推流地址 启动服务：执行livego二进制文件启动 livego 服务； 访问http://localhost:8090/control/get?room=movie obs 配置 四，vl...
vscode安装live-server插件
06-28
### 回答1： 1. 打开VSCode编辑器。 2. 点击左侧的“扩展”图标。 3. 在搜索框中输入“live-server”。 4. 找到“Live Server”插件并点击“安装”按钮。 5. 安装完成后，点击“启用”按钮。 6. 在编辑器中打开HTML文件，右键单击文件并选择“在Live Server中打开”。 7. 现在，您可以在浏览器中查看您的网页，并且当您进行更改时，它将自动重新加载。 ### 回答2： VSCode是一款非常流行的代码编辑器。它支持非常多的插件，允许你自定义编辑器界面及编程环境来满足自己的需求。Live-Server是一款用于前端开发的插件，它提供了一种方便的方式来自动化你的前端开发流程。 以下是在VSCode上安装Live-Server插件的步骤： 1. 在VSCode左侧的“扩展”栏中搜索“live-server”，并点击安装按钮。 2. 安装完成后，打开你的HTML文件。在编辑器中右键单击文件并选择“Open with Live Server”，或者使用快捷键“Ctrl+Shift+L”打开Live Server。 3. 当你打开Live Server时，它会自动在默认浏览器中打开你的HTML文件。从此以后，你所作的任何更改都将自动重新加载，免去了手动刷新页面的麻烦。 总之，VSCode与Live Server插件的结合让前端开发更加方便、高效。如果你是一位前端开发人员，那么你应该尝试着使用这款插件，它会让你的工作效率大大提高。 ### 回答3： 在使用VS Code进行前端开发时，经常需要在本地搭建一个简单的Web服务器来预览网页效果，而Live Server插件不仅可以快速搭建本地服务器，还可以实现热重载等功能，极大地提高了我们的开发效率。 下面是VS Code安装Live Server插件的步骤： 第一步：打开VS Code，点击左侧菜单栏的扩展(Extensions)图标，或使用快捷键(Ctrl+Shift+X)打开扩展管理器。 第二步：在扩展管理器中搜索Live Server插件，并点击安装。 第三步：安装完毕后，重新启动VS Code，在左侧文件栏中打开要预览的HTML文件，右键点击文件名，选择“在Live Server中打开(Open with Live Server)”，或者直接使用快捷键(Ctrl+Shift+L)打开本地服务器，即可在浏览器中预览网页。 此时，如果对HTML或CSS文件做出修改，网页会自动刷新，实现热重载的效果。另外，Live Server还支持在多个浏览器标签中同时预览同一个页面、在线调试、自定义端口等功能，可以在插件的设置中进行配置。 总之， Live Server插件是一款非常实用的前端开发工具，能够帮助开发者快速搭建本地服务器，提高开发效率，是值得推荐的插件之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值