[docs] Add DevTools-on-DevTools documentation.

Especially mention the "Automatic Workspace Folders" feature
and it's integration with DevTools-on-DevTools (when using
`--custom-devtools-frontend`).

Bug: 395562934
Change-Id: I3e9da9c0f1b9b4698f3ec83b892e71f831272245
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308776
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>

Author: bmeurer

docs/cookbook/README.md

@@ -10,3 +10,4 @@ of Chromium DevTools itself.
 *   [Localization](localization.md)
 *   [Release Management](release_management.md)
 *   [UMA metrics in DevTools](uma_metrics.md)
+*   [DevTools-on-DevTools (aka Debugging the Debugger)](devtools_on_devtools.md)

docs/cookbook/devtools_on_devtools.md

@@ -0,0 +1,75 @@
+# DevTools-on-DevTools (aka Debugging the Debugger)
+
+[goo.gle/devtools-on-devtools][self-link]
+
+The Chromium DevTools front-end is a web application (with some special powers),
+and can therefore be debugged like any other web application (using Chromium
+DevTools itself).
+
+## Inspecting the inspector
+
+You don't need a special build of Chromium or DevTools, you can try this with
+any Chrome or Chromium build. Open DevTools on any page, e.g.
+`http://www.example.com`, and undock DevTools into a dedicated window.
+
+![](./images/devtools_on_devtools_starter.png)
+
+Then in the undocked DevTools window press Cmd+Shift+I (on macOS) or
+Ctrl+Shift+I (on Windows, Linux, or Chrome OS), and a new DevTools window will
+open, that is debugging the actual DevTools window. You can tell them apart
+based on their window titles, the original one says *"DevTools -
+www.example.com"*, while the DevTools-on-DevTools says something like
+*"DevTools - devtools://devtools/bundled/devtools_app.html"*.
+
+**Pro-Tip**: Set a different color theme for the DevTools-on-DevTools to be able
+to tell them apart more easily. For example, use light theme for actual DevTools
+and dark theme for DevTools-on-DevTools.
+
+When using `--custom-devtools-frontend`, you can also right-click anywhere in
+the regular DevTools and select *Inspect* from the context menu to open a
+DevTools-on-DevTools window, even when the regular DevTools window is docked.
+
+## Using Automatic Workspace folders
+
+The [Workspace][workspace-documentation] feature is a powerful tool for working
+on DevTools, as it allows you preview changes to styles instantly, even while
+editing in your IDE (e.g. VS Code or Cider-G). With M-135, a new feature called
+[Automatic Workspace folders][automatic-workspace-folders-documentation] was
+introduced, which can be used to make debugging and developing DevTools easier.
+
+Follow the steps [here](../ecosystem/automatic_workspace_folders.md#setup) to
+set up your Chrome or Chromium instance. Then in your `devtools-frontend`
+checkout, use
+
+```
+./third_party/chrome/chrome-linux/chrome \
+   --disable-infobars \
+   --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
+```
+
+on Linux or
+
+```
+./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
+  --disable-infobars \
+  --disable-features=MediaRouter \
+  --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) \
+  --use-mock-keychain
+```
+
+on macOS to start. The first time you do this, you'll need to connect the folder
+to your workspace.
+
+![](./images/devtools_on_devtools_automatic.png)
+
+Afterwards you can immediately access the DevTools source code from within your
+DevTools-on-DevTools, and for example work on CSS changes in real time, without
+having to worry about extracting them out of DevTools-on-DevTools later. This
+even works from within your IDE or editor: As long as the (automatic) workspace
+folder is connected and DevTools-on-DevTools is open, it'll listen for changes
+to these files on disk, and automatically pick up any CSS changes and apply
+them.
+
+[self-link]: http://goo.gle/devtools-on-devtools
+[workspace-documentation]: https://developer.chrome.com/docs/devtools/workspaces
+[automatic-workspace-folders-documentation]: http://goo.gle/devtools-automatic-workspace-folders