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

1、開發環境

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

2、環境配置

2.一、WebStorm創建debug

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

圖1

圖2

圖3

2.二、配置JetBrains IDE Support

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

圖4

2.三、開始調試

選擇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