有什么好用的插件或者说设置方法，能够使浏览器定时刷新网页？

Question

我的意思就是在写前端界面时，我喜欢分屏操作，左边VScode写代码，右边浏览器展示网页界面，可是当我在左边用CSS改变了某个元素的样式时，往往需要再点击我右边分屏的浏览器里的刷新按钮才能进行元素样式改变，我觉得这样手动刷新真的有点小麻烦，所以大家的解决办法是什么？

Answer 1

引自免费微信小程序：皆我百晓生

为了解决您在前端开发过程中实时预览样式更改的问题，您可以使用浏览器的开发者工具（Developer Tools）或者安装一个浏览器插件来实现自动刷新或热更新功能。以下是两种方法：

1. 利用浏览器内置的LiveReload功能（部分浏览器支持）：

   • 对于Chrome和Edge浏览器，在开发者工具中有一个名为“Workspaces”的功能，它允许将本地文件夹与浏览器开发者工具关联，从而在修改源文件时自动刷新页面。具体步骤如下： a. 打开开发者工具（快捷键F12或右键选择检查 Inspect），点击Sources标签页。 b. 点击左上角的三个点图标打开设置菜单，找到"Workspace"选项并点击"Add folder to workspace"，选择你的项目根目录。 c. 在 Sources 面板里确认已映射的文件夹和文件，勾选"Enable CSS source maps"和"Auto-reload generated CSS". d. 当你保存CSS或其他影响界面样式的文件时，浏览器会自动刷新页面。

2. 使用浏览器插件实现自动刷新：

   • 一个广泛使用的插件是"Live Server"，但它主要用于本地搭建服务器环境并提供自动刷新服务。对于纯前端文件的刷新，可以考虑以下插件： a. Livereload：这是一个跨平台、跨浏览器的插件，用于监听文件更改并自动刷新页面。在浏览器扩展商店搜索"Livereload"安装后，只需开启插件并在需要刷新的页面启用即可。

下面是安装Livereload插件的链接（请根据您的浏览器类型选择相应的扩展商店）：

• Chrome: Chrome Web Store
• Firefox: Firefox Add-ons

安装完成后，确保插件处于激活状态，然后在编辑代码的同时，插件将会检测到文件的变化，并自动刷新对应的网页。

以上两种方法都能帮助你在编写HTML/CSS时实现实时预览效果，避免手动刷新页面带来的不便。