[npm] Add profile directory and remote debugging port options.

Teach `npm start` about `--user-data-dir` and `--remote-debugging-port`
command line flags for Chrome.

Fixed: 416602639
Change-Id: Ib84afc8a6f367561cd1d2ab3a6314a16da2f22e2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6530461
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>

Author: bmeurer

docs/get_the_code.md

@@ -199,6 +199,24 @@ npm start -- --disable-features=DevToolsWellKnown --enable-features=DevToolsFree
 
 which you can use to override the default feature set.
 
+##### Remote debugging
+
+The `npm start` command also supports launching Chrome for remote debugging via
+
+```bash
+npm start -- --remote-debugging-port=9222
+```
+
+or
+
+```bash
+npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=\`mktemp -d`
+```
+
+Note that you have to also pass the `--user-data-dir` and point it to a non-standard profile directory (a freshly created
+temporary directory in this example) for security reason when using any Chrome version except for Chrome for Testing.
+[This article](https://developer.chrome.com/blog/remote-debugging-port) explains the reasons behind it.
+
 #### Running from file system
 
 This works with Chromium 79 or later.

scripts/run_start.mjs

@@ -65,24 +65,42 @@ const argv = yargs(hideBin(process.argv))
                    default: true,
                    description: 'Automatically open DevTools for new tabs',
                  })
+                 .option('remote-debugging-port', {
+                   type: 'number',
+                   description: 'Launch Chrome with the remote debugging port',
+                 })
                  .option('target', {
                    alias: 't',
                    type: 'string',
                    default: 'Default',
                    description: 'Specify the target build subdirectory under //out',
                  })
+                 .option('user-data-dir', {
+                   type: 'string',
+                   description: 'Launch Chrome with the given profile directory',
+                 })
                  .option('verbose', {
                    type: 'boolean',
                    default: false,
                    description: 'Enable verbose logging',
                  })
-                 .group(['unstable-features', 'enable-features', 'disable-features'], 'Feature set:')
+                 .group(['unstable-features', 'enable-features', 'disable-features'], 'Feature options:')
                  .usage('npm start -- [options] [urls...]')
                  .help('help')
                  .version(false)
                  .parseSync();
 
-const {browser, disableFeatures, enableFeatures, unstableFeatures, open, target, verbose} = argv;
+const {
+  browser,
+  disableFeatures,
+  enableFeatures,
+  unstableFeatures,
+  open,
+  remoteDebuggingPort,
+  target,
+  userDataDir,
+  verbose,
+} = argv;
 const cwd = process.cwd();
 const {env} = process;
 const runBuildPath = path.join(import.meta.dirname, 'run_build.mjs');
@@ -114,6 +132,18 @@ function findBrowserBinary() {
   return browser;
 }
 
+// The `--remote-debugging-port` command line flag only has an effect in Chrome
+// nowadays when used with a non-default data directory, so we fail if the user
+// didn't also specify the `--user-data-dir` command line flag. In Chrome for
+// Testing the remote debugging port still works with the default profile.
+if (remoteDebuggingPort && browser !== 'cft' && !userDataDir) {
+  console.error(
+      'The `--remote-debugging-port` command line switch must be accompanied by the `--user-data-dir` switch\n' +
+      'to point to a non-standard directory. See https://developer.chrome.com/blog/remote-debugging-port for\n' +
+      'more information.\n');
+  process.exit(1);
+}
+
 // Perform the initial build.
 const {status} = childProcess.spawnSync(process.argv[0], [runBuildPath, `--target=${target}`], {
   cwd,
@@ -156,6 +186,14 @@ function start() {
   }
   args.push(...featureSet);
 
+  // Custom flags for Chrome.
+  if (remoteDebuggingPort) {
+    args.push(`--remote-debugging-port=${remoteDebuggingPort}`);
+  }
+  if (userDataDir) {
+    args.push(`--user-data-dir=${userDataDir}`);
+  }
+
   // Open with our freshly built DevTools front-end.
   const genDir = path.join(rootPath(), 'out', target, 'gen');
   const customDevToolsFrontEndPath = isInChromiumDirectory().isInChromium ?