webstorm支持了我們在代碼上打斷點，然后就可以在編輯器里debug自己的js代碼，廢話不說看一下怎么配置,需要的朋友可以參考下
一、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調試JavaScriptWebStorm增加JavaScript調試選項
增加個TestJS的項目工程，直接選擇Empty Project類型即可
然后自己增加相應的html和js文件
在工程的右上角那里，點那個下尖符號，彈出 Edit Configurations
點綠色的+號，然后選擇JavaScript Debug
配置好相關路徑就可以了
2.運行調試效果
點擊那個綠色的甲蟲，就可以看到實際的調試效果了。這個時候Chrome會有下面的提示
會自動切換回WebStorm的調試界面
如果僅僅是這樣，那么跟其他瀏覽器的調試區別還是不是非常大，唯一的好處就是方便了，不用去切換。
下面的效果我覺得才是更佳的調試效果，因為他可以直接把一些參數類型、數值結果直接顯示在代碼上面。
注意那個綠色的字體效果：
這樣可以有更加清晰明了的調試效果啦。
謝謝閱讀！