使用 VS Code 和 Chrome 实时预览 HTML

[sneezry]

有的时候需要调整 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 不用管，看着就行。

视频：

<amp-youtube data-videoid="-Z84f_RRrSc" layout="responsive" width="480" height="270"></amp-youtube>

[ynyounuo]

实时预览，厉害了。

[hxsf]

browser-sync 了解一下？

[JanKinAn]

友谊的小桥说涨水就就 PY

[gdtv]

请问一下，修改源文件后，是自动在 chrome 里重新加载整个页面，还是不重新加载，仅仅修改的部分会生效？

[gynantim]

静态页面直接不用 vs code 了，chrome 添加 workspace 然后用 chrome 写代码。

[oppoic]

类似的有很多吧，vs code 里保存，浏览器（包括但不限于 Chrome ）自动刷新。
vs code 插件里搜索：live-server 试试

[learnshare]

hot reload/live reload 已经不是新玩具了

[v2chou]

live-server 试试

[LeungJZ]

一我还以为是在 Chrome 上编辑的东西会同步至 vscode。。。。

[shuizhengqi]

老哥是不是对实时预览有点误解？

[orangutan92]

QQ 浏览器是默认的，分别装了两个插件还是不行。。。

[orangutan92]

可以用，不保存文件都能实时刷新这个点很强大，只是这样的话，我修改动态 js 页面也会不断的刷新，而且 H5 页面刷新不出来。