BROWSER-SYNC

使用惊人的浏览器同步

更新浏览器(任何)当源代码改变(HTML, CSS，图像等) 支持Windows、MacOS和Linux操作系统 您甚至可以使用移动设备观看您的代码更新(实时)

MacOS上的安装(查看其他OS上的安装帮助)

安装NVM，这样您就可以尝试任何Node版本

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

如何使用浏览器同步静态网站

让我们来看两个例子:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

——server选项允许您在终端的任何地方运行本地服务器，而——files选项允许您指定将跟踪哪些文件的更改。我更喜欢对跟踪的文件更具体，因此在第二个示例中，我使用ack来列出特定的文件扩展名(重要的是这些文件没有带空格的文件名)，并使用useipconfig来查找我在MacOS上的当前IP。

如何使用浏览器同步动态网站

如果您正在使用PHP、Rails等，您已经有一个正在运行的服务器，但是当您更改代码时它不会自动刷新。所以你需要使用——proxy开关让browser-sync知道该服务器的主机在哪里。

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

在上面的例子中，我已经在浏览器的192.168.33.12:3000上运行了一个Rails应用程序。它实际上运行在使用Vagrant盒子的虚拟机上，但我可以使用该主机上的端口3000访问虚拟机。我喜欢——no-notify来停止浏览器同步，每次我修改代码时，都会在浏览器上发送通知警报，——no-open来停止浏览器同步行为，当服务器启动时立即加载浏览器选项卡。

重要提示:如果您正在使用Rails，请避免在开发中使用Turbolinks，否则在使用——proxy选项时将无法单击链接。

希望对别人有用。我尝试了许多技巧来刷新浏览器(甚至是我之前使用AlfredApp提交的关于这个StackOverflow问题的旧帖子)，但这是真正的方法;没有更多的黑客，它只是流动。

CREDIT:用一个命令启动本地实时重载web服务器

在任何场合或事件中

chrome.runtime.reload();

将重新加载您的扩展(docs)。您还需要更改舱单。Json文件，添加:

...
"permissions": [ "management" , ...]
...

我已经分叉LiveJS，以允许实时重新加载打包的应用程序。只需将文件包含在应用程序中，每次保存文件时，应用程序将自动重载。

如果你使用webpack开发，有一个自动重载插件: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

如果你不想修改webpack.config.js，还附带一个CLI工具:

npx wcer

注意:一个(空的)后台脚本是必需的，即使你不需要它，因为它是注入重载代码的地方。

我主要在Firefox中开发，其中web-ext运行会在文件更改后自动重新加载扩展。一旦准备就绪，我会在Chrome中进行最后一轮测试，以确保没有Firefox中没有出现的任何问题。

如果你想主要在Chrome上开发，并且不想安装任何第三方扩展，那么另一个选择是在扩展的文件夹中创建一个test.html文件，并添加一堆SSCCE。然后，该文件使用一个正常的<script>标记来注入扩展脚本。

您可以使用它进行95%的测试，然后当您想在现场测试它时手动重新加载扩展。

这并不能完全重现扩展所运行的环境，但对于许多简单的事情来说已经足够好了。

更新:我已经添加了一个选项页面，这样你就不必手动查找和编辑扩展的ID了。CRX和源代码在:https://github.com/Rob--W/Chrome-Extension-Reloader 更新2:添加快捷方式(见我的仓库在Github)。 包含基本功能的原始代码如下所示。

创建一个扩展，并使用Browser Action方法与chrome.extension.management API一起重新加载已解包的扩展。

下面的代码为Chrome添加了一个按钮，点击后将重新加载扩展。

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png:选择一个漂亮的48x48图标，例如: