一、安裝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模式
不出意外的話,應(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
這類工具,因?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)手試一試!
新聞熱點(diǎn)
疑難解答
圖片精選