最近HTML5很火,而且大家都在用WebStorm開(kāi)發(fā)工具,但是有個(gè)問(wèn)題是我們寫(xiě)JavaScript怎么像其他編輯器那樣進(jìn)行斷點(diǎn)調(diào)試呢,今天就帶大家來(lái)配置一下,讓你的WebStorm如同飛一般的感覺(jué)。

1.斷點(diǎn)調(diào)試需要瀏覽器添加支持的插件,以Chrome瀏覽器為例,如果怕麻煩的同學(xué)可以直接點(diǎn)擊下面的連接為Chrome添加插件

https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji

ps:需要翻墻哦

2.如果你記不住的話(huà),直接看圖

3.點(diǎn)擊獲取更多擴(kuò)展程序

4.搜索

JetBrains IDE Support

5.然后添加

6.接下來(lái)在你的Chrmoe的右上角就能看到一個(gè) JB了

7.然后配置 配置完成之后要點(diǎn)擊 Apply

8.接下來(lái)設(shè)置默認(rèn)瀏覽器為Chrome這一步很關(guān)鍵,因?yàn)檎{(diào)試的瀏覽器只會(huì)啟動(dòng)默認(rèn)瀏覽器

9.開(kāi)始調(diào)試

打開(kāi)webStrom,創(chuàng)建一份工程,寫(xiě)javaScript代碼

注意這里調(diào)試的只是javaScript

10.點(diǎn)擊斷點(diǎn),在js代碼前面點(diǎn)擊,當(dāng)代碼執(zhí)行的時(shí)候就會(huì)在這里停下,下面的代碼就不執(zhí)行了

11.然后在這個(gè)工程的HTML文件上右鍵

12.接下來(lái)你就會(huì)看到斷點(diǎn)調(diào)試后的界面