直接在已打開頁面的瀏覽器中使用WebStorm進行調試

一、開發環境

1. chrome
2. JetBrains IDE Support
3. WebStorm2018.3

二、環境配置

2.1、WebStorm建立debug

首先在WebStorm中建立debug調試，步驟如圖1-圖3所示。

圖1

圖2

圖3

2.2、配置JetBrains IDE Support

在chrome上安裝JetBrains IDE Support插件然后進行配置，只需要確保端口和webstorm中調試的端口一致即可。具體配置選項如圖4所示。

圖4

2.3、開始調試

選擇WebStorm的調試按鈕進行調試，調試按鈕如圖5所示。

圖5

注意：現在選擇進行調試會重新打開一個chrome瀏覽器，這個新打開的chrome瀏覽器沒有任何插件和書簽，是非常干凈的一個chrome。當然，如果在這個干凈的chrome中想要自己插件和書簽，只需要登錄自己的chrome賬號即可進行插件和書簽的同步。這樣下次再次進行調試調試打開的chrome上就會擁有相應的書簽和插件。（當然前提是要能夠登錄chrome賬號）。

從上面的步驟可以看出其實我們安裝的JetBrains IDE Support插件根本就沒有體現出作用。那JetBrains IDE Support有什么作用呢？這個插件的主要作用就是能夠在當前已經打開的chrome中進行調試，不需要重新打開新的chrome進行調試。那應該怎么設置呢？通過一個偶然的事件，發現需要設置Live Edit選項。在 File->Settings->Build,Execution,Deployment->Live Edit->選擇使用JetBrains IDE Support插件調試。具體設置如圖6所示。

圖6