一、安裝Chrome插件

打開Chrome然后打開Web Stroe，搜索"jetbrains ide support"，在Extensions中找到如圖

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

二、在WebStorm中新建一個項(xiàng)目

三、新建debug配置項(xiàng)

點(diǎn)擊右上角這個圖標(biāo)

新建一個JavaScript Debug

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

四，開始調(diào)試程序

打斷點(diǎn)

運(yùn)行Debug模式

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

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

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

五、其它說明

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

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

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

其中有一項(xiàng)

Can accept external connections

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

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