Merge pull request #1807 from JoshuaKGoldberg/monarch-token-docs

Added section in Monarch docs for Inspect Tokens development helper

website/monarch.html

@@ -383,6 +383,17 @@ tokenizer: {
 ],</pre>
     <p>Only when we find a matching end tag (outside a string), <code>$1==$S2</code>, we pop the state and exit the embedded mode. Note that we need <a href="#@rematch"><code class="dt">@rematch</code></a> since the editor is ignoring our token classes until we actually exit the embedded mode (and we handle the close tag again in the <code>@root</code> state).</p>
 
+    <p>&nbsp;</p>
+    <h2 id="inspectingtokens">Inspecting Tokens</h2>
+
+    <p>Monaco provides an <code>Inspect Tokens</code> tool in browsers to help identify the tokens parsed from source code.</p>
+    <p>To activate:</p>
+    <ol>
+      <li>Press <kbd>F1</kbd> while focused on a Monaco instance</li>
+      <li>Trigger the <code>Developer: Inspect Tokens</code> option</li>
+    </ol>
+
+    <p>This will show a display over the currently selected token for its language, token type, basic font style and colors, and selector you can target in your editor themes.</p>
     </div> <!-- documentation -->
   </div> <!-- main -->