Skip to main content

Debug your story

To print messages to the console use the debugPrint function which is part of the Flutter SDK.

Widget myStory() {
   debugPrint('FOO');
   return MyWidget();
}

Your messages will appear on the terminal where you executed monarch run from. You can call debugPrint from your stories or from your widget code.

Visual debugging​

Debug Controls

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 is useful for checking if text is aligned.
  4. Highlight repaints: Show borders that change color when elements repaint which is 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​

Widget Tree

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", "Widget Tree", "Layout Explorer" and the "Widget Details Tree".

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

When you switch stories on Monarch, you have to hit the refresh icon on the Widget Tree to update the tree with the new story widgets.

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.