為了開發的方便，需要在編輯器里修改，然后實時同步到瀏覽器進行查看，這里phpstorm和webstorm的配置相類似。
軟件版本
PHPstorm 2017.1.3
網上找到的教程，都是基于老版本的，其中live eidt的選項都不存在。所以重新基于最新版本重新進行配置。
首先查看官方幫助文件
建議大家多看官方文件，搜索引擎的東西也靠不住，太老舊了。搜索live edit后看官方幫助文件
安裝支持插件和瀏覽器插件
Before you start
- Install and enable the LiveEdit plugin. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
- Make sure the JetBrains Chrome Extension is installed in your Chrome browser, see Installing JetBrains Chrome extension.
首先要安裝PHPstorm的live edit插件
注意這里要實現實時預覽的話，是需要重新添加插件的live edit
安裝方法也是可以從上面的文檔里查閱到的，我這里就簡化下。
- MAC 下按
command+,調出來配置界面，點擊右側的plugins插件菜單。 - 繼續選擇
install Jetbrains plugins，彈出窗口輸入live edit，然后點擊install安裝或者updata升級，安裝完畢重啟PHPstorm。 - 下面為超級豐富的圖示教程，安裝過的也可以通過這個方法重啟啟用插件。
進入插件
搜索插件后安裝
點擊重啟
image.png
安裝瀏覽器插件
chrome瀏覽器安裝JetBrains IDE Support插件
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
（一枝紅杏出墻來，墻頭紅杏等君來，墻是好東西，自己爬吧）
實時預覽右鍵Debug即可
在需要實時預覽的頁面，點擊右鍵，選擇Debug 就可以了。實時預覽的效果：源碼窗口修改，瀏覽器窗口無刷新修改，是不是寫代碼很爽！
記得預覽的時候不要關閉瀏覽器頂部的黃色窗口，否則就實時預覽無效了
推薦閱讀
- MAC資料大全大綱（軟件、資料、限免）
- Sketch資料集合（請收藏，不斷更新ing）
- MAC好軟推薦-Eagle圖片管理提升效率的神器
- MAC高級技巧-突破百度云會員高速下載
- [原創]Chrome瀏覽器常用插件列表
點贊、關注、加轉發！
點贊的人發福利
未經許可禁止轉載，分享到朋友圈才是義舉。（轉載聯系作者）
