在前端开发中，调试工具是必不可少的。其中，Chrome DevTools 是一款较为常用的调试工具。在开发中，经常需要对代码进行修改后刷新页面才能看到结果，这在繁琐的重复工作中浪费了很多时间。在这种情况下，一款能够自动监听文件变化并自动刷新页面的工具显得尤为重要。本文将介绍一款 npm 包 devtools-reloader-station，它可以在开发中实现自动监听并自动刷新页面的功能。
安装 devtools-reloader-station
首先，需要从 npm 仓库中安装 devtools-reloader-station。在终端中输入以下命令：
npm install -g devtools-reloader-station
使用 devtools-reloader-station
安装完成后，可以在命令行中使用以下命令来启动 devtools-reloader-station：
devtools-reloader-station
启动后，会在控制台中看到类似以下信息：
Devtools reloader station running at http://localhost:8085/reload/reloader.js...
这说明 devtools-reloader-station 已经运行起来了，并且开启了一个服务监听文件的变化。
在 Chrome 中设置 devtools-reloader-station
启动 devtools-reloader-station 后，还需要在 Chrome 中进行一些设置。首先，需要在 Chrome 浏览器中打开 DevTools。在 DevTools 中，点击右上角的三个点，展开菜单，然后点击“Settings”。
在弹出的窗口中，点击“Experiments”选项卡，找到“Allow custom UI themes”和“Allow custom UI themes for browser chrome”两个选项，将它们都设置为“Enabled”。
接着，点击“General”选项卡，找到“DevTools experiments”选项，将它也设置为“Enabled”。
最后，关闭 DevTools 并重新打开，就可以在 DevTools 中看到一个新选项卡“Experiments”。在“Experiments”选项卡中，找到“Local Overrides”选项，并将其设置为“Enabled”。
现在，设置已经完成了。接下来，只需加载一个 reloader.js 文件，就可以实现自动刷新页面的功能了。
加载 reloader.js 文件
要加载 reloader.js 文件，需要在 DevTools 中进入“Sources”选项卡，然后选中“Overrides”面板。在此面板上，可以看到一个“Select folder for overrides”按钮。点击按钮后，在弹出的窗口中选择一个文件夹，点击“Allow”按钮。这个文件夹就会成为一个本地覆盖，可以在其中保存修改后的 HTML、CSS 和 JavaScript 文件。
接着，找到 HTML 文件，并在右侧的面板上点击“+”按钮，可以看到“Local Overrides”选项。在这个选项下，会有一个名为“reloader.js”的文件。右击这个文件，然后选择“Save for overrides”，将它保存到本地覆盖文件夹中。
现在，已经可以在 HTML 文件中引入 reloader.js 文件了。在 HTML 文件中加入如下代码：
<script src="http://localhost:8085/reload/reloader.js"></script>
这样，加载完成后，就可以在开发中实现自动刷新页面的功能了。
示例代码
启动 devtools-reloader-station
devtools-reloader-station
HTML 文件
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------- ------ --------- ------------------------------ -------- -------------------------------------------------------- ------- -------
总结
通过使用 devtools-reloader-station，可以大大提高开发效率，减少重复操作。本文介绍了该工具的安装、使用以及在 Chrome 中的设置方法。同时，还给出了示例代码，方便大家查看和参考。希望本文能够对前端开发人员有所帮助，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75066