一个好用的VScode预览html插件——Live Server Preview

Vscode默认是在控制台下查看html文件,查看和调试都很不方便,怎么让它能像Hbuilder那样可以边写边调试呢?

我们可以安装两个插件:

1.open in browers

使用:htm文件中右键,点击右键菜单的view in browser,即可打开浏览器运行;

alt+b,运行;

alt+shift+b,切换不同浏览器运行;

优点:可以运行多个界面

2.view in browers

使用:htm文件中右键,点击右键菜单的view in browser,即可打开浏览器运行;

缺点:只能打开一个界面,想运行下一个界面的时候,必须把前面一个界面关掉。

 

但这两种插件,预览时需要另外跳转到谷歌浏览器,打开一个标签页,调试时跳来跳去,不太方便

3.推荐使用Live Server Preview,

这个插件不用另外打开浏览器;它是直接在Vscode里面预览html的,并且是自动实时更新的,不用不停地Ctrl+S保存查看

使用:F1 -> 弹出一个窗口输入live,然后右边出现预览窗口

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 21
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
### 回答1: VSCode Live Server插件是一款非常实用的插件,它可以帮助开发者在本地快速启动一个服务器,实时预览网页。使用该插件可以省去手动刷新浏览器的麻烦,提高开发效率。此外,该插件还支持自动保存文件并刷新页面,方便开发者快速预览修改后的效果。总之,VSCode Live Server插件是一款非常实用的工具,值得开发者使用。 ### 回答2: VSCode Live Server 插件是一款功能强大的开发工具,可以使前端开发人员更快、更方便地编写和调试网站代码。这个插件基于 Node.js 构建,具有轻量级、易用、高效等特点。 它可以自动监视您编辑的 HTML、CSS 和 JavaScript 文件,并在保存文件时动态地重新加载页面,这意味着您可以立即查看您所作的更改,并在浏览器中进行实时预览。 此外,这个插件还带有很多其他有用的功能,例如: 1. 支持简单的 HTTP 服务器功能,可以轻松地将您的基于 HTML 的网站部署到本地或公共服务器上。 2. 它可以自动打开浏览器并加载您的网站,从而使预览过程更加流畅和轻松。 3. 它还集成了与 VSCode 的调试器,允许您在 VSCode 编辑器中直接调试 JavaScript 代码。 4. 还包括基础的页面分析功能,可以帮助您调试代码,识别和解决任何问题。 总之,VSCode Live Server一个非常有用的插件,可以极大地简化和加速前端网站开发的过程。它是对开发人员的巨大帮助,可以使他们专注于代码而不用担心复杂的部署和调试问题。 ### 回答3: VS Code的Live Server插件一个非常方便的工具,使得开发者能够实时更新网页并查看页面所做更改的效果。这个插件具有许多功能,它能够使得开发者更加高效地工作。 首先,Live Server插件可以在本地搭建一个服务器,这样开发者就可以在本地进行开发,而无需上传代码到服务器上。这大大提高了开发效率,同时也节省了开发者的时间和资源成本。 其次,该插件带有自动刷新功能。这就意味着,一旦你对代码做出更改并保存,页面就会自动刷新,你可以立即看到效果。这样的自动刷新功能可以大大减少开发人员的时间和工作量,并使他们更容易调试代码。 另外,Live Server还提供了实时模拟网络连接的功能。开发人员可以模拟各种网络条件,例如缓慢的互联网连接或高峰期的网络延迟等,以测试他们的网站在此类情况下的表现。 此外,Live Server还允许开发人员在IE浏览器中进行测试和调试。这特别适用于那些必须支持旧版本的网站开发人员。在Live Server插件中,只需单击鼠标几下,就可以在IE中开始自动测试。 综上所述,Live Server插件是开发人员的理想工具,它可以使开发过程更加高效和简单。它的许多便利功能可以帮助开发人员更快速地开发他们的网站,并集成其他工具以帮助他们测试和调试代码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

睫毛长长的舒克

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值