1、 打開Chrome瀏覽器，點擊右上角的“自定義及控制”按鈕，選擇“更多工具”-->”擴展程序”，打開“擴展程序”頁面。

?

其實以上步驟可以簡化為：用Chrome打開chrome://extensions/，如上圖所示。

2、點擊“獲得更多擴展程序”，進入“Chrome網上商店”，搜索“JetBrains IDE Support”擴展程序。點擊“添加至Chrome”按鈕，安裝該擴展程序到Chrome。勾選后面的“應用”，安裝成功后Chrome瀏覽器工具欄上會出現一個"JB"圖標。

3、打開WebStorm，新建一個Emmet.html文件，菜單Run-->Debug，然后選擇“Emmet.html”，這時會同步啟動Chrome打開Emmet。并且提示”JetBrains IDE Support 正在調試此標簽頁“。

?

點如下圖的下拉箭頭，選擇Edit Configurations，打開Run/Debug Configurations對話框，你會發現已經在JavaScript Debug下新建了Emmet.html。

?

?

?

4、 下面開始測試，切換到WebStorm，修改Emmet.html，根本不需要保存操作，切換到Chrome，你會發現Chrome同步實時渲染好了該頁面。

?

?

?

5、以后你可以點擊如下圖的工具按鈕打開Chrome來實時查看渲染效果，快捷鍵為Shift+F9。

?

?

轉載于:https://www.cnblogs.com/wind128/p/4227422.html

總結

以上是生活随笔為你收集整理的WebStorm 9 配置 Live Edit 功能与浏览器实现同步的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。