How To: Debugging Server-Side Code

How To: Debugging Server-Side Code

How To: Debugging server-side code

You can debug server-side code, both Meteor and Node API code, using Chrome DevTools and within integrated developer environments like Visual Studio Code (VS Code), a free code editor and WebStorm by JetBrains.

Here are the steps to get started using Reaction in inspect mode in any editor:

Launch the application in inspect mode

  1. Before we get started, make sure you are running Reaction 2.0.

Check your Reaction version by running:

grep '"version"' package.json

Copy

You should see an output of Reaction's version:

"version": "2.0.0-rc.10",

Copy

If your Reaction version is older than 1.6, you will have to upgrade to at least 1.6 first.

  1. Now you're ready to run reaction in inspect mode.

If you're using Docker to develop, first, make sure you are not already running reaction with docker-compose up. In that case, make sure you docker-compose stop reaction first. Then, run reaction with one of the following inspect flags:

docker-compose run --rm --service-ports --name reaction reaction npm run inspect-docker

Copy

docker-compose run --rm --service-ports --name reaction reaction npm run inspect-brk-docker

Copy

Or, you can run the application in inspect-mode without Docker using:

npm run inspect

Copy

npm run inspect-brk

Copy

Using inspect-brk will break before any user code starts, while inspect will break at a specified point. Learn more about inspect and inspect-brk from the Node documentation.

  1. Once this process has started, Node opens a WebSocket to listen for a debugger on port 9229 by default. Once you've successfully attached a debugger, you'll see the Debugger attached message in your Terminal:

Debugger listening on ws://127.0.0.1:9229/...

Copy

After that, the application will run, just like running npm dev.

You'll see the typical Reaction application logging:

INFO Reaction: Reaction initialization finished.

=> Started your app.

=> App running at:

Copy

Now, you're ready to debug!

Inspecting with Chrome DevTools

  1. Open Google Chrome and visit chrome://inspect.

DevTools setup

  1. Click Open dedicated DevTools for Node.
  2. There are two main ways to set up breakpoints: in the DevTools or in the code.
  • To set up a breakpoint in DevTools, open up the Source tab and navigate to a file you would like to debug in the left-side bar. Click on the line number where you'd like the code to stop executing. You can set up as many breakpoints as you'd like.
  • To set up a breakpoint in your code, add the keyword debugger right before you'd like the application to pause execution.

Remember: Since you are currently debugging the Reaction server, you'll only have access to code that runs on the server - not the client.

  1. Now open as you normally would and the code should stop executing at your first breakpoint.

In this example, the code stopped executing at a breakpoint in the Products publication, which gets called whenever a client connects to the product grid on the index route:

DevTools setup

  1. At this breakpoint, you can access the Console by hitting esc and opening the Drawer.

DevTools setup

Now you can watch variables, check the call stack and investigate scope to better debug while you develop.

To learn more about Chrome DevTools, check out Google's Tools for Web Developers.

Inspecting in VS Code

Note: You can only have one debugger connected at a time, so if you've already connected to DevTools, then you'll need to disconnect before you can connect with VS Code.

Setting up VS Code and connecting it to the Node debugger is only slightly more complicated than using DevTools. But once it's set up, it can easily become a part of your regular workflow.

  1. In the root of your project directory, add a .vscode/launch.json file.

DevTools setup

  1. Set up your file:

.vscode/launch.json

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Reaction Server",

"cwd": "${workspaceRoot}/",

"runtimeExecutable": "${workspaceRoot}/.meteor/local/dev_bundle/bin/npm",

"restart": true,

"timeout": 30000,

"stopOnEntry": false,

"sourceMaps": true,

"protocol": "inspector",

"port": 9229

}

]

}

Copy

This borrows heavily from a Meteor forum post on Meteor 1.6 server debugging with VS Code.

Tip: Port 9229 is the default Node inspector port, but if you switch to another one, eg. --inspect=5000, then you'll need to adjust the port in your launch.json file.

  1. Open the debug panel and click the Play icon

DevTools setup

Now you can debug without even leaving your code editor.

To learn more about debugging JavaScript with VS Code, check out VS Code's debugging guide.

Inspecting in Webstorm

  1. Create a new Run/Debug configuration based on the Meteor default.

Use the following settings:

  • Meteor executable: /usr/local/bin/meteor
  • Program arguments: --settings settings/dev.settings.json --raw-logs
  • Working directory: /YourMachine/code/reaction
  • Environmental variables: REACTION_EMAIL=email;REACTION_AUTH=...

Webstorm setup

  1. Select your breakpoints by clicking along the left-hand side line numbers.
  2. Click on the Debug icon to start you Reaction app in debugger mode.
  3. Use the Step In, Step Out, Steop Over buttons to navigate through the code.
Top View