Debug JavaScript with pleasure

As software developers, we spend a lot of time figuring out what went wrong. For this purpose, most of us use Chrome DevTools and this is an awesome and powerful instrument. DevTools knows all the interesting stuff related to the current runtime but it doesn’t know much about how we organize our code. Usually, we write code in IDE which knows our code pretty well but has a lack of runtime information which is needed for debugging.

It would be nice to have DevTools inside IDE. Then we could write and debug our code without switching the context and get the best of both worlds: helpful runtime information from DevTools and a very useful IDE’s navigation inside our code.

And we can! Yes, we could have done it before (since 2014) using something like Spy-js but it requires too much configuration to work properly so I couldn’t call it “with pleasure”. Thanks to DevTools we can do it pretty easy now in our IDEs.

I’ll show how to setup debugger inside IntelliJ IDEA but you can do it in Visual Studio Code too.

It’s better to start from an easy example which allows us to get familiar with debugging in IDE, which we can customize further. I recommend https://github.com/udacity/60fps repository as a first candidate to play with embedded Debugger.

So let’s clone it.

git clone https://github.com/udacity/60fps 60fps

Now open it in IntelliJ IDEA or WebStorm.

Open /lesson1/layoutPaint/index.html and select Run | 🐞 Debug 'index.html' in the menu.

It’ll show “index.html” in a browser and Debug Tool Window in the editor.

Now we are ready to start debugging. Set a breakpoint on line 40 by clicking on the gutter near the line number.

Switch to the browser and click on the document. After that IDEA will focus on the editor and you will see that execution was stopped on line 40.

As you can see IDEA is already showing some information about expressions, for example, that document.body.style.width is equal to an empty string. You can check this statement yourself using the “Evaluate Expression” action. You can find this action in the Debugger’s toolbar.

If you press the “Evaluate Expression” button, IDEA will show you a window with a text field where you can type an expression and evaluate it.

Therefore, “document.body.style” doesn’t have “width”. You can also hover over the expression to see its value.

Or if you prefer a keyboard, like me, you can set the cursor on expression and press the shortcut for “Quick Evaluate Expression”.

You can even select a part of an expression or a whole expression and evaluate it.

You can play with evaluation and explore the code around using “Goto declaration”, “Quick Documentation” etc.

Now it is time to go further. As you may have noticed the Debug window looks similar to DevTools. It has information about call stack and variables, “Console” tab where you can also play with code inside the current runtime context, actions “Step Over”, “Step Into”, “Step Out” which allow you to control execution.

Now you can press “Step Over” to continue execution and check what it would lead to and how the current app’s state would change.

Yes, it’s an extremely simple project which even doesn’t require you running a web server. But it allows us to play with the new tool and customize our IDE.

So I recommend to spend some time here and play with this project to be comfortable with debugging in IDE.

Real projects are much bigger and require the setup development environment but I’ll skip this step because it’s a little bit out of the scope of the current article. I’ll show how to setup Debugger for a “webpack” project but as the setup is pretty straight forward I don’t think that you will have problems to adopt it in your own project even if you are using another set of tools. Let’s go!

I assume that you have already installed “webpack” and “webpack-dev-server”. The first thing we should do is to add “source maps”.

The important parameter here is --devtool=eval-source-map, which adds source maps for our code. This parameter is needed to properly map the code generated by “webpack” with the source code.

Now let’s launch the “webpack-dev-server”.

It doesn’t matter how you start it, from IDEA or terminal. In my case, I have run it from IDEA and the server starts on “localhost:8080".

Now let’s create Debug configuration. Open “Edit Configurations…” dialog

and press “Add New Configuration” button.

Find and select “JavaScript Debug”.

Type the name for this configuration and insert URL where our server is running, in my case “localhost:8080”.

Press “Apply”, close the window and select Run | 🐞 Debug “index.html (Debug) on the menu.

Set “breakpoint” and reload the page.

And voila, you are ready to debug your code.

Should I say that you can debug your tests like this too?

I have used this debugging process not only to fix bugs but also to study how different libraries and frameworks like “Angularjs”, “React”, “MobX”, “YourName” work.

Thanks and happy debugging! 🤓