[npm] Add watch mode to npm run build and npm start.

This adds a new script for `npm run build`, which supports a `--watch`
argument, to automatically re-build whenever source files change. It
also hooks this up to `npm start`, which to automatically rebuild in
the background while Chrome is running.

Bug: 404192426
Change-Id: I90ee3ea81312bcfff9470ab8c62d38608e4e9a71
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6367220
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>

Author: bmeurer

docs/get_the_code.md

@@ -27,8 +27,7 @@ To build, follow these steps:
 ```bash
 cd devtools-frontend
 gclient sync
-gn gen out/Default
-autoninja -C out/Default
+npm run build
 ```
 
 The resulting build artifacts can be found in `out/Default/gen/front_end`.
@@ -38,6 +37,7 @@ There are two tips to have a faster development workflow:
 * Using watch script for faster incremental builds with CSS hot reload.
 
 #### Disabling type checking
+
 You can disable type checking for TypeScript by using `devtools_skip_typecheck` argument:
 ```bash
 gn gen out/fast-build --args="devtools_skip_typecheck=true"
@@ -86,8 +86,10 @@ npm start
 ```
 
 to build DevTools front-end in `out/Default` (you can change this to `out/foo` by passing `--target=foo` if needed),
-and open Chrome for Testing (in `third_party/chrome`) with the custom DevTools front-end. It'll automatically open
-DevTools for every new tab, you can use
+and open Chrome for Testing (in `third_party/chrome`) with the custom DevTools front-end. This will also monitor the
+source files for changes while Chrome is running and automatically trigger a rebuild whenever source files change.
+
+By default, `npm start` will automatically open DevTools for every new tab, you can use
 
 ```bash
 npm start -- --no-auto-open-devtools-for-tabs

package.json

@@ -18,8 +18,7 @@
   },
   "scripts": {
     "bake-strings": "npm run collect-strings && vpython3 third_party/node/node.py --output third_party/i18n/bake-strings.js front_end/core/i18n/locales",
-    "build": "autoninja -C out/Default",
-    "build-release": "autoninja -C out/Release",
+    "build": "vpython3 third_party/node/node.py --output scripts/run_build.mjs",
     "check-external-links": "vpython3 third_party/node/node.py --output scripts/check_external_links.js",
     "collect-strings": "vpython3 third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
     "components-server": "vpython3 third_party/node/node.py --output scripts/component_server/server.js",

scripts/run_build.mjs

@@ -0,0 +1,85 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import childProcess from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+
+const argv = yargs(hideBin(process.argv))
+                 .option('target', {
+                   alias: 't',
+                   type: 'string',
+                   default: 'Default',
+                   description: 'Specify the target build subdirectory under //out',
+                 })
+                 .option('watch', {
+                   alias: 'w',
+                   type: 'boolean',
+                   default: false,
+                   description: 'Monitor for changes and automatically rebuild',
+                 })
+                 .option('watch-only', {
+                   type: 'boolean',
+                   default: false,
+                   description: 'Skip the initial build',
+                 })
+                 .usage('npm run build -- [options]')
+                 .help('help')
+                 .version(false)
+                 .parse();
+
+const {target, watch, watchOnly} = argv;
+const cwd = process.cwd();
+const {env} = process;
+
+// Create and initiative the `out/<target>` directory as needed.
+const outDir = path.join('out', target);
+if (!fs.existsSync(outDir)) {
+  const gnExe = path.join(cwd, 'third_party', 'depot_tools', 'gn');
+  fs.mkdirSync(outDir, {recursive: true});
+  childProcess.spawnSync(gnExe, ['gen', outDir], {
+    cwd,
+    env,
+    stdio: 'inherit',
+  });
+}
+
+function build() {
+  const autoninjaExe = path.join(cwd, 'third_party', 'depot_tools', 'autoninja');
+  childProcess.spawnSync(autoninjaExe, ['-C', outDir], {
+    cwd,
+    env,
+    stdio: 'inherit',
+  });
+}
+
+// Skip initial build if we should only watch.
+if (!watchOnly) {
+  build();
+}
+
+if (watch || watchOnly) {
+  let timeoutId = -1;
+
+  function watchCallback(eventType, filename) {
+    if (eventType !== 'change') {
+      return;
+    }
+    if (['BUILD.gn'].includes(filename) || ['.css', '.js', '.ts'].includes(path.extname(filename))) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(build, 250);
+    }
+  }
+
+  const WATCHLIST = ['front_end', 'inspector_overlay', 'test'];
+  for (const dirname of WATCHLIST) {
+    fs.watch(
+        dirname,
+        {recursive: true},
+        (eventType, filename) => watchCallback(eventType, path.join(dirname, filename)),
+    );
+  }
+}

scripts/run_start.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env vpython3
-# Copyright 2019 The Chromium Authors. All rights reserved.
+# Copyright 2025 The Chromium Authors. All rights reserved.
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 """
@@ -138,4 +138,13 @@ def start(options):
     logging.basicConfig(
         level=logging.DEBUG if OPTIONS.verbose else logging.INFO)
     build(OPTIONS)
-    start(OPTIONS)
+
+    rebuilderCmd = [
+        devtools_paths.node_path(),
+        path.join(devtools_paths.devtools_root_path(), 'scripts',
+                  'run_build.mjs'),
+        '--target=%s' % OPTIONS.target, '--watch-only'
+    ]
+    with subprocess.Popen(rebuilderCmd) as proc:
+        start(OPTIONS)
+        proc.kill()