如何从 WebStorm 中刷新 Chrome？

Question

虽然 WebStorm 调试器非常强大，但我更喜欢 Chrome 控制台。我无法使用 WebStorm 的实时重新加载功能，因为它是调试器的功能，并且在 Chrome 控制台打开时无法工作。每次我想刷新时都必须手动给 Chrome 焦点是一件令人头疼的事，那么有没有人知道在不离开 WebStorm 的情况下在 Chrome 中触发刷新的简单方法？

Answer 1

我碰巧在 Mac 上，因此能够通过利用 WebStorm 的外部工具配置和 AppleScript来制定解决方案。以下是步骤：

在 WebStorm 中定义外部工具配置

• 打开 WebStorm 首选项 (?,)
• 转到工具 --> 外部工具
• 创建一个新配置：
  • 单击“+”按钮（将出现一个对话框）
  • 将名称/描述设置为首选
  • 取消选中打开控制台
  • 将程序设置为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"
  • 按确定保存

此时，您可以进入工具--> 外部工具--> 刷新所有URL 包含“localhost”的chrome 选项卡。

您还可以在首选项的Keymap部分映射组合键

作为参考，这是正在执行的 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

更新：

外部工具配置和键绑定很棒，但仍有不足之处。TypeScript 需要时间来编译，所以保存后我一直在发送我的刷新键绑定，直到我看到我的更改......我真正想要的是 Chrome 在刷新之前等待所有 TypeScript 编译。这就是我想出的：

通过将npm运行配置的命令设置为version，您可以设置一个运行配置，该配置除了调用外部工具之外什么都不做（参见这篇文章）。我使用此策略创建了一个运行配置，首先调用Compile TypeScript，然后调用我之前定义的Refresh Chrome Tabs脚本。这里的关键是这些外部工具是按顺序运行的。

为了更进一步，我定义了一个宏，该宏将“全部保存”，然后“运行”并反弹 ?S 以运行调用此宏。现在，每当我保存时，Chrome 都会在编译 TypeScript后自动刷新，无需任何额外的按键操作。