diff --git a/core/renderers/common/debugger.js b/core/renderers/common/debugger.js
index b0b4ff709..5a70fa261 100644
--- a/core/renderers/common/debugger.js
+++ b/core/renderers/common/debugger.js
@@ -54,24 +54,20 @@ Blockly.blockRendering.Debug = function() {
    * @type {SVGElement}
    */
   this.svgRoot_ = null;
-
-  /**
-   * @type {Object} Configuration object containing booleans to enable and
-   *     disable debug rendering of specific rendering components.
-   */
-  this.config_ = Blockly.blockRendering.Debug.getDebugConfig();
 };
 
-Blockly.blockRendering.Debug.getDebugConfig = function() {
-  return {
-    // rowSpacers: true,
-    // elemSpacers: true,
-    // rows: true,
-    elems: true,
-    // connections: true,
-    blockBounds: true,
-    // connectedBlockBounds: true
-  };
+/**
+ * @type {!Object.<string, boolean>} Configuration object containing booleans
+ *    to enable and disable debug rendering of specific rendering components.
+ */
+Blockly.blockRendering.Debug.config = {
+  rowSpacers: true,
+  elemSpacers: true,
+  rows: true,
+  elems: true,
+  connections: true,
+  blockBounds: true,
+  connectedBlockBounds: true
 };
 
 /**
@@ -94,7 +90,7 @@ Blockly.blockRendering.Debug.prototype.clearElems = function() {
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, isRtl) {
-  if (!this.config_.rowSpacers) {
+  if (!Blockly.blockRendering.Debug.config.rowSpacers) {
     return;
   }
 
@@ -121,7 +117,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerRow = function(row, cursorY, is
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight, isRtl) {
-  if (!this.config_.elemSpacers) {
+  if (!Blockly.blockRendering.Debug.config.elemSpacers) {
     return;
   }
 
@@ -153,7 +149,7 @@ Blockly.blockRendering.Debug.prototype.drawSpacerElem = function(elem, rowHeight
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl) {
-  if (this.config_.elems) {
+  if (Blockly.blockRendering.Debug.config.elems) {
     var xPos = elem.xPos;
     if (isRtl) {
       xPos = -(xPos + elem.width);
@@ -174,7 +170,8 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl)
   }
 
 
-  if (Blockly.blockRendering.Types.isInput(elem) && this.config_.connections) {
+  if (Blockly.blockRendering.Types.isInput(elem) &&
+      Blockly.blockRendering.Debug.config.connections) {
     this.drawConnection(elem.connection);
   }
 };
@@ -187,7 +184,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedElem = function(elem, isRtl)
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) {
-  if (!this.config_.connections) {
+  if (!Blockly.blockRendering.Debug.config.connections) {
     return;
   }
 
@@ -231,7 +228,7 @@ Blockly.blockRendering.Debug.prototype.drawConnection = function(conn) {
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY, isRtl) {
-  if (!this.config_.rows) {
+  if (!Blockly.blockRendering.Debug.config.rows) {
     return;
   }
   this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
@@ -251,7 +248,7 @@ Blockly.blockRendering.Debug.prototype.drawRenderedRow = function(row, cursorY,
     return;
   }
 
-  if (this.config_.connectedBlockBounds) {
+  if (Blockly.blockRendering.Debug.config.connectedBlockBounds) {
     this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
         {
           'class': 'connectedBlockWidth blockRenderDebug',
@@ -293,7 +290,7 @@ Blockly.blockRendering.Debug.prototype.drawRowWithElements = function(row, curso
  * @package
  */
 Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
-  if (!this.config_.blockBounds) {
+  if (!Blockly.blockRendering.Debug.config.blockBounds) {
     return;
   }
   // Bounding box without children.
@@ -313,7 +310,7 @@ Blockly.blockRendering.Debug.prototype.drawBoundingBox = function(info) {
       },
       this.svgRoot_));
 
