A Cool Way to Debug JavaScript Applications using JetBrains IDEs

Hi folks,

It’s been a while, but in this article I will briefly discuss a very nice way to debug JavaScript applications when using JetBrains IDEs. For those who are unfamiliar, JetBrains is a manufacturer of very powerful and elegant IDEs for developing applications in a variety of languages. The first one I came across and loved is PhpStorm, the best IDE I’ve come across for PHP application development. I’ve also gone on to use others including PyCharm, IntelliJ IDEA and, most recently, WebStorm. Okay back to business.

So, to the issue at hand. JetBrains has an excellent Chrome extension called JetBrains IDE Support Chrome Extension which allows you debug JavaScript code in Chrome using WebStorm, PhpStorm, IntelliJ IDEA Ultimate, PyCharm Professional and RubyMine. It’s available on the Chrome Web Store for download. You can set breakpoints, step through code, view variables and do various other activities once this plugin is installed and activated.

I have used it recently and it works pretty well. This reduces the need for console logs. It’s also more convenient than having the write ‘debugger’ statements in code. So, if you write a lot of JavaScript applications and use JetBrains IDEs, then try out JetBrains IDE support today. Till next time.

How to Copy Long Console Log in Google Chrome

When debugging JavaScript, you may come across situations where you have printed out some super-long variable which Chrome console doesn’t fully show. In order to retrieve the full variable, right-click the output, click Store as Global Variable. A variable name will appear at the bottom of the console together with the value you desire. Let’s assume the variable name is temp1. Execute the following command in the console:

copy(temp1);

That’s it! The value is now in your clipboard and can be pasted into an editor of your choice.