Diese Seite wurde von der Cloud Translation API übersetzt.

Automatische Workspace-Verbindung in den Chrome-Entwicklertools

Workspace ist eine leistungsstarke Funktion, mit der Sie die Quelldateien Ihrer Website direkt in den Chrome-Entwicklertools bearbeiten können. So müssen Sie nicht ständig zwischen Ihrem Code-Editor und dem Browser wechseln.

Übersicht

Ein Arbeitsbereich in den Chrome-Entwicklertools ordnet Dateien, die von einem Webserver bereitgestellt werden, Dateien in einem lokalen Ordner auf Ihrem Computer zu. Wenn Sie einen Arbeitsbereich für ein lokales Projekt aktivieren, werden alle Änderungen, die Sie an den Dateien im DevTools-Bereich Quellen vornehmen, automatisch in den lokalen Projektdateien gespeichert. So können Sie nahtlos Änderungen vornehmen und haben das Gefühl, direkt am Code Ihres Projekts zu arbeiten, während Sie von den Echtzeitinformationen von DevTools profitieren.

Vorteile der automatischen Workspace-Verbindung

Durch die automatische Arbeitsbereichsverbindung wird die Einrichtung des Arbeitsbereichs vereinfacht, da keine manuelle Konfiguration erforderlich ist. Anstatt Projektordner manuell zu den Entwicklertools hinzuzufügen, kann Ihr lokaler Entwicklungsserver eine spezielle devtools.json-Datei bereitstellen, die von den Chrome-Entwicklertools automatisch erkannt wird. Das bietet mehrere Vorteile:

Schnelleres Debugging:Sie können Dateien in DevTools bearbeiten und Änderungen sofort sehen, ohne den Browser zu verlassen oder manuell zu speichern.
Echtzeitänderungen:Änderungen werden sofort in Ihren lokalen Dateien und im Browser übernommen, was die Entwicklungsgeschwindigkeit erhöht.
Keine manuelle Einrichtung:Die Zuordnung von Projektdateien wird automatisiert, was die Einrichtungszeit verkürzt, insbesondere bei neuen Projekten oder beim Onboarding von Teammitgliedern.

Wie funktioniert die automatische Workspace-Verbindung?

Die automatische Arbeitsbereichverbindung funktioniert, indem Ihr lokaler Entwicklungsserver eine bestimmte JSON-Datei an einem vordefinierten Pfad bereitstellt. Wenn die Chrome-Entwicklertools geöffnet sind und Sie eine Website aufrufen, die von localhost bereitgestellt wird, wird automatisch eine Anfrage an folgende Adresse gesendet:

/.well-known/appspecific/com.chrome.devtools.json

Wenn Ihr Server mit einer gültigen devtools.json-Datei antwortet, verwendet DevTools die darin enthaltenen Informationen, um automatisch eine Verbindung zu den Quellordnern Ihres Projekts herzustellen. Die Datei devtools.json enthält in der Regel Folgendes:

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}

workspace.root: Der absolute Pfad zum Stammverzeichnis Ihres Projekts in Ihrem lokalen Dateisystem.
workspace.uuid: Eine eindeutige Kennung (UUID v4) für Ihr Projekt. So kann DevTools zwischen verschiedenen Projekten unterscheiden.

Sobald DevTools diese Datei empfängt und verarbeitet hat, wird im Bereich Quellen > Arbeitsbereiche die Schaltfläche Verbinden angezeigt.

Für die lokale Entwicklung und das Debugging konzipiert

Der automatische Arbeitsbereich-Erkennungsmechanismus über devtools.json ist ausschließlich für lokale Entwicklungsumgebungen vorgesehen und funktioniert nur, wenn Ihre Anwendung über localhost bereitgestellt wird. Chrome-Entwicklertools senden die /.well-known/appspecific/com.chrome.devtools.json-Anfrage nur im Entwicklermodus, wenn Sie ein lokales Projekt debuggen. Diese Funktion ist nicht für Produktionsumgebungen vorgesehen.

