Developing and Debugging Chrome Extensions in VS Code

A guide for developing Google Chrome extensions using VS Code (Visual Studio Code). Using VS Code as an IDE (Integrated Development Environment) improves Chrome extension development efficiency. For example, when you edit the main JavaScript program, it’s immediately reflected in Chrome.

Install the following plugin in VS Code.

Debugger for Chrome - Visual Studio Marketplace

Set up VS Code’s launch.json as follows. Specify the path to Google Chrome in “runtimeExecutable”.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "https://example.com",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"],
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
        }
    ]
}

Then run and test the program. The shortcut key is F5.

You may get the following error when running:

unable to launch browser spawn unknown vscode

This can be resolved as follows:

The issue was that in my computer Chrome was installed at two different places C:\Users[user]\AppData\Local\Google\Chrome\Application\chrome.exe C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

This issue was caused by having two different Google Chrome installations on my computer. C:\Users[user]\AppData\Local\Google\Chrome\Application\chrome.exe C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

(Reference)

model view controller - “spawn UNKNOWN” error while debugging Visual Studio MVC application to Chrome - Stack Overflow

Additionally, it’s good to install libraries for debugging JavaScript programs. For Linux, install normally. For Windows, it won’t work if installed via WSL. Start PowerShell with administrator privileges and install packages from node.js installed on Windows.

(jshint)

npm install -g jshint

(ESLint)

npm install -g eslint