Debugging JSX With Chrome

As discussed in Debugging During Testing With NodeJS, the testing and debugging under NodeJS is very productive. There are times, though, where you need a browser environment. Fortunately, the ID can remote-control the browser’s execution, letting you stay inside the IDE.

Let’s see this in a simple case. We’ll set a breakpoint in our label method, and stop there under the debugger, but in this case the Chrome debugger.

Make a Run Configuration

For this we’ll need a different kind of run configuration, one tailored for launching the Chrome browser. Add a new run configuration of type JavaScript Debug and supply a Name: such as App. As we saw in the first section, the webpack development server runs on port 3000, so provide the run configuration a URL: of http://localhost:3000.

Click Ok then run this configuration. Presuming that your npm start is still running, you should see a browser launched.

Browser Debug

Now it’s time to debug in the browser. Put a breakpoint inside the label method. Then, run the config, but this time, click the Debug button.

Chrome should pop up, but with nothing displayed, and a strange yellow Paused in debugger message. The IDE should, as it did in the previous lesson, stop execution on the line of the breakpoint.

You can do the same debugging tasks as before:

• Inspect Variables
• Highlight a snippet and execute it
• Step through code

In this case, all the execution is happening in the browser’s JavaScript engine. To verify, use Variables to look at the Global | chrome object.

Clean Up

• Click the red button to stop the debugger
• Close Chrome
• Clear the breakpoint