As discussed in Debugging During Testing With NodeJS, testing and debugging under NodeJS is very productive. There are times, though, where you need a browser environment. Fortunately, PyCharm Professional 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
method, and stop there under the debugger, but in this case the Chrome
Make a Run Configuration
First, fire up your
npm script for
start if it isn't running.
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
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
http://localhost:3000. Finally, choose Chrome in the
Ok then run this configuration. Presuming that your npm
is still running, you should see a browser launched.
Finish up by closing that new browser window.
Now it's time to debug in the browser. Put a breakpoint inside the
label method. Then, re-run the
made, but this time, click the
Chrome should pop up. Reload the URL and focus shifts to the IDE, with execution stopped on the line of the breakpoint.
You can do the same debugging tasks as before:
- Highlight a snippet and execute it
- Step through code
engine. To verify, use
Variables to look at the
Global | chrome
To clean up, click the red button to stop the debugger, close Chrome, and clear the breakpoint.
As a note, none of the files changed in this step.