VS code 保存自动刷新chrome浏览器（详细）

最新推荐文章于 2024-05-26 19:14:22 发布
最新推荐文章于 2024-05-26 19:14:22 发布
阅读量1.7w 收藏 23
点赞数 6
分类专栏： 其它 文章标签： chrome visual studio code
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dragoned_123/article/details/105874962
版权

文章目录

VS code 保存自动刷新chrome浏览器

1.准备chrome插件（LiveReload）

本人推荐的谷歌官方应用插件地址（需要翻墙）https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

在这里插入图片描述

2.准备VS code插件（LiveReload）

在VS code内部搜索即可安装

在这里插入图片描述

3.开始调试

1.使Vs code里面的LiveReload是enable模式（安装上就是enable模式）
2.用Chrome浏览器打开你的html文件

在这里插入图片描述

3.右击浏览器LiveReload小图标，进入管理扩展程序

在这里插入图片描述

4.打开允许访问文件地址选项

在这里插入图片描述

5.返回之后左击浏览器插件图标当插件图标中心的小圆点变为实心的时候证明连接成功，如果有错误提示，应该是你VS code里面的LiveReload插件没有enable，你需要快捷键Ctrl+shift+P，然后搜索点击LiveReload：enable/disenable sever再返回浏览器点击插件图标就OK了

在这里插入图片描述

