一、安裝Chrome插件

這一步需要翻墻，打開Chrome然后打開Web Stroe，搜索"jetbrains ide support"，在Extensions中找到如圖

安裝它，安裝成功后Chrome的右上角應(yīng)該出現(xiàn)擴展程序JetBranins IDE Support的圖標

點擊右上角這個圖標

新建一個JavaScript Debug

填寫一個名字，隨意起，選擇URL，還有瀏覽器，這里瀏覽器當(dāng)然選擇Chrome，然后確定

打斷點

運行Debug模式

不出意外的話，應(yīng)該會自動打開你的Chrome，并且有一行debug提示

WebStorm這邊應(yīng)該是已經(jīng)斷點，并且可以進行調(diào)試了

調(diào)試界面功能齊全，不比Chrome自帶工具差，如果要調(diào)試element style只能在Chrome了。

大部分項目都不是利用WebStorm內(nèi)置的WebServer運行項目的，比如更多的是使用Tomcat、browser-sync這類工具，因為API部分需要訪問server-end，但也沒有問題，假如你的項目啟動后，訪問地址為：localhost:3000，那么你在添加Debug的界面就要改成如下：

其它不變。右鍵JetBrains IDE Support這個插件，可以打開選項，界面非常簡單

這個插件能夠跟IDE通訊，其實是通過一個Host和Port鏈接IDE的，也就是WebStorm打開時已經(jīng)自動啟動一個Debuger Server，任何遵照它的協(xié)議連接上它即可實現(xiàn)IDE調(diào)試，我們打開IDE的屬性，然后搜索Debugger，會發(fā)現(xiàn)這些配置信息，默認端口為63342，你可以修改這個端口，一般情況下沒必要修改，如飛防火墻或者其它程序占用了端口才會去修改它

其中有一項

Can accept external connections

這個選項默認未勾選，如果需要在其它電腦上訪問IDE內(nèi)置的WebServer，就要勾選這個選項，否則只允許127.0.0.1 or localhost 訪問WebServer，當(dāng)然，如果你的程序不依賴IDE的內(nèi)置的WebServer那么這個選項也沒必要勾選了。

最后大家可以動手試一試！