feat: add docs for debugging extensions

phcode-dev · Dec 9, 2024 · bb9f059 · bb9f059
1 parent e75d434
commit bb9f059
Show file tree

Hide file tree

Showing 25 changed files with 52 additions and 0 deletions.
diff --git a/api/05-debugging-extensions.md b/api/05-debugging-extensions.md
@@ -0,0 +1,52 @@
+---
+title: Debugging Extensions in Phoenix Code
+---
+
+The Debug menu provides several options for extension development. 
+
+![Debug Menu](./images/debugging-extensions/debug-menu.png "Debug Menu")
+
+## Phoenix Code Developer Tools
+
+The `Phoenix Code Developer Tools` option (shortcut: F12) opens up the DevTools. Use this to inspect the DOM, preview logs and debug scripts.
+
+![Phoenix Code Developer Tools](./images/debugging-extensions/dev-tools.png "Phoenix Code Developer Tools")
+
+## Phoenix Code Diagnostic Tools
+
+To open Phoenix Code Diagnostic tools, click on the `Debug` menu on the menu bar and navigate to the `Phoenix Code Diagnostic Tools` option. This section provides several tools for debugging purposes.
+
+![Phoenix Code Diagnostic Tools](./images/debugging-extensions/diagnostic-tools.png "Phoenix Code Diagnostic Tools")
+
+### Available Diagnostic Tools
+
+1. `Run Phoenix Code Tests`
+ Executes built-in tests to verify the functionality of Phoenix Code.
+
+2. `Build Editor Tests`
+ Builds and runs tests specifically for the editor environment.
+
+3. `Enable Detailed Logs`
+ Activates verbose logging for better insight into extension behavior. Use this to identify errors or unexpected behaviors during development.
+
+4. `Enable PhNode Inspector`
+ Launches the PhNode inspector, allowing in-depth inspection of the extension runtime environment.
+
+5. `How to Inspect PhNode`
+ Provides a guide to effectively use the PhNode Inspector.
+![Inspect Phnode](./images/debugging-extensions/inspect-phnode.png "Inspect Phnode")
+
+6. `Live Preview Logs`
+ Displays real-time logs for active live previews, helping debug changes dynamically.
+
+7. `Show Performance Data`
+ Generates performance metrics to identify bottlenecks or performance issues within the extension.
+
+8. `Open Virtual File System`
+ Opens and inspects the virtual file system used by Phoenix Code.
+
+## FAQs
+
+Q. Why is console.log not displaying?
+
+- By default, console logs are disabled. To enable them, click on Enable Detailed Logs under Phoenix Code Diagnostic Tools.
diff --git a/api/05-publishing-extensions.md → api/06-publishing-extensions.md b/api/05-publishing-extensions.md → api/06-publishing-extensions.md
diff --git a/api/06-available-standard-libs.md → api/07-available-standard-libs.md b/api/06-available-standard-libs.md → api/07-available-standard-libs.md
diff --git a/api/07-How-To/Dialogs.md → api/08-How-To/Dialogs.md b/api/07-How-To/Dialogs.md → api/08-How-To/Dialogs.md
diff --git a/api/07-How-To/Menus.md → api/08-How-To/Menus.md b/api/07-How-To/Menus.md → api/08-How-To/Menus.md
diff --git a/api/07-How-To/Panels.md → api/08-How-To/Panels.md b/api/07-How-To/Panels.md → api/08-How-To/Panels.md
diff --git a/api/07-How-To/StatusBar.md → api/08-How-To/StatusBar.md b/api/07-How-To/StatusBar.md → api/08-How-To/StatusBar.md
diff --git a/api/07-How-To/images/add-menu.png → api/08-How-To/images/add-menu.png b/api/07-How-To/images/add-menu.png → api/08-How-To/images/add-menu.png
diff --git a/...07-How-To/images/bottom-panel-example.png → ...08-How-To/images/bottom-panel-example.png b/...07-How-To/images/bottom-panel-example.png → ...08-How-To/images/bottom-panel-example.png
diff --git a/api/07-How-To/images/bottom-panel.png → api/08-How-To/images/bottom-panel.png b/api/07-How-To/images/bottom-panel.png → api/08-How-To/images/bottom-panel.png
diff --git a/...7-How-To/images/custom-dialog-box-gif.gif → ...8-How-To/images/custom-dialog-box-gif.gif b/...7-How-To/images/custom-dialog-box-gif.gif → ...8-How-To/images/custom-dialog-box-gif.gif
diff --git a/api/07-How-To/images/custom-dialog.png → api/08-How-To/images/custom-dialog.png b/api/07-How-To/images/custom-dialog.png → api/08-How-To/images/custom-dialog.png
diff --git a/api/07-How-To/images/dialog.png → api/08-How-To/images/dialog.png b/api/07-How-To/images/dialog.png → api/08-How-To/images/dialog.png
diff --git a/...-How-To/images/menu-item-before-after.png → ...-How-To/images/menu-item-before-after.png b/...-How-To/images/menu-item-before-after.png → ...-How-To/images/menu-item-before-after.png
diff --git a/api/07-How-To/images/menu-item-dialog.png → api/08-How-To/images/menu-item-dialog.png b/api/07-How-To/images/menu-item-dialog.png → api/08-How-To/images/menu-item-dialog.png
diff --git a/api/07-How-To/images/menu-item-example.png → api/08-How-To/images/menu-item-example.png b/api/07-How-To/images/menu-item-example.png → api/08-How-To/images/menu-item-example.png
diff --git a/api/07-How-To/images/menu-item-first.png → api/08-How-To/images/menu-item-first.png b/api/07-How-To/images/menu-item-first.png → api/08-How-To/images/menu-item-first.png
diff --git a/...To/images/menu-item-keyboard-shortcut.png → ...To/images/menu-item-keyboard-shortcut.png b/...To/images/menu-item-keyboard-shortcut.png → ...To/images/menu-item-keyboard-shortcut.png
diff --git a/...07-How-To/images/plugin-panel-example.png → ...08-How-To/images/plugin-panel-example.png b/...07-How-To/images/plugin-panel-example.png → ...08-How-To/images/plugin-panel-example.png
diff --git a/api/07-How-To/images/plugin-panel.png → api/08-How-To/images/plugin-panel.png b/api/07-How-To/images/plugin-panel.png → api/08-How-To/images/plugin-panel.png
diff --git a/api/07-How-To/images/submenu.png → api/08-How-To/images/submenu.png b/api/07-How-To/images/submenu.png → api/08-How-To/images/submenu.png
diff --git a/api/images/debugging-extensions/debug-menu.png b/api/images/debugging-extensions/debug-menu.png
diff --git a/api/images/debugging-extensions/dev-tools.png b/api/images/debugging-extensions/dev-tools.png
diff --git a/api/images/debugging-extensions/diagnostic-tools.png b/api/images/debugging-extensions/diagnostic-tools.png
diff --git a/api/images/debugging-extensions/inspect-phnode.png b/api/images/debugging-extensions/inspect-phnode.png