本文所用軟件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35)、Google Chrome v61.0.3163.100，其他版本軟件配置過程可能不一樣，請(qǐng)知悉！

一.Google Chrome安裝LiveReload插件

1.下載插件
LiveReload 2.1.0
鏈接：http://pan.baidu.com/s/1bDvsia 密碼：aphx

2.安裝插件
（1）瀏覽器地址欄輸入：chrome://extensions/進(jìn)入拓展程序
（2）拖拽安裝

鼠標(biāo)左鍵選中要安裝的插件，拖拽至拓展程序頁面，看到“拖放以安裝”時(shí)釋放鼠標(biāo)，就安裝成功了。（小伙伴留下自己的看法，前面這句要?jiǎng)h掉嗎，我覺得有圖片就夠了）

別忘了打鉤哦

二.Sublime Text 3安裝LiveReload插件

1.安裝Package Control

ctrl+shift+p 打開命令行
輸入Package Control，按下Enter鍵
首次安裝插件需要該步驟，若之前已安裝直接看下一步

2.安裝LiveReload插件
（1）ctrl+shift+p 打開命令行。 輸入install package，按下Enter鍵

（2）輸入LiveReload，按下Enter鍵
（3）安裝成功后，依次點(diǎn)擊Preferences > Package Settings > LiveReload > Settings User（首選項(xiàng) > Package Settings > LiveReload > Settings User），在設(shè)置頁面輸入如下代碼

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"] }

（4）重啟Sublime Text 3，現(xiàn)在插件就能用了

3.使用LiveReload插件
（1）Google Chrome打開正在編輯的代碼，點(diǎn)擊瀏覽器右上角插件按鈕
→
（2）在Sublime Text 3修改代碼，切換到Google Chrome，你會(huì)發(fā)現(xiàn)網(wǎng)頁自動(dòng)刷新了

三.Google Chrome安裝JetBrains IDE Support插件

1.下載插件
JetBrains IDE Support 2.0.7
鏈接：http://pan.baidu.com/s/1bptqJx1 密碼：9sjb

2.安裝插件

請(qǐng)參考本文前面的描述

四.WebStorm使用Live Edit功能

依次點(diǎn)擊File>Setttings，搜索框輸入live edit。在選擇Update>Auto in(ms)，點(diǎn)擊OK保存設(shè)置

選中要調(diào)試的html文件右鍵選擇Debug，這時(shí)Google Chrome會(huì)彈出該網(wǎng)頁。在WebStorm里面修改代碼，Google Chrome就可以實(shí)時(shí)刷新了

注意別點(diǎn)取消，那樣就不能實(shí)時(shí)刷新了

總結(jié)下：Sublime Text3安裝東西要麻煩些，不過安裝好了直接就可以用。而WebStorm雖然安裝方便，不過每次使用都要右鍵Debug比較折騰人。對(duì)比下來，我個(gè)人更喜歡用Sublime Text3寫代碼！

總結(jié)

以上是生活随笔為你收集整理的Sublime Text 3 、WebStorm配置实时刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。