1.1.0 • Public • Published


Create Chrome Debugger

This tool automates the process of creating a Chrome app shortcut, configured to launch Chrome in remote debugging mode.

Why use this tool?

While debugging JavaScript applications using editors such as VSCode, the Chrome browser must be launched with remote debugging enabled. This usually involves manually starting the browser from the command line with a specific flag (--remote-debugging-port=9222). This tool simplifies this process by creating a readily clickable Chrome Debugger app that launches Chrome with the needed command-line flag.

You can find more details about remote debugging in this post on the Chromium blog.


The following short video shows how to set up the Chrome Debugger and debug a React app from VSCode in no time:


You must have Google Chrome installed on your machine. The tool assumes Chrome is installed at the following locations:

  • macOS: /Applications/Google Chrome
  • Linux: Support is currently unavailable. We welcome your contributions!
  • Windows: Support is currently unavailable. We welcome your contributions!


Install and run the package swiftly with npx:

npx create-chrome-debugger

Or, install it globally using npm and then execute:

npm install -g create-chrome-debugger

Upon successful installation, a new Chrome Debugger app shortcut will appear in your Application Library. You can relocate it as per your convenience, such as to your Dock.

How to use it?


Click the Chrome Debugger app to launch a new Chrome instance with remote debugging enabled. Upon first launch, Chrome might prompt to set it as the default browser - this step can be disregarded.

To confirm that remote debugging is enabled, navigate to chrome://version in Chrome. It should display like this:


The Chrome instance launched by Chrome Debugger functions in its own user data directory, ensuring isolated history, bookmarks, cookies, etc. It will not interfere with your regular Chrome instance. The user data directory is found at /Users/<username>/Library/Application Support/Google/Chrome Debugger.

# print the location of the user data directory
echo "$HOME/Library/Application Support/Google/Chrome Debugger"


For debugging JavaScript apps from VSCode, a debug configuration launch.json must be created inside the .vscode folder:

  "version": "0.2.0",
  "configurations": [
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "urlFilter": "http://localhost:3000/*",
      "webRoot": "${workspaceFolder}"

For more insights, refer to this guide or the official VSCode documentation.

Release Notes

  • v1.1.x
    • Modified VSCode debug configuration "type": "pwa-chrome" to "type": "chrome"
    • Added --user-data-dir command line flag as recommended by Chromium
  • v1.0.x - Initial release


Credit for the initial implementation and the Chrome Debugger icon goes to David Mann's StackOverflow post.


npm i create-chrome-debugger

DownloadsWeekly Downloads






Unpacked Size

97.2 kB

Total Files


Last publish


  • chriszirkel