Entwickeln und Debuggen von Chrome-Erweiterungen in VS Code

Ein Leitfaden zur Entwicklung von Google Chrome-Erweiterungen mit VS Code (Visual Studio Code). Die Verwendung von VS Code als IDE (Integrierte Entwicklungsumgebung) verbessert die Effizienz der Chrome-Erweiterungsentwicklung. Wenn Sie beispielsweise das Haupt-JavaScript-Programm bearbeiten, wird es sofort in Chrome widergespiegelt.

Installieren Sie das folgende Plugin in VS Code.

Debugger for Chrome - Visual Studio Marketplace

Richten Sie die launch.json von VS Code wie folgt ein. Geben Sie den Pfad zu Google Chrome in “runtimeExecutable” an.

{
    "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",
        }
    ]
}

Führen Sie dann das Programm aus und testen Sie es. Die Tastenkombination ist F5.

Möglicherweise erhalten Sie beim Ausführen den folgenden Fehler:

unable to launch browser spawn unknown vscode

Dies kann wie folgt behoben werden:

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

Dieses Problem wurde dadurch verursacht, dass zwei verschiedene Google Chrome-Installationen auf meinem Computer vorhanden waren. C:\Users[user]\AppData\Local\Google\Chrome\Application\chrome.exe C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

(Referenz)

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

Zusätzlich ist es gut, Bibliotheken für das Debuggen von JavaScript-Programmen zu installieren. Für Linux normal installieren. Für Windows funktioniert es nicht, wenn es über WSL installiert wird. Starten Sie PowerShell mit Administratorrechten und installieren Sie Pakete von node.js, die auf Windows installiert sind.

(jshint)

npm install -g jshint

(ESLint)

npm install -g eslint