準備工作

WebStorm 的 Javascript Debug 只能選擇 chrome（至少在我的電腦上是這樣），所以，JetBrains IDE Support 外掛需要安裝到 chrome 上。

1. chrome 最新版下載
2. 安裝外掛，在應用中心，搜尋：JetBrains IDE Support，不過，如果谷歌應用中心，由於眾所周知的原因不能訪問的話，可以下載離線版進行安裝。
   • 安裝包下載
   • 下載之後，先開啟 chrome 的開發者模式（詳情請見chrome 安裝外掛遇到的問題），重啟 chrome，再將檔案直接拖至 chrome 的擴充套件頁面，按照提示安裝即可。
     
     
     
3. WebStorm 和 JetBrains IDE Support 埠設定成一樣。
   
   點選 JetBrains IDE Support 外掛的 logo 右鍵，出來如下視窗，點選【Options】設定埠
   
4. 新增 JavaScript Debug 啟動項。
   
   只能選擇 chrome 瀏覽器
   

除錯

1. 在 WebStorm 的【Terminal】視窗執行 npm start。

   也可以按照如下配置，就象用 IDEA 開發 Java 程式一樣配置啟動項，然後直接點選小蟲子左邊的三角啟動專案。

   
   

2. 選擇剛才新增的【JavaScript Debug】啟動項【jsDebug】，點選 Debug 按鈕（小蟲子），會開啟 chrome 視窗，這時候的操作便會觸發除錯，盡情享受程式設計的樂趣吧~~~
   

   
   

chrome 安裝外掛遇到的問題

現象

提示：無法從該網站新增應用、擴充套件程式和使用者指令碼
拖上去的外掛，變成下載了，汗~~

開啟開發者模式，重新將外掛拖上去，問題依舊。

解決

開啟開發者模式之後，重啟瀏覽器，重新安裝，就一切正常了。看來開啟開發都模式之後，需要重啟瀏覽器才會生效。