WebStorm debugging with Chrome - best Workflow with useful console and setting breakpoints in WebStorm

孤街浪徒 提交于 2019-12-10 13:14:10

问题


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) :


回答1:


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.



来源:https://stackoverflow.com/questions/32330022/webstorm-debugging-with-chrome-best-workflow-with-useful-console-and-setting-b

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!