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

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

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

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

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

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

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

會自動切換回WebStorm的調(diào)試界面

如果僅僅是這樣，那么跟其他瀏覽器的調(diào)試區(qū)別還是不是非常大，唯一的好處就是方便了，不用去切換。
下面的效果我覺得才是更加的調(diào)試效果，因為他可以直接把一些參數(shù)類型、數(shù)值結(jié)果直接顯示在代碼上面。
注意那個綠色的字體效果：

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

最新評論