一、JavaScript的調(diào)試

目前火狐和Chrome都具備調(diào)試JavaScript的功能，而且還是相當(dāng)?shù)膹?qiáng)大。如果純粹是用瀏覽器來進(jìn)行js調(diào)試的話，我比較喜歡用火狐。火狐可以安裝各種插件，真的是非常適合開發(fā)者。不過今天的主角并不是火狐，也不是Chrome，而是號稱最智能的JavaScript IDE：WebStorm。

WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。被廣大中國JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

其實(shí)WebStorm之所以支持調(diào)試JavaSccript，其實(shí)也是借助了Chrome，只要Chrome安裝JetBrains IDE Support插件，就可以直接在WebStorm里面進(jìn)行調(diào)試了，效果那是非常的強(qiáng)大。

二、相關(guān)軟件安裝和配置安裝WebStorm
WebStorm官網(wǎng)：( https://www.jetbrains.com/webstorm/ ) 安裝Chrome和JetBrains IDE Support
JetBrains IDE Support的地址是：
https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
不過一般都是被墻了，所以得翻墻去安裝插件了。
不懂的人可以直接安裝藍(lán)燈軟件，很方便翻墻。

配置端口(不是必須的)
如果你的端口剛好被占用，那么記得修改相應(yīng)的端口Chrome和WebStorm都要修改

WebStorm對應(yīng)修改的地方：

三、WebStorm調(diào)試JavaScriptWebStorm增加JavaScript調(diào)試選項(xiàng)
增加個(gè)TestJS的項(xiàng)目工程，直接選擇Empty Project類型即可
然后自己增加相應(yīng)的html和js文件
在工程的右上角那里，點(diǎn)那個(gè)下尖符號，彈出 Edit Configurations

點(diǎn)綠色的+號，然后選擇JavaScript Debug

配置好相關(guān)路徑就可以了

2.運(yùn)行調(diào)試效果
點(diǎn)擊那個(gè)綠色的甲蟲，就可以看到實(shí)際的調(diào)試效果了。這個(gè)時(shí)候Chrome會(huì)有下面的提示

會(huì)自動(dòng)切換回WebStorm的調(diào)試界面

如果僅僅是這樣，那么跟其他瀏覽器的調(diào)試區(qū)別還是不是非常大，唯一的好處就是方便了，不用去切換。
下面的效果我覺得才是更加的調(diào)試效果，因?yàn)樗梢灾苯影岩恍﹨?shù)類型、數(shù)值結(jié)果直接顯示在代碼上面。
注意那個(gè)綠色的字體效果：


這樣可以有更加清晰明了的調(diào)試效果啦。

最新評論