Debugging Server Rendering with the Node VM Rendering Server

[justin808]

Motivation

Because server rendering often uses react_component_hash to get the meta tags for SEO, we can't just flip a switch and turn off server rendering to debug the code in the browser. Here are the steps to debug the rendering code if using the React on Rails Pro Node VM Renderer

1. Start the compilation of the webpack files and in a separate process.
2. Start Node process in its own shell with this command, like this:

node --inspect vm-renderer.js -p 3800

3. Open up the Chrome dev tools devices: chrome://inspect/#devices
4. Click the "Configure..." button next to Discover network targets.
5. Look at your terminal for for the vm-renderer and add the port corresponding to a line looking like Debugger listening on ws://127.0.0.1:9229/84cd33a7-8965-48f6-ad6b-31d9e368b667.
6. Open up the debugger window by clicking inspect under the Target that does not have the version of Node listed.
7. When you click inspect, you'll see the message Debugger attached. in the your terminal window for the vm-renderer.
8. Add a debugger line to the place in the rendering JavaScript code where you'd like the debugger to stop.
9. Hit the affected URL in the browser and the debugger window should open to the line where you put the debugger breakpoint.
10. You can navigate in the stack up to App and see what props are coming from Rails.

Troubleshooting

On the chrome://inspect/#devices

1. Double check that you configured the right network target. Check your console log from the vm-renderer
2. Try clicking the other "Target" under "Remote Target.
3. Since the workers restart per the console message: [ROR-VM] info: Scheduled workers restarts every 15 minutes (2 minutes btw each) you will need to reattach the debugger.

Setup

Debugger line

Seeing props sent to the app