一、JavaScript的調試
目前火狐和Chrome都具備調試JavaScript的功能,而且還是相當的強大。如果純粹是用瀏覽器來進行js調試的話,我比較喜歡用火狐。火狐可以安裝各種插件,真的是非常適合開發者。不過今天的主角並不是火狐,也不是Chrome,而是號稱最智能的JavaScript IDE:WebStorm。
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽爲“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源,繼承了IntelliJ IDEA強大的JS部分的功能。
其實WebStorm之所以支持調試JavaSccript,其實也是藉助了Chrome,只要Chrome安裝JetBrains IDE Support插件,就可以直接在WebStorm裏面進行調試了,效果那是非常的強大。
二、相關軟件安裝和配置
- 安裝WebStorm
WebStorm官網:( https://www.jetbrains.com/webstorm/ ) - 安裝Chrome和JetBrains IDE Support
JetBrains IDE Support的地址是:
https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
不過一般都是被牆了,所以得翻牆去安裝插件了。
不懂的人可以直接安裝藍燈軟件,很方便翻牆。
- 配置端口(不是必須的)
如果你的端口剛好被佔用,那麼記得修改相應的端口Chrome和WebStorm都要修改
WebStorm對應修改的地方:
三、WebStorm調試JavaScript
- WebStorm增加JavaScript調試選項
增加個TestJS的項目工程,直接選擇Empty Project類型即可
然後自己增加相應的html和js文件
在工程的右上角那裏,點那個下尖符號,彈出 Edit Configurations
點綠色的+號,然後選擇JavaScript Debug
配置好相關路徑就可以了
2.運行調試效果
點擊那個綠色的甲蟲,就可以看到實際的調試效果了。這個時候Chrome會有下面的提示
會自動切換回WebStorm的調試界面
如果僅僅是這樣,那麼跟其他瀏覽器的調試區別還是不是非常大,唯一的好處就是方便了,不用去切換。
下面的效果我覺得纔是更加的調試效果,因爲他可以直接把一些參數類型、數值結果直接顯示在代碼上面。
注意那個綠色的字體效果:
這樣可以有更加清晰明瞭的調試效果啦。