如何通过Gulp+Browsersync启动带调试端口参数的Chrome浏览器

Got it, let's get this sorted for you! The problem with your earlier attempts is that passing the port parameter as part of a single string makes Browsersync treat the whole thing as the browser executable name—so it can't find the correct Chrome binary. Instead, you need to use an array to separate the browser identifier and its command-line arguments.

Working Code Snippet #

Replace your existing browserSync task with this:

gulp.task("browserSync", function () {
  browserSync.init({
    server: { baseDir: "src" },
    browser: ["google chrome", "--remote-debugging-port=9222"],
  });
});

Why This Works #

Browsersync’s browser option supports array values where:

• The first element is the browser’s recognized name (Browsersync handles cross-OS lookup for common browsers like "google chrome")
• Every element after that is a separate command-line flag you want to pass to the browser

Fallback for Windows Users (If Needed) #

If the above doesn’t work (unlikely, but possible if Chrome isn’t in your system PATH), you can specify the full path to chrome.exe:

browser: ["C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", "--remote-debugging-port=9222"],

After updating your Gulpfile, run the browserSync task. Chrome will launch with the remote debugging port enabled, and you’ll be able to connect it to the VS Code Chrome Devtools Extension smoothly.

内容的提问来源于stack exchange，提问作者cycle4passion