atom怎麼實現html實時預覽？

01-28

剛開始學習html，決定用atom來學習html和css,想請問各位大神如何給atom實現html的網頁實時預覽？是否有現成的插件？也麻煩推薦一下！謝謝！

之前一段時間也在學習html和css，我是這麼做的：

系統：windows10，文本編輯：atom，網站伺服器：IIS，瀏覽器：chrome

1，給chrome安裝安裝LivePage這個插件。

2，先用IIS搭建一個簡單的網站。

3，用atom編輯html css的時候，用chrome打開自己編輯的網頁，並且啟動LivePage插件。

4，這樣只要你用atom修改後保存代碼文件的時候，你在chrome上的頁面就會自動刷新。

問題：但是也這樣做也有一些問題，對於某些動態網站，可能會不斷刷新。

ps：LivePage只是我剛好找到的一個比較好用的實時刷新插件，也可能有別的插件比較好用，歡迎推薦。

必然有插件

進入settings--install:

atom-html-preview

你完全可以用左邊的屏幕運行atom，右邊的屏幕運行IE，然後實時編輯IIS網站目錄下面的文件（或者乾脆就把IIS的網站指向你git clone出來的目錄），寫完了刷新一下就好了。

最好的答案就是crtl+shift+M，原生的預覽就夠用了

難道沒人在atom 里安裝 open brower plus么。左邊代碼，右邊本地即可實時手動刷新 html 。

atom - preferences - packages - 包名稱（open brower-plus）

Grunt Gulp 這些都有 liveload 插件的，一般配合瀏覽器的 liveload 插件或者 liveloa.js 這類的庫就能實現修改文件之後瀏覽器自動刷新

好奇要實時預覽為啥不用brackets

原生支持,不用再按擴展

用的是瀏覽器遠程調試功能，需要chrome，非簡單的自動刷新(出bug的時候會)

我用browser-sync。

browser-sync的命令行工具：

browser-sync start --server -files 「**/*.html,**/*.css」

可以使用npm script，也可以用gulp，修改代碼自動刷新。

其實插件的正確叫法是livereload，不過在safari下不支持本地文件刷新，要架成http。

gulp可以實現修改自動更新頁面，就是配置略複雜…看了好久

沒有使用過atom編輯器，個人主要寫html的IDE是Webstorm，下面介紹的實時瀏覽插件與編寫工具無關(但Webstorm在失去焦點時會自動保存，在用到下面的插件不用每次都ctrl+s)，只會檢測文件或者文件夾的內容是否改變。

每個前端必然有多個瀏覽器，個人習慣使用的是火狐，所以這個插件是FireFox下的，Chrome的就布吉島了。

傳送門：Auto Reload :: Firefox 附加組件

可以檢測文件或者文件夾的變化，監聽文件夾的功能很強大，個人很喜歡，可以把它設置監聽自己的工作目錄，這樣所有文件的變動它都會顯示。在編輯器ctrl+s(個人win10)保存它就會自動刷新了。本地文件的刷新，也可以通過gulp來，只不過需要配置，而且是每一個項目文件(不是很熟悉，略略使用過，錯瞭望指正)，gulp的入門GitHub - nimojs/gulp-book: Gulp 入門指南

其實也有使用Webpck的，但...原諒菜鳥的我還沒接觸過那麼高級的工具。

如果是在伺服器上的網頁怎麼辦？個人的辦法是藉助Fiddler 這個工具的AutoResponder功能，通過代理把相匹配的網址對應到本地某文件或者某文件夾，調試好後再上傳至伺服器。簡直是調試利器啊有木有！！

在HTML文件&里加一行

&

（1）atom-html-preview 插件，我fork了一份，然後改成了只在保存時刷新，不像原有的那樣經常崩潰，你可以clone我的來用。

LanceHuang/atom-html-preview

（2）如果是考慮不同的瀏覽器，就只能裝一個browser插件，可以快速用不同類型的瀏覽器打開

atom-html-preview

atom插件：atom-html-preview

---

換brackets

---

webpack gulp browser-sync

---

sublime+live reload（同時安裝chrome/chromium插件live reload,ff可憐……）

idea/webstorm/phpstorm+jetbrains ide support（chromium/chrome插件,ff……）

---

gnome計劃中的瀏覽器 epipthany（頓悟）可以實時刷新！！！！

前提：使用linux或bsd+需要保存（按ctrl+s還是很快的，webstorm失去焦點會自動保存哦）

---

dreaweaver可以?（沒用過）

---其他就不知道了

給瀏覽器裝個自動刷新的插件就行了，屏幕左右分別編輯器、瀏覽器。一般瀏覽器都有，比如我用的360極速，有個自動刷新的插件刷新間隔一秒。

browser-sync

怎麼沒有使用 Webpack 的？