vsCode中代码保存自动刷新页面,open with live server,可修改打开浏览器

前言

在我们使用vscode写代码的时候,每次修改都要先保存,再刷新浏览器才能看到代码变动后的效果,如果只要保存,浏览器会自动刷新岂不是更好,下面这种方法就可以做到。

插件市场安装live server插件

打开文件

在编辑的html页面,右键 --> open with live server。

看浏览器

直接修改内容,不需要去浏览器刷新,保存即可自动刷新(比如后面加123)

如果live server 插件打开不是谷歌浏览器,也可以修改

打开设置 => 工作区 => 扩展区 => Live Server Config => Settings:Custom Browser,选择chrome

最后右键open with live server 就可以在谷歌浏览器打开了,修改代码后保存,就会自动刷新,无需我们手动刷新浏览器!

  • 7
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: 要在 VSCode 使用 Live Server 启动 HTML 网页,需要执行以下步骤: 1. 在 VSCode 打开要启动的 HTML 文件。 2. 在 VSCode 的侧边栏找到扩展(Extensions),并安装 "Live Server" 扩展。 3. 安装完成后,打开 HTML 文件,在编辑器的右上角会出现一个 "Go Live" 的图标,点击后即可启动 Live Server。 4. Live Server 启动后,会自动打开浏览器并显示 HTML 页面。 5. 如果修改了 HTML 文件,可以刷新浏览器页面查看修改后的效果。 希望这些信息能帮到您! ### 回答2: 使用VSCode + Live Server插件来启动HTML网页非常简单,按照以下步骤操作即可: 1. 首先,打开VSCode编辑器,并确保已经安装并启用了Live Server插件。 2. 创建一个HTML文件。可以使用VSCode的文件导航器或者直接通过菜单栏的"文件"->"新建文件"来创建。 3. 在HTML文件输入你的HTML代码。 4. 保存你的HTML文件。可以使用快捷键Ctrl + S或者通过菜单栏的"文件"->"保存"来保存文件。 5. 现在,你需要启动Live Server来查看你的网页。有两种方法可以启动它: - 方法一:使用右键菜单 - 在编辑器右键单击你的HTML文件。 - 在弹出的右键菜单选择"在浏览器查看"。 - 这将自动启动Live Server并在默认浏览器打开你的网页。 - 方法二:使用命令面板 - 使用快捷键Ctrl + Shift + P来打开命令面板。 - 在命令面板输入"Live ServerOpen with Live Server"。 - 选择该命令并按下回车键。 - 这将自动启动Live Server并在默认浏览器打开你的网页。 6. 现在,你的HTML网页将在浏览器打开,并且任何更改都将自动刷新。 以上就是使用VSCodeLive Server插件启动HTML网页的步骤。希望这对你有帮助! ### 回答3: 在VSCode使用Live Server启动HTML网页的操作如下: 1. 首先确保已经在VSCode安装了Live Server插件。可以在VSCode的扩展商店搜索并安装"Live Server"插件。 2. 打开需要启动的HTML文件,在VSCode的编辑器右键单击文件,选择"Open with Live Server"。注意,右键单击时确保光标处于HTML文件的编辑器,而不是资源管理器。 3. 点击菜单栏的"Go Live"按钮,或者使用快捷键`Ctrl`+`Alt`+`L`来启动Live Server。 4. Live Server将会自动打开一个浏览器窗口,并在其显示HTML文件的内容。 5. 当对HTML文件进行修改时,Live Server自动重新加载页面,以便你能够实时地查看修改的效果。 除了上述的启动方法之外,还可以在VSCode的设置进行一些个性化配置。在VSCode的设置搜索"Live Server",可以找到一些与Live Server相关的配置选项,例如设置默认浏览器、端口号等。 总结起来,启动HTML网页使用Live Server非常简便,只需要几个简单的步骤就能够实时地查看并调试网页。这是一个非常方便的工具,特别适合开发和调试HTML网页。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

编程界小明哥

请博主喝瓶水,博主持续输出!

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

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

打赏作者

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

抵扣说明:

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

余额充值