如何从 WebStorm 中刷新 Chrome？

Question

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

Answer 1

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

在 WebStorm 中定义一个外部工具配置

打开 WebStorm 首选项 (⌘,)
转到工具 --> 外部工具
创建新配置：
- 单击“+”按钮（将出现一个对话框）
- 将 name/description 设置为首选
- 取消选中 打开控制台
- 将程序设置为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 选项卡

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

作为参考，这里是正在执行的 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，您可以设置运行除了调用外部工具之外什么都不做的配置 (see this post)。我使用此策略创建了一个运行配置，首先调用 Compile TypeScript 然后 Refresh Chrome Tabs 我定义的脚本更早。这里的关键是这些外部工具是运行顺序

为了更进一步，我定义了一个宏，它将 "Save All" 然后 "Run" 和反弹 ⌘S 到运行调用这个宏。现在，每当我保存时，Chrome 会在 TypeScript 编译完成后自动刷新 ，无需任何额外的按键操作。

如何从 WebStorm 中刷新 Chrome？

How can I refresh Chrome from within WebStorm?

google-chrome

webstorm

更新：