使用 Chrome 进行 WebStorm 调试 - 具有有用控制台和在 WebStorm 中设置断点的最佳工作流程

Posted 2023-02-22

【中文标题】使用 Chrome 进行 WebStorm 调试 - 具有有用控制台和在 WebStorm 中设置断点的最佳工作流程

【英文标题】：WebStorm debugging with Chrome - best Workflow with useful console and setting breakpoints in WebStorm

【发布时间】：2015-11-26 14:18:40

【问题描述】：

我想要实现的主要目标是直接在 WebStorm 中设置断点，而不必再次在 Chrome 中找到它们（我目前这样做是用警告作为最快的方法...），不会丢失 Chrome 中的任何可用功能。

我目前正在尝试从在 Chrome 中调试 javascript 切换到直接在 WebStorm 中调试。我使用远程调试和 Chrome 插件进行了设置，效果很好。

但是 WebStorm 中的控制台样式和选项 与我在 Chrome 中的相差甚远。 console.warn 的颜色与 console.log 输出的颜色相同，我无法过滤输出中的错误或警告。是否有任何插件或选项来改善这种行为，还是我需要坚持使用 Chrome 控制台？

如果我回退到使用 Chromes 控制台，当启动开发者工具时，JetBrains 调试插件会被禁用，使得 WebStorm 中设置的断点无用 - 是否有更好的工作流程可以两全其美?

更新：我正在使用“调试器；”代码中的命令，至少比我以前使用的要好得多。来源：Set a javascript breakpoint in code - in chrome?

我仍然愿意寻求更好的建议，因为我不必为了调试目的而更改代码。

/edit ：这是我的控制台颜色设置和输出的屏幕截图（上面有相应的命令）：

【问题讨论】：

如果使用 WebStorm 调试器的问题之一是它（可能）在任何类似 gulp 的处理/服务之后对 JS 没有用处，例如一个连接或文件，并与 BrowserSync 结合使用......虽然我不是 100% 确定。

Alex，没错 - 但我没有这个问题（我的断点工作），因为我在我的服务器上添加了一个标志来禁用这样的东西（在我的情况下，聚合物硫化和 grunt 缩小）当我调试时。我目前正在寻找是否可以通过使用脚本或设置文件而不是单击文件来在 Chrome 中设置断点。

更新：我发现了“调试器”；在 chrome（和 firefox）中添加断点的命令 - 我现在将继续使用它，直到找到更好的解决方案。 ***.com/questions/10050465/… 。在发布之前必须清理代码有点烦人，但总比没有好;)

是的，调试器语句非常有用。快乐狩猎（错误）

我自己也在考虑 Grep Console 插件。如果代码是你的 .. 那么我可能只建议自己在记录的消息中添加这样的WARN:、ERR: 标记——它工作得很好。当然，如果可以覆盖此类标准函数或将您自己的代理函数用于此类东西（这可能太多而无法满足 IDE），那会更好。相关说明：错误输出获取 sep 颜色（您可以更改）.. 但没有用于警告的这种 sep 颜色样式...） ATM 我可能只建议向他们的问题跟踪器提交一张票youtrack.jetbrains.com/issues/WEB跨度>

【参考方案1】：

目前似乎没有比使用“调试器”更好的解决方案； javascript 中用于设置断点的命令（请参阅问题的 cmets）。这样我们就可以在代码中设置断点时使用出色的浏览器调试器。