Skip to main content

Debug your story

Debug Controls

Visual debugging

From Monarch you can enable several options to visually debug your stories:

  1. Slow animations: Run animations 5 times slower to help fine-tune them.
  2. Show guidelines: Overlay guidelines to assist with fixing layout issues.
  3. Show baselines: Show baselines, which are used for aligning text. Can be useful for checking if text is aligned.
  4. Highlight repaints: Show borders that change color when elements repaint. Useful for finding unnecessary repaints.
  5. Highlight oversized images: Highlights images that are using too much memory by inverting colors and flipping them.

For more information, see Flutter's Visual Debugging documentation.

Launch DevTools

DevTools is a suite of performance and debugging tools provided by the Flutter team. You can launch DevTools from Monarch so you can further inspect, diagnose and debug your stories and widgets.

DevTools has many features you can explore to see how they affect your stories. The ones you may find most useful are "Select Widget Mode" and the "Details Tree".

DevTools will not show your widgets under its Widget tree on the left side or under the Layout Explorer tab. Monarch renders your stories and widgets dynamically so DevTools doesn't have enough diagnostics information to generate the widget tree. To see your widgets in DevTools use "Select Widget Mode" as described below.

After you click "Select Widget Mode", you can go to Monarch and select a widget on your story. You can then go to the "Details Tree" to see useful information about the selected widget’s properties, render object, and children.

Select Widget Mode
Details Tree

Debug your widgets source code

With Monarch and DevTools you can debug your widgets source code in isolation, without running the full app.

To debug a widget:

  1. From Monarch, launch DevTools.
  2. In DevTools, go to the Debugger tab.
  3. Click Libraries (top right) or use the hot key command ⌘ + P or ctrl + P.
  4. Search for your widget's source file or story source file.
  5. To set a breakpoint, click the left margin (the line number ruler) in the source area.
  6. Go to Monarch, and select a story that exercises the selected source file at the breakpoint location.
  7. The DevTools debugger will pause at your breakpoint.
  8. Now, you can inspect the call stack, variables and step through the code.
  9. Click Resume when you are done to let Monarch continue its normal operation.
Details Tree

For more information, see the DevTool's Debugger documentation.