開發工具
WebStorm + Google Chrome + JetBrains IDE Support 插件
效果
先來一張截圖，看一下效果。
image
準備工作
WebStorm 的 Javascript Debug 只能選擇 Google chrome（至少在我的電腦上是這樣），所以，JetBrains IDE Support 插件需要安裝到 Google chrome 上。
- chrome 最新版下載
- 安裝插件，在應用中心，搜索：JetBrains IDE Support，不過，由于眾所周知的原因，如果你不能訪問谷歌應用中心的話，可以下載離線版進行安裝。
- 離線安裝包下載鏈接
- 下載之后，先開啟 chrome 的開發者模式，重啟 chrome，再將文件直接拖至 chrome 的擴展頁面，按照提示安裝即可。
image
image
- WebStorm 和 JetBrains IDE Support 端口設置成一樣。
image
點擊 JetBrains IDE Support 插件的 logo 右鍵，出來如下窗口，點擊【Options】設置端口
image - 添加 JavaScript Debug 啟動項。
添加 JavaScript Debug 啟動項
只能選擇 chrome 瀏覽器
只能選擇 chrome 瀏覽器
調試
-
在 WebStorm 的【Terminal】窗口運行
npm start。也可以按照如下配置，就象用 IDEA 開發 Java 程序一樣配置啟動項，然后直接點擊小蟲子左邊的三角啟動項目。
image
image -
選擇剛才添加的【JavaScript Debug】啟動項【jsDebug】，點擊 Debug 按鈕（小蟲子），會打開 chrome 窗口，這時候的操作便會觸發調試，盡情享受編程的樂趣吧~~~
image
image
chrome 安裝插件遇到的問題
現象
提示：無法從該網站添加應用、擴展程序和用戶腳本
拖上去的插件，變成下載了，汗~~
image
開啟開發者模式，重新將插件拖上去，問題依舊。
解決
開啟開發者模式之后，重啟瀏覽器，重新安裝，就一切正常了。看來開啟開發都模式之后，需要重啟瀏覽器才會生效。
image
image
