feat: how to inspect node menu item and dialog

Author: abose

src/document/DocumentCommandHandlers.js

@@ -1901,7 +1901,7 @@ define(function (require, exports, module) {
             event.preventDefault();
             _handleWindowGoingAway(null, closeSuccess=>{
                 console.log('close success: ', closeSuccess);
-                window.PhNodeEngine.terminateNode();
+                window.PhNodeEngine && window.PhNodeEngine.terminateNode();
                 Phoenix.app.closeWindow();
             }, closeFail=>{
                 console.log('close fail: ', closeFail);

src/extensions/default/DebugCommands/main.js

@@ -35,6 +35,7 @@ define(function (require, exports, module) {
         PerfUtils              = brackets.getModule("utils/PerfUtils"),
         StringUtils            = brackets.getModule("utils/StringUtils"),
         Dialogs                = brackets.getModule("widgets/Dialogs"),
+        DefaultDialogs         = brackets.getModule("widgets/DefaultDialogs"),
         Strings                = brackets.getModule("strings"),
         PreferencesManager     = brackets.getModule("preferences/PreferencesManager"),
         LocalizationUtils      = brackets.getModule("utils/LocalizationUtils"),
@@ -72,6 +73,7 @@ define(function (require, exports, module) {
         DEBUG_SWITCH_LANGUAGE                 = "debug.switchLanguage",
         DEBUG_ENABLE_LOGGING                  = "debug.enableLogging",
         DEBUG_ENABLE_PHNODE_INSPECTOR         = "debug.enablePhNodeInspector",
+        DEBUG_GET_PHNODE_INSPECTOR_URL        = "debug.getPhNodeInspectorURL",
         DEBUG_LIVE_PREVIEW_LOGGING            = "debug.livePreviewLogging",
         DEBUG_OPEN_VFS                        = "debug.openVFS",
         DEBUG_OPEN_EXTENSION_FOLDER           = "debug.openExtensionFolders",
@@ -702,6 +704,25 @@ define(function (require, exports, module) {
         _updateLogToConsoleMenuItemChecked();
     }
 
+    function _handleGetPhNodeInspectURL() {
+        Dialogs.showModalDialog(DefaultDialogs.DIALOG_ID_INFO, Strings.CMD_GET_PHNODE_INSPECTOR_URL,
+            `<div id="instructions">
+  <p>
+    1. Go to <a href="chrome://inspect/" target="_blank">chrome://inspect/#devices</a>
+    <button onclick="Phoenix.app.copyToClipboard('chrome://inspect/')">
+      <i class="fas fa-copy"></i> Copy
+    </button>
+  </p>
+  <p>2. Select Option 'Open dedicated DevTools for Node'</p>
+  <p>
+    3. Use the URL in connection tab'<code>localhost:${window.PhNodeEngine.getInspectPort()}</code>'
+    <button onclick="Phoenix.app.copyToClipboard('localhost:${window.PhNodeEngine.getInspectPort()}')">
+      <i class="fas fa-copy"></i> Copy
+    </button>
+  </p>
+</div>`);
+    }
+
     function _handleLivePreviewLogging() {
         window.toggleLoggingKey(LOG_LIVE_PREVIEW_KEY);
         _updateLogToConsoleMenuItemChecked();
@@ -757,6 +778,7 @@ define(function (require, exports, module) {
 
     CommandManager.register(Strings.CMD_ENABLE_LOGGING, DEBUG_ENABLE_LOGGING,   _handleLogging);
     CommandManager.register(Strings.CMD_ENABLE_PHNODE_INSPECTOR, DEBUG_ENABLE_PHNODE_INSPECTOR, _handlePhNodeInspectEnable);
+    CommandManager.register(Strings.CMD_GET_PHNODE_INSPECTOR_URL, DEBUG_GET_PHNODE_INSPECTOR_URL, _handleGetPhNodeInspectURL);
     CommandManager.register(Strings.CMD_ENABLE_LIVE_PREVIEW_LOGS, DEBUG_LIVE_PREVIEW_LOGGING, _handleLivePreviewLogging);
     CommandManager.register(Strings.CMD_OPEN_VFS, DEBUG_OPEN_VFS,   _openVFS);
     CommandManager.register(Strings.CMD_OPEN_EXTENSIONS_FOLDER, DEBUG_OPEN_EXTENSION_FOLDER,   _openExtensionsFolder);
@@ -782,6 +804,9 @@ define(function (require, exports, module) {
     debugMenu.addMenuItem(DEBUG_ENABLE_PHNODE_INSPECTOR, undefined, undefined, undefined, {
         hideWhenCommandDisabled: true
     });
+    debugMenu.addMenuItem(DEBUG_GET_PHNODE_INSPECTOR_URL, undefined, undefined, undefined, {
+        hideWhenCommandDisabled: true
+    });
     debugMenu.addMenuItem(DEBUG_LIVE_PREVIEW_LOGGING);
     debugMenu.addMenuDivider();
     debugMenu.addMenuItem(DEBUG_OPEN_VFS);
@@ -798,6 +823,8 @@ define(function (require, exports, module) {
         .setEnabled(Phoenix.browser.isTauri); // only show in tauri
     CommandManager.get(DEBUG_ENABLE_PHNODE_INSPECTOR)
         .setEnabled(Phoenix.browser.isTauri); // only show in tauri
+    CommandManager.get(DEBUG_GET_PHNODE_INSPECTOR_URL)
+        .setEnabled(Phoenix.browser.isTauri); // only show in tauri
     CommandManager.get(DEBUG_OPEN_VIRTUAL_SERVER)
         .setEnabled(!Phoenix.browser.isTauri); // don't show in tauri as there is no virtual server in tauri
 

src/nls/root/strings.js

@@ -697,6 +697,7 @@ define({
     "CMD_SHOW_PERF_DATA": "Show Performance Data",
     "CMD_ENABLE_LOGGING": "Enable Detailed Logs",
     "CMD_ENABLE_PHNODE_INSPECTOR": "Enable PhNode Inspector",
+    "CMD_GET_PHNODE_INSPECTOR_URL": "How to Inspect PhNode",
     "CMD_ENABLE_LIVE_PREVIEW_LOGS": "Live Preview Logs",
     "CMD_OPEN_BRACKETS_SOURCE": "Open {APP_NAME} Source",
 

src/node-loader.js

@@ -44,9 +44,14 @@ if(Phoenix.browser.isTauri) {
             return !!prefs.inspectEnabled;
         }
 
+        function getRandomNumber(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
         window.__TAURI__.path.resolveResource("src-node/index.js")
             .then(async nodeSrcPath=>{
-                const argsArray = isInspectEnabled() ? ['--inspect', nodeSrcPath] : [nodeSrcPath, ''];
+                const inspectPort = Phoenix.isTestWindow ? getRandomNumber(5000, 50000) : 9229;
+                const argsArray = isInspectEnabled() ? [`--inspect=${inspectPort}`, nodeSrcPath] : [nodeSrcPath, ''];
                 command = window.__TAURI__.shell.Command.sidecar('phnode', argsArray);
                 command.on('close', data => {
                     window.isNodeTerminated = true;
@@ -88,6 +93,9 @@ if(Phoenix.browser.isTauri) {
                     isInspectEnabled,
                     terminateNode: function () {
                         execNode(NODE_COMMANDS.TERMINATE);
+                    },
+                    getInspectPort: function () {
+                        return inspectPort;
                     }
                 };
 

src/phoenix/shell.js

@@ -155,6 +155,14 @@ Phoenix.app = {
         nativeWindow.isTauriWindow = false;
         return nativeWindow;
     },
+    copyToClipboard: function (textToCopy) {
+        const textArea = document.createElement("textarea");
+        textArea.value = textToCopy;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+    },
     getApplicationSupportDirectory: Phoenix.VFS.getAppSupportDir,
     getExtensionsDirectory: Phoenix.VFS.getExtensionDir,
     getUserDocumentsDirectory: Phoenix.VFS.getUserDocumentsDirectory,