使用 VS Code 和 Chrome 实时预览 HTML

有的时候需要调整 HTML 的细节，最方便的做法是打开 Chrome 的开发者工具直接改，看效果。但是改好后，如果修改的地方比较多，把修改过的地方保存下来就成了问题。有时一不小心刷新了或者关闭了标签，没保存的更改全没了。

前两天正好和 UX 的同事一起改进 HTML，这个问题就又出现在了我的面前。

作为一个 Chrome 扩展开发者，同时又以开发 VS Code 扩展作为工作，这个问题确实不应该困扰我这么久。

Watch in Chrome 是一个结合 Chrome 扩展和 VS Code 扩展的开发工具，安装两个扩展后，会在 Chrome 和 VS Code 之间架起一座友谊之桥（煽情状）……

Chrome 扩展地址： https://chrome.google.com/webstore/detail/mmbnmofkiadlcapnmgnkheoadkpeefii
VS Code 扩展地址： https://marketplace.visualstudio.com/items?itemName=sneezry.watch-in-chrome

项目地址： https://github.com/Sneezry/vscode-watch-in-chrome

MIT 协议开源。

使用方法：

1. 将 Chrome 设置为默认浏览器
2. 安装上面的两个扩展
3. 在 VS Code 里打开任意 HTML 文件
4. 按 F1 或者 Ctrl + Shift + P 打开命令框，找到 Watch in Chrome 执行

然后 Chrome 会自动打开 VS Code 里打开的所以 HTML 文件，直接在 VS Code 里改 HTML 就好了，Chrome 不用管，看着就行。

视频：