Print statements in Replay are your magic wand for debugging. Replay lets you add print statements (also called console logs) to an existing replay with no need to compile or re-run the code.

With print statements, you can see how many times a function executed, evaluate parameters, and even add comments to provide insights for your team.

https://www.loom.com/share/f7161a6e7ed54f71b542f635717d9253

Adding a print statement

You can add a print statement to any line of executable code in a source.

  1. Hover over a line of code to see how many times the line was hit.
  2. A blue plus button will appear if a print statement can be added. Click the button to add a print statement.

<aside> 💡 The screenshot below is from a public replay of replay.io/demo. To follow along, open demo-script.js file in the Editor.

To log all of the calls to the randomizeIllustration function, click on the blue plus button on line 68.

</aside>

Screenshot 2023-01-25 at 1.49.27 PM.png

Clicking the blue plus button opens the Print Statement panel with the initial expression and when the function calls occurred. The calls are indicated by markers on the timeline under the expression.

The console will also update to show the new console logs. Initially, the print statement will output the line number of the code.

<aside> 💡 In our example, we can see randomizeIllustration was called four times. This is indicated by the four markers on the timeline, as well as the console output.

</aside>

Screenshot 2023-01-25 at 1.49.50 PM.png

Editing a print statement

Print statements can be edited to control the output to the console.