feat: add eruda devtools for debugging

Author: bajrangCoder

src/ace/commands.js

@@ -365,6 +365,22 @@ const commands = [
 		},
 		readOnly: true,
 	},
+	{
+		name: "dev:toggleInspector",
+		description: "Toggle Inspector",
+		exec() {
+			acode.exec("toggle-inspector");
+		},
+		readOnly: true,
+	},
+	{
+		name: "dev:openInspector",
+		description: "Open Inspector",
+		exec() {
+			acode.exec("open-inspector");
+		},
+		readOnly: true,
+	},
 ];
 
 export function setCommands(editor) {

src/lib/commands.js

@@ -487,4 +487,12 @@ Additional Info:
 	welcome() {
 		openWelcomeTab();
 	},
+	async "toggle-inspector"() {
+		const devTools = (await import("lib/devTools")).default;
+		devTools.toggle();
+	},
+	async "open-inspector"() {
+		const devTools = (await import("lib/devTools")).default;
+		devTools.show();
+	},
 };

src/lib/devTools.js

@@ -0,0 +1,150 @@
+import fsOperation from "fileSystem";
+import ajax from "@deadlyjack/ajax";
+import loader from "dialogs/loader";
+import helpers from "utils/helpers";
+import Url from "utils/Url";
+import constants from "./constants";
+
+let erudaInstance = null;
+let isInitialized = false;
+
+/**
+ * Developer tools module for debugging Acode
+ */
+const devTools = {
+	/**
+	 * Check if Eruda is initialized
+	 * @returns {boolean}
+	 */
+	get isInitialized() {
+		return isInitialized;
+	},
+
+	/**
+	 * Get the Eruda instance
+	 * @returns {object|null}
+	 */
+	get eruda() {
+		return erudaInstance;
+	},
+
+	/**
+	 * Initialize Eruda for developer mode
+	 * @param {boolean} showLoader - Whether to show a loading dialog
+	 * @returns {Promise<void>}
+	 */
+	async init(showLoader = false) {
+		if (isInitialized) return;
+
+		try {
+			const erudaPath = Url.join(DATA_STORAGE, "eruda.js");
+			const fs = fsOperation(erudaPath);
+
+			if (!(await fs.exists())) {
+				if (showLoader) {
+					loader.create(
+						strings["downloading file"]?.replace("{file}", "eruda.js") ||
+							"Downloading eruda.js...",
+						strings["downloading..."] || "Downloading...",
+					);
+				}
+
+				try {
+					const erudaScript = await ajax({
+						url: constants.ERUDA_CDN,
+						responseType: "text",
+						contentType: "application/x-www-form-urlencoded",
+					});
+					await fsOperation(DATA_STORAGE).createFile("eruda.js", erudaScript);
+				} finally {
+					if (showLoader) loader.destroy();
+				}
+			}
+
+			const internalUri = await helpers.toInternalUri(erudaPath);
+
+			await new Promise((resolve, reject) => {
+				const script = document.createElement("script");
+				script.src = internalUri;
+				script.id = "eruda-script";
+				script.onload = resolve;
+				script.onerror = reject;
+				document.head.appendChild(script);
+			});
+
+			if (window.eruda) {
+				window.eruda.init({
+					useShadowDom: true,
+					autoScale: true,
+					defaults: {
+						displaySize: 50,
+					},
+				});
+
+				window.eruda._shadowRoot.querySelector(
+					".eruda-entry-btn",
+				).style.display = "none";
+
+				erudaInstance = window.eruda;
+				isInitialized = true;
+			}
+		} catch (error) {
+			console.error("Failed to initialize developer tools", error);
+			throw error;
+		}
+	},
+
+	/**
+	 * Show the inspector panel
+	 */
+	show() {
+		if (!isInitialized) {
+			window.toast?.("Developer mode is not enabled");
+			return;
+		}
+		const entryBtn =
+			erudaInstance?._shadowRoot?.querySelector(".eruda-entry-btn");
+		if (entryBtn) entryBtn.style.display = "";
+		erudaInstance?.show();
+	},
+
+	/**
+	 * Hide the inspector panel
+	 */
+	hide() {
+		if (!isInitialized) return;
+		erudaInstance?.hide();
+		const entryBtn =
+			erudaInstance?._shadowRoot?.querySelector(".eruda-entry-btn");
+		if (entryBtn) entryBtn.style.display = "none";
+	},
+
+	/**
+	 * Toggle the inspector panel visibility
+	 */
+	toggle() {
+		if (!isInitialized) {
+			window.toast?.("Developer mode is not enabled");
+			return;
+		}
+		if (erudaInstance?._isShow) {
+			this.hide();
+		} else {
+			this.show();
+		}
+	},
+
+	/**
+	 * Destroy Eruda instance
+	 */
+	destroy() {
+		if (!isInitialized) return;
+		erudaInstance?.destroy();
+		erudaInstance = null;
+		isInitialized = false;
+		const script = document.getElementById("eruda-script");
+		if (script) script.remove();
+	},
+};
+
+export default devTools;

src/lib/keyBindings.js

@@ -703,4 +703,10 @@ export default {
 		readOnly: true,
 		action: "run-tests",
 	},
+	toggleInspector: {
+		description: "Toggle Inspector",
+		key: "Ctrl-Shift-I",
+		readOnly: true,
+		action: "toggle-inspector",
+	},
 };

src/lib/settings.js

@@ -177,6 +177,7 @@ class Settings {
 			showSideButtons: true,
 			showAnnotations: false,
 			pluginsDisabled: {}, // pluginId: true/false
+			developerMode: false,
 		};
 		this.value = structuredClone(this.#defaultSettings);
 	}

src/main.js

@@ -219,6 +219,15 @@ async function onDeviceReady() {
 	acode.setLoadingMessage("Loading language...");
 	await lang.set(settings.value.lang);
 
+	if (settings.value.developerMode) {
+		try {
+			const devTools = (await import("lib/devTools")).default;
+			await devTools.init(false);
+		} catch (error) {
+			console.error("Failed to initialize developer tools", error);
+		}
+	}
+
 	try {
 		await loadApp();
 	} catch (error) {

src/settings/appSettings.js

@@ -77,6 +77,12 @@ export default function otherSettings() {
 			value: values.console,
 			select: [appSettings.CONSOLE_LEGACY, appSettings.CONSOLE_ERUDA],
 		},
+		{
+			key: "developerMode",
+			text: strings["developer mode"],
+			checkbox: values.developerMode,
+			info: strings["info-developerMode"],
+		},
 		{
 			key: "cleanInstallState",
 			text: strings["clean install state"],
@@ -247,6 +253,30 @@ export default function otherSettings() {
 				} catch (error) {
 					helpers.error(error);
 				}
+				break;
+			}
+
+			case "developerMode": {
+				if (value) {
+					const devTools = (await import("lib/devTools")).default;
+					try {
+						await devTools.init(true);
+						toast(
+							strings["developer mode enabled"] ||
+								"Developer mode enabled. Use command palette to toggle inspector.",
+						);
+					} catch (error) {
+						helpers.error(error);
+						value = false;
+					}
+				} else {
+					const devTools = (await import("lib/devTools")).default;
+					devTools.destroy();
+					toast(
+						strings["developer mode disabled"] || "Developer mode disabled",
+					);
+				}
+				break;
 			}
 
 			case "cleanInstallState": {