dragoned_123
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
codext：VS Code的编辑器作为浏览器扩展提供
01-29
法典 在浏览器中查看和编辑代码！ 左侧：不带Codext的Firefox和Chrome。... 要暂时关闭Codext，请在浏览器工具栏中右键单击其图标，选择“禁用扩展名”并刷新页面！ 开发人员入门 确保您使用的是最新版本
谷歌livereload插件使用
weixin_34072637的博客
11-21 212
1、插件下载地址：http://www.chromein.com/search_livereload_1.html 2、谷歌浏览器启用改插件 3、sublime 安装livereload插件，安装方法与其他插件一样 4、点击浏览器改小图标边实心 这样就可以直接修改完html或者css保存，不需要刷新，立即可以看到修改后的效果 转载于:https://www.cnblogs.com/...
LiveReload配置，安装使用方法~~~前端页面神助手
好好大东的博客
05-23 1万+
LiveReload插件安装使用方法
推荐13款常用的Vscode插件，提高前端日常开发效率
最新发布
男神的专栏
05-26 462
插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。允许开发者在浏览器中实时预览您正在编辑的网页。，以便开发者可以立即看到页面的更改效果。，即开发者可实时预览代码效果。文件时，该插件会自动。
VS code 开启Livereload 失败
04-10 4253
安装好Livereload后，ctrl+shift+p输入 livereload:enable/disable server 出现以下提示 Running the contributed command:'extension.openWithDefault' failed 我经历多次失败之后，找寻其他替代方案 live server等，发现是一样的问题。 最后在 https://bl...
spring-boot-devtools 实现热部署
zmt0104的博客
08-25 470
spring-boot-devtools实现热部署
vscode如何设置默认打开的浏览器为Chrome
10-14
完成上述步骤后，VSCode现在应该会默认使用Chrome浏览器来打开HTML文件。你可以通过以下两种方式来测试这一设置： - **Open in Default Browsers**：使用快捷键`Alt + B`，这将使用你的默认浏览器（现在应该是...
jira-chrome-extension:自动从code.google.compjira-chrome-extension导出
05-25
Jira Chrome Extension是一款专为开发者设计的浏览器插件，它使得用户能够方便地从code.google.com/p/jira-chrome-extension平台自动导出相关信息，从而提高工作效率和项目管理的便利性。这款扩展是基于JavaScript...
pixijs-typescript-starter:使用TypeScript（VS Code和Chrome）开始开发PixiJS游戏或动画的样板
03-21
Pixi.JS TypeScript样板 我很难设置开发环境，因此我决定与他人分享。 如果要开始为浏览器快速开发游戏，那么从那里开始可能会很有用。 由于提供了配置，因此应该将此...编辑TypeScript文件，浏览器应在保存时刷新。
livereload
09-22
livereload 浏览器自动预览软件
vscode-live-server：为静态和动态页面启动具有实时重新加载功能的开发本地服务器
02-06
[要尝试使用 （BETA）吗？ 它将启用实时更改，而无需保存文件。 ] 实时服务器 Live Server喜欢 :heart_with_arrow: 您的多根工作区 服务器端页面（如PHP）的Live Server。 [针对“找不到命令错误” ] 启动具有实时重新加载功能的本地开发服务器，以处理静态和动态页面。 启动/停止服务器的快捷方式 [注意：如果您的工作区中没有任何.html或.htm文件，则必须遵循方法4和5来启动服务器。 打开一个项目，然后从状态栏中单击Go Live启用”以打开/关闭服务器。 右键单击资源管理器窗口中的HTML文件，然后单击“ Open with Live Server 。 。 打开
gh-code-folding:Chrome 扩展允许在 Github 上折叠代码
06-01
`gh-code-folding` 是一个专为GitHub设计的Chrome浏览器扩展，它使得用户能够在浏览代码仓库时方便地折叠和展开代码段，尤其对于那些有着大量代码行数的项目，这个功能能够显著提高代码阅读和导航的效率。...
Vscode 中LiveReload插件总是启动失败和出错 图文详细分析和stepbystep解决方案
rentianyu21的博客
11-12 3747
一、环境配置： Date：2020/11/07 OS: Win10(x64) VSCODE:1.50.1 LiveReload:0.2.5 二、问题描述： 通过在VSCODE中执行快捷命令ctrl+shift+p 再输入livereload:enable/disable server 发现VSCODE中显示LiveReload 开启状态 但是chrome浏览器中的LiveReload插件提示无法连接Server！ 那么说明该服务可能未开启或者TCP连接出现问题，打开CMD 输
vscode开启LiveReload出错
weixin_44932880的博客
04-27 2769
Command ‘LiveReload: Enable/disable server’ resulted in an error (Running the contributed command: ‘extension.livereload’ failed.) 解决方法 为了实现浏览器免刷新预览，搜了一下这个插件 大概原理是编辑器提供了serve功能，浏览器作为client端进行自动刷新 在v...
结合 live-reload 实现自动刷新
YunWisdom
07-27 783
结合 live-reload 实现自动刷新 前端工程师日常开发最频繁（实际上最浪费时间）的操作是什么？可能你已经想到了，就是刷新页面，要让变更生效，需要重新加载，刷新页面的操作就变成了重复低效的操作。 于是社区里出现了LiveReload来把这个过程自动化，react 种子项目生成工具create-react-app中就使用了这种技术。 但随着技术的演化，在单页应用中刷新页面意味着客户端状态的全部丢失，特别是复杂的单页应用刷新意味着更大量的重复工作才能回到刷新前的状态，于是社区又捣鼓出了...
如何实现vs code编写的代码在浏览器自动刷新显示
热门推荐
bingyue0126的博客
01-13 1万+
如何实现vs code编写的代码在浏览器自动刷新显示 使vs code代码在浏览器自动刷新显示步骤： 1、首先在vs code里面安装一个叫做live Server的插件 点击扩展图标或者使用快捷键F1→输入live Server并点击安装按钮（因为我已经安装了所以图片没有显示这个按钮，而是一个设置的图标） 2、运行live Server插件实现浏览器自动刷新显示渲染后的代码页面 在这里需要注意：每次我们写完代码都要保存之后浏览器才会自动刷新修改过的页面。 手动保存我们使用快捷键Ctrl+S，不过我觉得手
vsCode自动保存与浏览器自动刷新
m0_59989185的博客
09-07 8736
vsCode自动保存与浏览器自动刷新
vs code怎么调试vue
03-28
使用 VS Code 调试 Vue.js 应用程序的步骤如下： 1. 安装 Vue.js 调试插件：在 VS Code 的插件市场搜索“Vue.js”，找到官方的 “Debugger for Chrome” 插件并安装。 2. 在 Vue.js 应用程序中添加调试配置：在 VS Code 中打开“调试”面板，点击“添加配置”按钮，选择“Chrome”作为调试环境，然后在 `launch.json` 文件中添加以下配置： ```json { "type": "chrome", "request": "launch", "name": "Vue.js: Chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } } ``` 其中，“url”为你的 Vue.js 应用程序的地址。如果你的应用程序不在本地的8080端口，请修改该端口号。 3. 启动调试：在 VS Code 中按 F5 键启动调试，应用程序将会在 Chrome 浏览器中打开。在代码中设置断点，刷新页面并操作应用程序，即可开始调试。 4. 调试结束：调试结束后，按 Shift+F5 键停止调试。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值