使用Chrome进行WebStorm调试 - 使用有用控制台的最佳工作流程并在WebStorm中设置断点 [英] WebStorm debugging with Chrome - best Workflow with useful console and setting breakpoints in WebStorm

问题描述

我希望实现的主要目标是直接在WebStorm中设置断点，而不必再次在Chrome中找到这些断点（我目前以警告为最快方式执行此操作...），而不会丢失Chrome中的任何功能。

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

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

如果我回到使用Chromes控制台，启动开发人员工具时JetBrains调试插件被禁用，使WebStorm中的断点无效 - 是否有更好的工作流程以实现两全其美？

更新：我正在使用调试器命令在现在的代码中，它至少比我以前使用的更好。来源：

The main thing I want to achieve is setting breakpoints directly in WebStorm instead of having to find them in Chrome again (I currently do this with warnings as the fastest way...), without losing any features available in Chrome.

I'm currently trying to switch from debugging JavaScript in Chrome to debugging in WebStorm directly. I got it setup using Remote Debugging together with the Chrome-plugin and it works quite good.

But the console style and options in WebStorm are far away from what I have in Chrome. console.warn has just the same colors as console.log output and I can't filter the output for errors or warnings. Are there any plugins or options to improve this behavior or do I need to stick to the Chrome console?

And if I fall back to using Chromes console, when starting the developer tools JetBrains debug plugin gets disabled, making the breakpoints set in WebStorm useless - is there a better workflow for getting best out of both worlds?

Update : I am using the "debugger;" command in the code for now, it at least is way better than what I used before. Source : Set a javascript breakpoint in code - in chrome?

I am still open for better suggestions where I don't have to change the code for debugging purposes.

/edit : Here is a screenshot of my console color setup and outputs (with the corresponding commands above them) :

解决方案

There currently seems to be no better solution than using the "debugger;" command in javascript for setting breakpoints (see comments to the question). That way we can use the great browser-debugger while setting breakpoints in the code.

这篇关于使用Chrome进行WebStorm调试 - 使用有用控制台的最佳工作流程并在WebStorm中设置断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！