+
+ | 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.
+ |
+
+
+
+#### How to use it
+
+The debug renderer wraps your existing renderer, and then you can register and
+use it just like any other renderer.
+
+```js
+import {createNewRenderer, DebugDrawer} from '@blockly/dev-tools';
+
+const DebugRenderer = createNewRenderer(YourCustomRenderer);
+Blockly.blockRendering.register('debugRenderer', DebugRenderer);
+
+Blockly.inject('blocklyDiv', {renderer: 'debugRenderer'});
+```
+
+To see the different information the debug renderer surfaces, you can modify
+the config from the browser console.
+
+```js
+DebugDrawer.config = {
+ rows: true,
+ rowSpacers: true,
+ elems: true,
+ elemSpacers: true,
+ connections: true,
+ blockBounds: true,
+ connectedBlockBounds: true,
+ render: true,
+};
+```
+
+[render-info]: https://developers.google.com/blocklyguides/create-custom-blocks/appearance/renderers/concepts/info
+[dev-tools]: https://www.npmjs.com/package/@blockly/dev-tools
+
+### Logger
+
+A lightweight workspace console logger.
+
+```js
+import {logger} from '@blockly/dev-tools';
+
+logger.enableLogger(workspace);
+logger.disableLogger(workspace);
+```
+
+The logger is included by default in the playground.
+
+## License
+
+Apache 2.0
diff --git a/packages/plugins/dev-tools/package.json b/packages/plugins/dev-tools/package.json
new file mode 100644
index 00000000000..bf6cc6ac0f0
--- /dev/null
+++ b/packages/plugins/dev-tools/package.json
@@ -0,0 +1,63 @@
+{
+ "name": "@blockly/dev-tools",
+ "version": "13.1.0",
+ "description": "A library of common utilities for Blockly extension development.",
+ "scripts": {
+ "audit:fix": "blockly-scripts auditFix",
+ "build": "blockly-scripts build",
+ "clean": "blockly-scripts clean",
+ "lint": "eslint .",
+ "start": "blockly-scripts start"
+ },
+ "main": "dist/index.js",
+ "module": "./src/index.js",
+ "unpkg": "./dist/index.js",
+ "types": "./src/index.d.ts",
+ "author": "Blockly Team",
+ "keywords": [
+ "blockly",
+ "dev",
+ "tools"
+ ],
+ "homepage": "https://github.com/RaspberryPiFoundation/blockly-samples/tree/master/plugins/dev-tools#readme",
+ "bugs": {
+ "url": "https://github.com/RaspberryPiFoundation/blockly-samples/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/RaspberryPiFoundation/blockly-samples.git",
+ "directory": "plugins/dev-tools"
+ },
+ "license": "Apache-2.0",
+ "directories": {
+ "dist": "dist",
+ "src": "src"
+ },
+ "files": [
+ "dist",
+ "src"
+ ],
+ "dependencies": {
+ "@blockly/block-test": "^13.1.0",
+ "@blockly/theme-dark": "^13.1.0",
+ "@blockly/theme-deuteranopia": "^13.1.0",
+ "@blockly/theme-highcontrast": "^13.1.0",
+ "@blockly/theme-tritanopia": "^13.1.0",
+ "chai": "^6.2.2",
+ "dat.gui": "^0.7.9",
+ "lodash.assign": "^4.2.0",
+ "lodash.merge": "^4.6.2",
+ "monaco-editor": "^0.55.1",
+ "sinon": "^22.0.0"
+ },
+ "devDependencies": {
+ "@blockly/dev-scripts": "^13.1.0",
+ "@types/dat.gui": "^0.7.13"
+ },
+ "peerDependencies": {
+ "blockly": "^13.1.1"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}
diff --git a/packages/plugins/dev-tools/readme-media/block-bounds-with-children.png b/packages/plugins/dev-tools/readme-media/block-bounds-with-children.png
new file mode 100644
index 00000000000..a2214b6eeb7
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/block-bounds-with-children.png differ
diff --git a/packages/plugins/dev-tools/readme-media/block-bounds.png b/packages/plugins/dev-tools/readme-media/block-bounds.png
new file mode 100644
index 00000000000..d41c69339fa
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/block-bounds.png differ
diff --git a/packages/plugins/dev-tools/readme-media/connection.png b/packages/plugins/dev-tools/readme-media/connection.png
new file mode 100644
index 00000000000..16acaa8215e
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/connection.png differ
diff --git a/packages/plugins/dev-tools/readme-media/element-spacer.png b/packages/plugins/dev-tools/readme-media/element-spacer.png
new file mode 100644
index 00000000000..d264d784fb9
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/element-spacer.png differ
diff --git a/packages/plugins/dev-tools/readme-media/element.png b/packages/plugins/dev-tools/readme-media/element.png
new file mode 100644
index 00000000000..801654125a9
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/element.png differ
diff --git a/packages/plugins/dev-tools/readme-media/row-spacer.png b/packages/plugins/dev-tools/readme-media/row-spacer.png
new file mode 100644
index 00000000000..a400ca5dfbe
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/row-spacer.png differ
diff --git a/packages/plugins/dev-tools/readme-media/row.png b/packages/plugins/dev-tools/readme-media/row.png
new file mode 100644
index 00000000000..81185823863
Binary files /dev/null and b/packages/plugins/dev-tools/readme-media/row.png differ
diff --git a/packages/plugins/dev-tools/src/block_test_helpers.mocha.js b/packages/plugins/dev-tools/src/block_test_helpers.mocha.js
new file mode 100644
index 00000000000..7564368aa5f
--- /dev/null
+++ b/packages/plugins/dev-tools/src/block_test_helpers.mocha.js
@@ -0,0 +1,238 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {assert} from 'chai';
+import * as sinon from 'sinon';
+import * as commonTestHelpers from './common_test_helpers.mocha';
+import * as Blockly from 'blockly/core';
+
+const {runTestCases, runTestSuites, TestCase, TestSuite} = commonTestHelpers;
+
+/**
+ * Code generation test case configuration.
+ * @implements {TestCase}
+ * @record
+ */
+export class CodeGenerationTestCase {
+ /**
+ * Class for a code generation test case.
+ */
+ constructor() {
+ /**
+ * @type {string} The expected code.
+ */
+ this.expectedCode;
+ /**
+ * @type {boolean|undefined} Whether to use workspaceToCode instead of
+ * blockToCode for test.
+ */
+ this.useWorkspaceToCode;
+ /**
+ * @type {number|undefined} The expected inner order.
+ */
+ this.expectedInnerOrder;
+ }
+
+ /**
+ * Creates the block to use for this test case.
+ * @param {!Blockly.Workspace} workspace The workspace context for this
+ * test.
+ * @returns {!Blockly.Block} The block to use for the test case.
+ */
+ createBlock(workspace) {}
+}
+
+/**
+ * Code generation test suite.
+ * @extends {TestSuite