像用 IDEA 調試 Java 代碼一樣，用 WebStorm 調試 react 代碼

開發工具

WebStorm + Google Chrome + JetBrains IDE Support 插件

效果

先來一張截圖，看一下效果。

準備工作

WebStorm 的 Javascript Debug 只能選擇 Google chrome（至少在我的電腦上是這樣），所以，JetBrains IDE Support 插件需要安裝到 Google 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 安裝插件遇到的問題

現象

提示：無法從該網站添加應用、擴展程序和用戶腳本
拖上去的插件，變成下載了，汗~~

開啓開發者模式，重新將插件拖上去，問題依舊。

解決

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

關於作者

• github: https://github.com/uncleAndyChen
• gitee: https://gitee.com/uncleAndyChen
• 個人博客：https://www.lovesofttech.com
• CSDN博客：https://blog.csdn.net/runAndRun
• 郵箱：[email protected]