WebStorm強大的調試JavaScript功能

一、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裏面進行調試了,效果那是非常的強大。

二、相關軟件安裝和配置

  1. 安裝WebStorm
    WebStorm官網:( https://www.jetbrains.com/webstorm/ )
  2. 安裝Chrome和JetBrains IDE Support
    JetBrains IDE Support的地址是:
    https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji
    不過一般都是被牆了,所以得翻牆去安裝插件了。
    不懂的人可以直接安裝藍燈軟件,很方便翻牆。
    這裏寫圖片描述
  3. 配置端口(不是必須的)
    如果你的端口剛好被佔用,那麼記得修改相應的端口Chrome和WebStorm都要修改
    這裏寫圖片描述
    WebStorm對應修改的地方:
    這裏寫圖片描述

三、WebStorm調試JavaScript

  1. WebStorm增加JavaScript調試選項
    增加個TestJS的項目工程,直接選擇Empty Project類型即可
    然後自己增加相應的html和js文件
    在工程的右上角那裏,點那個下尖符號,彈出 Edit Configurations
    這裏寫圖片描述
    點綠色的+號,然後選擇JavaScript Debug
    這裏寫圖片描述
    配置好相關路徑就可以了
    這裏寫圖片描述

2.運行調試效果
點擊那個綠色的甲蟲,就可以看到實際的調試效果了。這個時候Chrome會有下面的提示
這裏寫圖片描述
會自動切換回WebStorm的調試界面
這裏寫圖片描述
如果僅僅是這樣,那麼跟其他瀏覽器的調試區別還是不是非常大,唯一的好處就是方便了,不用去切換。
下面的效果我覺得纔是更加的調試效果,因爲他可以直接把一些參數類型、數值結果直接顯示在代碼上面。
注意那個綠色的字體效果:
這裏寫圖片描述
這裏寫圖片描述
這樣可以有更加清晰明瞭的調試效果啦。

發佈了91 篇原創文章 · 獲贊 72 · 訪問量 78萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章