diff --git a/plugins/dev-tools/README.md b/plugins/dev-tools/README.md index 4991f5ecf2..e488666cce 100644 --- a/plugins/dev-tools/README.md +++ b/plugins/dev-tools/README.md @@ -92,36 +92,106 @@ This package is also used in mocha tests, and exports a suite of useful test hel You can find the full list of helpers [here](https://github.com/google/blockly-samples/blob/master/plugins/dev-tools/src/test_helpers.mocha.js). ### Debug Renderer -The debug renderer is a helpful tool to debug blocks when building a custom -renderer. It displays the different elements on a block such as the rows, -elements and connections shown below. - -![A block showing the rows.](https://github.com/google/blockly-samples/raw/master/plugins/dev-tools/readme-media/DebuggerRows.png) -![A block showing the elements.](https://github.com/google/blockly-samples/raw/master/plugins/dev-tools/readme-media/DebuggerElements.png) -![A block showing the connections.](https://github.com/google/blockly-samples/raw/master/plugins/dev-tools/readme-media/DebuggerConnections.png) - -If you want to use the debug a custom renderer with the playground, you can -simply set your renderer in the `defaultOptions` passed into `createPlayground`. -The debug renderer can then be turned on/off by toggling the 'debugEnabled' -option under the 'Debug' folder. - -If you want to modify the rectangles that are drawn or you are not using the -playground, you can follow the example below. +The [debug renderer][dev-tools] is a renderer plugin that wraps your normal +renderer, and visualizes the measurements the [render info][render-info] +collects. This is extremely helpful for understanding what your renderer thinks +about the block it is trying to render. + +#### What it surfaces + +The debug renderer can show you several different things. + +
Debug info | +Image | +Description | +Rows | ++ | The bounds of the individual rows in a block. | +
---|---|---|
Row spacers | ++ | The bounds of the row spacers in a block. | +
Elements | ++ | The bounds of the elements in a block. | +
Element spacers | ++ | The bounds of the element spacers in a block. | +
Connections | ++ | + The locations of the connection points, with large circles for next and + input connections (parent connections) and small circles for output and + previous connections (child connections). + | +
Block bounds | ++ | + The bounds of the block, not including any child blocks. + | +
Connectioned block bounds | ++ | + The bounds of the block, including child blocks. + | +
Render / paint | ++ | + Flashes the block red when the renderer rerenders the block, equivalent + to paint flashing + in Chrome. + | +