一、安裝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

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

打斷點(diǎn)

運(yùn)行Debug模式

不出意外的話(huà),應(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了。
五、其它說(shuō)明大部分項(xiàng)目都不是利用WebStorm內(nèi)置的WebServer運(yùn)行項(xiàng)目的,比如更多的是使用Tomcat、browser-sync這類(lèi)工具,因?yàn)锳PI部分需要訪(fǎng)問(wèn)server-end,但也沒(méi)有問(wèn)題,假如你的項(xiàng)目啟動(dòng)后,訪(fǎ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)未勾選,如果需要在其它電腦上訪(fǎng)問(wèn)IDE內(nèi)置的WebServer,就要勾選這個(gè)選項(xiàng),否則只允許127.0.0.1 or localhost 訪(fǎng)問(wèn)WebServer,當(dāng)然,如果你的程序不依賴(lài)IDE的內(nèi)置的WebServer那么這個(gè)選項(xiàng)也沒(méi)必要勾選了。
新聞熱點(diǎn)
疑難解答
圖片精選