Berechtigung für den Zugriff auf lokale Dateien gewähren

Aus Sicherheitsgründen benötigt Chrome eine ausdrückliche Nutzerberechtigung, damit eine Website auf Dateien in Ihrem lokalen Netzwerk oder auf Ihrem Computer zugreifen kann. Wenn DevTools versucht, über devtools.json eine Verbindung zu Ihrem lokalen Projekt herzustellen, werden Sie aufgefordert, Chrome die Berechtigung zum Zugriff auf das Verzeichnis Ihres Projekts zu erteilen. Diese Berechtigungsanfrage entspricht den Richtlinien für den Zugriff auf lokale Netzwerke in Chrome, die Anfragen aus öffentlichen Netzwerken an lokale Ziele einschränken, sofern keine Berechtigung erteilt wird. Die Möglichkeit, diese Berechtigung anzufordern, ist auf sichere Kontexte (HTTPS) beschränkt. Bei der lokalen Entwicklung bedeutet dies in der Regel, dass localhost als sicherer Kontext behandelt wird.

`devtools.json`-Datei erstellen und bereitstellen

Bei einem typischen Frontend-Projekt, das auf einem lokalen Entwicklungsserver ausgeführt wird, müssen Sie den Server so konfigurieren, dass er auf die /.well-known/appspecific/com.chrome.devtools.json-Anfrage mit dem richtigen JSON-Inhalt antwortet.

So können Sie vorgehen:

UUID generieren:Sie benötigen eine UUID v4. Sie können eine mit Onlinetools oder einem Skript erstellen.
Projektstammverzeichnis ermitteln:Rufen Sie den absoluten Pfad zum Stammverzeichnis Ihres Projekts ab.
Endpunkt erstellen:Konfigurieren Sie Ihren Entwicklungsserver so, dass er GET-Anfragen an /.well-known/appspecific/com.chrome.devtools.json verarbeitet.
JSON bereitstellen:Wenn dieser Endpunkt aufgerufen wird, stellen Sie eine JSON-Antwort mit dem Content-Type: application/json-Header und dem devtools.json-Inhalt bereit.

Der in der Datei devtools.json angegebene Pfad workspace.root muss ein absoluter Pfad zum Stammverzeichnis Ihres Projekts im lokalen Dateisystem sein. Der Pfad variiert also je nach Betriebssystem (z. B. /Users/yourname/projects/my-app unter macOS oder Linux oder C:\Users\yourname\projects\my-app unter Windows) und Ihrer spezifischen Projekteinrichtung. Fügen Sie sie den ignorierten Dateien hinzu (z.B. der .gitignore-Liste), um zu vermeiden, dass diese Datei für die Produktionsumgebung eingecheckt wird.

Es ist wichtig, dass Ihr Server diesen Pfad dynamisch generiert oder bereitstellt oder dass Sie ihn für Ihre Entwicklungsumgebung richtig konfigurieren. Sie sollten sie zu den ignorierten Dateien hinzufügen (z. B. zur Liste .gitignore), um zu vermeiden, dass diese Datei in der Produktionsumgebung eingecheckt wird.

Beispiele

Je nach Tech-Stack Ihres Projekts gibt es viele Möglichkeiten, die devtools.json-Datei bereitzustellen.

Node.js und Express

Mit diesem Skript wird ein minimaler Express-Server ausgeführt. Es wird eine JSON-Datei unter /.well-known/appspecific/com.chrome.devtools.json bereitgestellt, die den Pfad zu projectRoot. enthält. Sie verweist auf den Ordner, in dem der Server ausgeführt wird. Passen Sie die Variable projectRoot so an, dass sie auf das tatsächliche Stammverzeichnis Ihres Projekts verweist, nicht unbedingt auf den Speicherort Ihres Server-Skripts.

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

