P5.js Debug Mode

Debugging is an essential part of software development, which involves identifying and fixing errors in code. When working with P5.js, debug mode can be a useful tool to help you track down and solve issues in your code.

The debugMode() function allows you to turn on or off various debug settings in P5.js, including displaying error messages, showing frames per second (FPS), and highlighting performance bottlenecks in your code.

Syntax

To enable debug mode, call the debugMode() function with one of the following constant values as its argument:

• OFF - disables all debug settings
• CORNER - displays FPS in the top-left corner of the canvas
• TOP_LEFT - displays FPS in the top-left corner of the canvas and shows error messages
• TOP_RIGHT - displays FPS in the top-right corner of the canvas and shows error messages
• BOTTOM_LEFT - displays FPS in the bottom-left corner of the canvas and shows error messages
• BOTTOM_RIGHT - displays FPS in the bottom-right corner of the canvas and shows error messages

function setup() {
  createCanvas(400, 400);

  // enable debug mode with FPS display in the top-left corner
  debugMode(CORNER);
}

Debug Settings

FPS Display

When debug mode is enabled, the number of frames per second (FPS) is displayed on the screen. This can be useful for monitoring the performance of your code and identifying any bottlenecks that may be slowing down your program.

You can change the position of the FPS display by using the debugMode() function with one of the TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, or BOTTOM_RIGHT constant values.

Error Messages

By default, P5.js displays error messages in the browser console. However, when debug mode is enabled with TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, or BOTTOM_RIGHT, error messages are displayed on the screen in addition to the console.

This can be useful for quickly identifying errors that may be occurring in your code without having to switch back and forth between the browser console and your code editor.

Performance Highlighting

When debug mode is enabled with TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, or BOTTOM_RIGHT, P5.js will highlight any performance bottlenecks in your code by displaying a red frame around the affected areas of the canvas.

This can be useful for identifying areas of your code that may need optimization in order to improve performance.

Conclusion

Debugging is an essential part of the software development process, and P5.js debug mode can be a helpful tool in identifying and fixing errors in your code. By using the debugMode() function, you can turn on or off various debug settings, including FPS display, error messages, and performance highlighting.