一、安裝Chrome插件

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

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

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

新建一個(gè)JavaScript Debug

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

打斷點(diǎn)

運(yùn)行Debug模式

不出意外的話，應(yīng)該會(huì)自動(dòng)打開(kāi)你的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部分需要訪問(wèn)server-end，但也沒(méi)有問(wèn)題，假如你的項(xiàng)目啟動(dòng)后，訪問(wèn)地址為：localhost:3000，那么你在添加Debug的界面就要改成如下：

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

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

其中有一項(xiàng)

Can accept external connections

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

最后大家可以動(dòng)手試一試！