`devtools-json-generator`-Skript verwenden

Sie können generate-devtools-json verwenden, um die devtools.json generieren zu lassen.

Führen Sie Folgendes aus, um die Datei devtools.json im aktuellen Verzeichnis zu generieren:

npx generate-devtools-json

Wenn Sie die Datei in einem bestimmten Verzeichnis generieren möchten, übergeben Sie das Verzeichnis als Argument:

npx generate-devtools-json /path/to/your/project

Weitere Informationen zu devtools-json-generator finden Sie auf der Startseite des Projekts.

Integrationen

Einige Frontend-Frameworks und Build-Tools bieten Plug-ins oder Konfigurationen an, um diesen Prozess zu vereinfachen.

Vite

Für Vite-basierte Projekte (einschließlich SvelteKit) ist vite-plugin-devtools-json eine Lösung. Die Datei devtools.json wird automatisch generiert und bereitgestellt.

Installieren Sie das Plug-in, um es zu verwenden:

npm install -D vite-plugin-devtools-json

Fügen Sie sie dann Ihrem vite.config.js (oder vite.config.ts) hinzu:

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

Angular

Wenn Sie ng serve verwenden, um Ihr Angular-Projekt lokal auszuführen (und Ihre @angular/cli-Version mindestens 19.0.0 ist), stellt die Angular-Befehlszeile Middleware bereit, die automatisch die richtige devtools.json-Datei bereitstellt.

So erstellen und führen Sie beispielsweise eine neue Anwendung aus:

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

Wenn Sie zu https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json wechseln, sehen Sie die generierte JSON-Datei.

Fehlerbehebung

Mit den Tipps in diesem Abschnitt können Sie die typischen Probleme im Zusammenhang mit der automatischen Arbeitsbereichsverbindung beheben.

Ordner aus Arbeitsbereichen entfernen

Wenn ein Projektordner bereits automatisch verbunden wurde, können Sie ihn manuell aus den Arbeitsbereichseinstellungen der Entwicklertools entfernen:

Öffnen Sie die Chrome-Entwicklertools.
Rufen Sie den Tab Quellen auf.
Wählen Sie im linken Bereich den Untertab Arbeitsbereiche aus.
Klicken Sie mit der rechten Maustaste auf den unerwünschten Projektordner und wählen Sie Aus dem Arbeitsbereich entfernen aus.

404-Fehler auf dem Server ignorieren

Wenn Sie diese Funktion für ein bestimmtes Projekt nicht verwenden möchten und in Ihren Serverlogs 404-Fehler für die /.well-known/appspecific/com.chrome.devtools.json-Anfrage angezeigt werden, können Sie diese Fehler ignorieren. Die Anfrage ist harmlos, wenn die Datei nicht bereitgestellt wird. Alternativ können Sie Ihren Server so konfigurieren, dass er für diesen bestimmten Pfad mit dem Status „404“ antwortet, ohne einen Fehler zu protokollieren.

So deaktivieren Sie diese Funktion in den Chrome-Entwicklertools

Wenn Sie die automatische Arbeitsbereichserkennung in den Chrome-Entwicklertools deaktivieren möchten, müssen Sie das entsprechende Chrome-Flag festlegen:

Öffnen Sie Chrome und rufen Sie chrome://flags auf.
Suchen Sie nach DevTools Project Settings und stellen Sie die Option auf Disabled (Deaktiviert) ein.
Möglicherweise finden Sie auch ein zugehöriges Flag namens DevTools Automatic Workspace Folders, das Sie ebenfalls deaktivieren können.
Starten Sie Chrome neu, damit die Änderungen wirksam werden.

Zusammenfassung

Wenn Sie den devtools.json-Mechanismus verstehen und nutzen, können Sie Ihren lokalen Entwicklungsablauf mit den Chrome-Entwicklertools erheblich verbessern.