如何從WebStorm內部刷新Chrome？

Question

雖然WebStorm調試器非常強大，但我更喜歡Chrome控制檯。我無法使用WebStorm的實時重新加載功能，因爲它是調試器的功能，並且在Chrome控制檯處於打開狀態時無法工作。每次我想刷新時都必須手動給予Chrome專注是令人頭疼的事情，所以有誰知道在不離開WebStorm的情況下在Chrome中觸發刷新的簡單方法？

Answer 1

我碰巧在Mac上，所以能夠通過使用WebStorm的External Tools配置和AppleScript來制定解決方案。以下是具體步驟：

在WebStorm定義一個外部工具配置

• 打開WebStorm的偏好（⌘）
• 轉到工具 - >外部工具
• 創建一個新的配置：
  • 點擊'+'按鈕（一個di考勤記錄會出現）
  • 設置名稱/描述爲首選
  • 取消選中打開控制檯
  • 設置計劃到osascript
  • 設置參數到-e "tell application \"Google Chrome\"" -e "repeat with theWindow in (windows)" -e "repeat with theTab in (tabs of theWindow)" -e "if theTab's URL contains \"localhost\" then" -e "reload theTab" -e "end if" -e "end repeat" -e "end repeat" -e "end tell"
  • 按OK保存

此時，您可以轉至工具 - >外部工具 - >來刷新其URL包含「localhost」的所有Chrome選項卡。

您也可以映射偏好

---

供參考鍵盤映射部的鍵組合，這裏是正在執行的AppleScript：

tell application "Google Chrome" 
    repeat with theWindow in (windows) 
     repeat with theTab in (tabs of theWindow) 
      if theTab's URL contains "localhost" then 
       reload theTab 
      end if 
     end repeat 
    end repeat 
end tell 

---

更新：

外部工具配置和keybind是很棒，但留下了一些需要的東西。 TypeScript需要時間進行編譯，因此在保存後我留下了垃圾郵件，直到我看到我的更改爲止，直到我看到我的更改爲止......我真正想要的是Chrome在刷新之前等待所有TypeScript進行編譯。這是我想出了：

通過設定NPM運行配置的命令版本，你可以設置一個運行配置，有效地不執行任何操作，但調用外部工具（see this post）。我使用這個策略創建一個運行配置，首先調用編譯TypeScript，然後刷新Chrome標籤我之前定義的腳本。這裏的關鍵是這些外部工具按順序運行。

採取了一步，我定義了一個宏，將「全部保存」，然後在「運行」並反彈⌘S運行調用此宏。現在，無論何時保存，Chrome都會自動刷新，已經編譯了TypeScript，沒有任何其他按鍵。