diff --git a/api/05-debugging-extensions.md b/api/05-debugging-extensions.md new file mode 100644 index 00000000..0891ac07 --- /dev/null +++ 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. \ No newline at end of file diff --git a/api/05-publishing-extensions.md b/api/06-publishing-extensions.md similarity index 100% rename from api/05-publishing-extensions.md rename to api/06-publishing-extensions.md diff --git a/api/06-available-standard-libs.md b/api/07-available-standard-libs.md similarity index 100% rename from api/06-available-standard-libs.md rename to api/07-available-standard-libs.md diff --git a/api/07-How-To/Dialogs.md b/api/08-How-To/Dialogs.md similarity index 100% rename from api/07-How-To/Dialogs.md rename to api/08-How-To/Dialogs.md diff --git a/api/07-How-To/Menus.md b/api/08-How-To/Menus.md similarity index 100% rename from api/07-How-To/Menus.md rename to api/08-How-To/Menus.md diff --git a/api/07-How-To/Panels.md b/api/08-How-To/Panels.md similarity index 100% rename from api/07-How-To/Panels.md rename to api/08-How-To/Panels.md diff --git a/api/07-How-To/StatusBar.md b/api/08-How-To/StatusBar.md similarity index 100% rename from api/07-How-To/StatusBar.md rename to api/08-How-To/StatusBar.md diff --git a/api/07-How-To/images/add-menu.png b/api/08-How-To/images/add-menu.png similarity index 100% rename from api/07-How-To/images/add-menu.png rename to api/08-How-To/images/add-menu.png diff --git a/api/07-How-To/images/bottom-panel-example.png b/api/08-How-To/images/bottom-panel-example.png similarity index 100% rename from api/07-How-To/images/bottom-panel-example.png rename to api/08-How-To/images/bottom-panel-example.png diff --git a/api/07-How-To/images/bottom-panel.png b/api/08-How-To/images/bottom-panel.png similarity index 100% rename from api/07-How-To/images/bottom-panel.png rename to api/08-How-To/images/bottom-panel.png diff --git a/api/07-How-To/images/custom-dialog-box-gif.gif b/api/08-How-To/images/custom-dialog-box-gif.gif similarity index 100% rename from api/07-How-To/images/custom-dialog-box-gif.gif rename to api/08-How-To/images/custom-dialog-box-gif.gif diff --git a/api/07-How-To/images/custom-dialog.png b/api/08-How-To/images/custom-dialog.png similarity index 100% rename from api/07-How-To/images/custom-dialog.png rename to api/08-How-To/images/custom-dialog.png diff --git a/api/07-How-To/images/dialog.png b/api/08-How-To/images/dialog.png similarity index 100% rename from api/07-How-To/images/dialog.png rename to api/08-How-To/images/dialog.png diff --git a/api/07-How-To/images/menu-item-before-after.png b/api/08-How-To/images/menu-item-before-after.png similarity index 100% rename from api/07-How-To/images/menu-item-before-after.png rename to api/08-How-To/images/menu-item-before-after.png diff --git a/api/07-How-To/images/menu-item-dialog.png b/api/08-How-To/images/menu-item-dialog.png similarity index 100% rename from api/07-How-To/images/menu-item-dialog.png rename to api/08-How-To/images/menu-item-dialog.png diff --git a/api/07-How-To/images/menu-item-example.png b/api/08-How-To/images/menu-item-example.png similarity index 100% rename from api/07-How-To/images/menu-item-example.png rename to api/08-How-To/images/menu-item-example.png diff --git a/api/07-How-To/images/menu-item-first.png b/api/08-How-To/images/menu-item-first.png similarity index 100% rename from api/07-How-To/images/menu-item-first.png rename to api/08-How-To/images/menu-item-first.png diff --git a/api/07-How-To/images/menu-item-keyboard-shortcut.png b/api/08-How-To/images/menu-item-keyboard-shortcut.png similarity index 100% rename from api/07-How-To/images/menu-item-keyboard-shortcut.png rename to api/08-How-To/images/menu-item-keyboard-shortcut.png diff --git a/api/07-How-To/images/plugin-panel-example.png b/api/08-How-To/images/plugin-panel-example.png similarity index 100% rename from api/07-How-To/images/plugin-panel-example.png rename to api/08-How-To/images/plugin-panel-example.png diff --git a/api/07-How-To/images/plugin-panel.png b/api/08-How-To/images/plugin-panel.png similarity index 100% rename from api/07-How-To/images/plugin-panel.png rename to api/08-How-To/images/plugin-panel.png diff --git a/api/07-How-To/images/submenu.png b/api/08-How-To/images/submenu.png similarity index 100% rename from api/07-How-To/images/submenu.png rename to 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 new file mode 100644 index 00000000..122a05dd Binary files /dev/null and b/api/images/debugging-extensions/debug-menu.png differ diff --git a/api/images/debugging-extensions/dev-tools.png b/api/images/debugging-extensions/dev-tools.png new file mode 100644 index 00000000..67073153 Binary files /dev/null and b/api/images/debugging-extensions/dev-tools.png differ diff --git a/api/images/debugging-extensions/diagnostic-tools.png b/api/images/debugging-extensions/diagnostic-tools.png new file mode 100644 index 00000000..32f50627 Binary files /dev/null and b/api/images/debugging-extensions/diagnostic-tools.png differ diff --git a/api/images/debugging-extensions/inspect-phnode.png b/api/images/debugging-extensions/inspect-phnode.png new file mode 100644 index 00000000..3669aa09 Binary files /dev/null and b/api/images/debugging-extensions/inspect-phnode.png differ