-  if (this.config_.connectedBlockBounds) {
+  if (Blockly.blockRendering.Debug.config.connectedBlockBounds) {
     // Bounding box with children.
     xPos = info.RTL ? -info.widthWithChildren : 0;
     this.debugElements_.push(Blockly.utils.dom.createSvgElement('rect',
diff --git a/tests/playground.html b/tests/playground.html
index d765e5452..ff2413a9b 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -134,6 +134,7 @@ function start() {
           }
       });
   addToolboxButtonCallbacks();
+  addRenderDebugOptionsCheckboxes();
   // Restore previously displayed text.
   if (sessionStorage) {
     var text = sessionStorage.getItem('textarea');
@@ -146,6 +147,10 @@ function start() {
     // Restore render debug state.
     var renderDebugState = sessionStorage.getItem('blockRenderDebug');
     toggleRenderingDebug(Boolean(Number(renderDebugState)));
+    // Restore render debug options state.
+    var renderDebugOptionsState =
+        JSON.parse(sessionStorage.getItem('blockRenderDebugOptions'));
+    setRenderDebugOptionCheckboxState(renderDebugOptionsState);
   } else {
     // MSIE 11 does not support sessionStorage on file:// URLs.
     logEvents(false);
@@ -260,6 +265,57 @@ function addToolboxButtonCallbacks() {
       'removeDynamicOption', Blockly.TestBlocks.removeDynamicDropdownOption_);
 }
 
+function setRenderDebugOptionCheckboxState(overrideOptions) {
+  Blockly.blockRendering.Debug.config = overrideOptions || {};
+  if(!overrideOptions) return;
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  var renderDebugOptionInputs =
+      renderDebugOptionsListEl.getElementsByTagName('INPUT');
+  for (var optionInput of renderDebugOptionInputs) {
+    var optionId = optionInput.getAttribute('id');
+    var checkboxMatch = optionId.match('^RenderDebug(.*)Check$');
+    if (!checkboxMatch) continue;
+    var optionName = checkboxMatch[1];
+    optionInput.checked = !!overrideOptions[optionName];
+  }
+}
+
+function updateRenderDebugOptions() {
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  var renderDebugOptionInputs =
+      renderDebugOptionsListEl.getElementsByTagName('INPUT');
+  var debugOptions = {};
+  for (var optionInput of renderDebugOptionInputs) {
+    var optionId = optionInput.getAttribute('id');
+    var checkboxMatch = optionId.match('^RenderDebug(.*)Check$');
+    if (!checkboxMatch) continue;
+    var optionName = checkboxMatch[1];
+    debugOptions[optionName] = optionInput.checked;
+  }
+  Blockly.blockRendering.Debug.config = debugOptions;
+  sessionStorage.setItem(
+      'blockRenderDebugOptions',JSON.stringify(debugOptions));
+}
+
+function addRenderDebugOptionsCheckboxes() {
+  var renderDebugConfig = Blockly.blockRendering.Debug.config;
+  var renderDebugOptionsListEl = document.getElementById('renderDebugOptions');
+  for (var optionName in renderDebugConfig) {
+    var optionCheckId = 'RenderDebug' + optionName + 'Check';
+    var optionLabel = document.createElement('LABEL');
+    optionLabel.setAttribute('htmlFor', optionCheckId);
+    optionLabel.innerHTML = optionName;
+    var optionCheck = document.createElement('INPUT');
+    optionCheck.setAttribute('type', 'checkbox');
+    optionCheck.setAttribute('id', optionCheckId);
+    optionCheck.onclick = updateRenderDebugOptions;
+    var optionLi = document.createElement('li');
+    optionLi.appendChild(optionLabel);
+    optionLi.appendChild(optionCheck);
+    renderDebugOptionsListEl.appendChild(optionLi);
+  }
+}
+
 function changeTheme() {
   var theme = document.getElementById('themeChanger');
   if (theme.value === "modern") {
@@ -352,9 +408,11 @@ function toggleRenderingDebug(state) {
   if (state) {
     document.getElementById('blocklyDiv').className = 'renderingDebug';
     Blockly.blockRendering.startDebugger();
+    document.getElementById('renderDebugOptions').style.display = 'block';
   } else {
     document.getElementById('blocklyDiv').className = '';
     Blockly.blockRendering.stopDebugger();
+    document.getElementById('renderDebugOptions').style.display = 'none';
   }
 }
 
@@ -434,39 +492,46 @@ var spaghettiXml = [
 </script>
 
 <style>
-html, body {
-  height: 100%;
-}
-body {
-  background-color: #fff;
-  font-family: sans-serif;
-  overflow: hidden;
-}
-h1 {
-  font-weight: normal;
-  font-size: 140%;
-}
-#blocklyDiv {
-  float: right;
-  height: 95%;
-  width: 70%;
-}
-#importExport {
-  font-family: monospace;
-}
+  html, body {
+    height: 100%;
+  }
+  body {
+    background-color: #fff;
+    font-family: sans-serif;
+    overflow: hidden;
+  }
+  h1 {
+    font-weight: normal;
+    font-size: 140%;
+  }
+  #blocklyDiv {
+    float: right;
+    height: 95%;
+    width: 70%;
+  }
+  #importExport {
+    font-family: monospace;
+  }
 
-.ioLabel>.blocklyFlyoutLabelText {
-  font-style: italic;
-}
+  .ioLabel>.blocklyFlyoutLabelText {
+    font-style: italic;
+  }
 
-#blocklyDiv.renderingDebug .blockRenderDebug {
-  display: block;
-}
+  #blocklyDiv.renderingDebug .blockRenderDebug {
+    display: block;
+  }
 
-.blockRenderDebug {
-  display: none;
-}
+  .playgroundToggleOptions {
+    list-style: none;
+    padding: 0;
+  }
+  .playgroundToggleOptions li {
+    margin-top: 1em;
+  }
 
+  .blockRenderDebug {
+    display: none;
+  }
 </style>
 </head>
 <body onload="start()">
@@ -530,20 +595,21 @@ h1 {
     <input type="button" value="Airstrike!" onclick="airstrike(100)">
     <input type="button" value="Spaghetti!" onclick="spaghetti(8)">
   </p>
-  <p>
-    Log events: &nbsp;
-    <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
-  </p>
-
-  <p>
-    Block rendering debug: &nbsp;
-    <input type="checkbox" onclick="toggleRenderingDebug(this.checked)" id="blockRenderDebugCheck">
-  </p>
-
-  <p>
-    Enable Accessibility Mode: &nbsp;
-    <input type="checkbox" onclick="toggleAccessibilityMode(this.checked)" id="accessibilityModeCheck">
-  </p>
+  <ul class="playgroundToggleOptions">
+    <li>
+      <label for="logCheck">Log events:</label>
+      <input type="checkbox" onclick="logEvents(this.checked)" id="logCheck">
+    </li>
+    <li>
+      <label for="blockRenderDebugCheck">Enable block rendering debug:</label>
+      <input type="checkbox" onclick="toggleRenderingDebug(this.checked)" id="blockRenderDebugCheck">
+      <ul id="renderDebugOptions"></ul>
+    </li>
+    <li>
+      <label for="accessibilityModeCheck">Enable Accessibility Mode:</label>
+      <input type="checkbox" onclick="toggleAccessibilityMode(this.checked)" id="accessibilityModeCheck">
+    </li>
+  </ul>
 
 
   <!-- The next three blocks of XML are sample toolboxes for testing basic