如何从WebStorm中刷新Chrome？

Question

虽然WebStorm调试器非常强大，但我更喜欢Chrome控制台。我无法使用WebStorm的实时重新加载功能，因为它是调试器的功能，并且在Chrome控制台打开时无法正常工作。每次我想要刷新时都必须手动为Chrome提供焦点，所以有人知道在不离开WebStorm的情况下在Chrome中触发刷新的简便方法吗？

Answer 1

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

在WebStorm中定义外部工具配置

• 打开WebStorm首选项（⌘，）
• 转到工具 - ＆gt;外部工具
• 创建新配置：
  • 点击＆＃39; +＆＃39;按钮（将出现一个对话框）
  • 将名称/说明设为首选
  • 取消选中打开控制台
  • 将计划设置为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"
  • 按确定进行保存

此时，您可以转到工具 - ＆gt;外部工具 - ＆gt;刷新其URL包含＆＃34; localhost＆＃34;。

的所有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 ，您可以设置一个运行配置，除了调用外部工具（see this post）之外什么都不做。我使用此策略创建运行配置首先调用 Compile TypeScript ，然后调用我之前定义的 Refresh Chrome Tabs 脚本。这里的关键是这些外部工具是按顺序运行的。

为了更进一步，我定义了一个宏，它将＆＃34;全部保存＆＃34;然后＆＃34;运行＆＃34;和反弹⌘S运行调用此宏。现在，每当我保存时，Chrome都会在编译TypeScript后自动刷新，而无需任何其他按键操作。