Deze pagina is vertaald door de Cloud Translation API.

Automatische werkruimteverbinding in Chrome DevTools

Workspace is een krachtige functie waarmee u de bronbestanden van uw website rechtstreeks vanuit Chrome DevTools kunt bewerken. Hierdoor hoeft u niet voortdurend te schakelen tussen uw code-editor en de browser.

Overzicht

Een werkruimte in Chrome DevTools koppelt bestanden die door een webserver worden aangeleverd aan bestanden in een lokale map op uw computer. Wanneer u een werkruimte inschakelt voor een lokaal project, worden alle wijzigingen die u aanbrengt in de bestanden in het deelvenster Bronnen van DevTools automatisch opgeslagen in uw lokale projectbestanden. Dit zorgt voor een naadloze bewerkingservaring, waardoor het voelt alsof u rechtstreeks aan de codebase van uw project werkt, terwijl u profiteert van de realtime inzichten van DevTools.

Voordelen van automatische werkruimteverbinding

Automatische werkruimteverbinding verbetert de werkruimte-instelling door handmatige configuratie te elimineren. In plaats van handmatig projectmappen toe te voegen aan DevTools, kan uw lokale ontwikkelserver een speciaal devtools.json -bestand aanbieden dat Chrome DevTools automatisch detecteert. Dit biedt verschillende voordelen:

Sneller debuggen: bewerk bestanden in DevTools en bekijk direct updates zonder dat u de browser hoeft te verlaten of handmatig hoeft op te slaan.
Wijzigingen in realtime: Wijzigingen worden direct doorgevoerd in uw lokale bestanden en in de browser, waardoor de ontwikkelsnelheid wordt verbeterd.
Geen handmatige installatie: het toewijzen van projectbestanden wordt geautomatiseerd, waardoor de installatietijd wordt verkort, vooral bij nieuwe projecten of bij het onboarden van teamleden.

Hoe werkt automatische werkruimteverbinding?

Automatische werkruimteverbinding werkt door uw lokale ontwikkelserver een specifiek JSON-bestand op een vooraf gedefinieerd pad te laten weergeven. Wanneer Chrome DevTools geopend is en u een website bezoekt die wordt aangeboden via localhost , wordt er automatisch een verzoek verzonden naar:

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

Als uw server reageert met een geldig devtools.json -bestand, gebruikt DevTools de informatie daarin om automatisch verbinding te maken met de bronmappen van uw project. Het devtools.json -bestand bevat doorgaans:

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

workspace.root : Het absolute pad naar de hoofdmap van uw project op uw lokale bestandssysteem.
workspace.uuid : Een unieke identificatie (UUID v4) voor uw project. Dit helpt DevTools onderscheid te maken tussen verschillende projecten.

Zodra DevTools dit bestand ontvangt en verwerkt, verschijnt er een knop Verbinden in het paneel Bronnen > Werkruimten .

Ontworpen voor lokale ontwikkeling en debuggen

Het mechanisme voor automatische werkruimtedetectie via devtools.json is exclusief ontworpen voor lokale ontwikkelomgevingen en werkt alleen wanneer uw applicatie wordt bediend vanuit localhost . Chrome DevTools verstuurt de /.well-known/appspecific/com.chrome.devtools.json alleen in de ontwikkelmodus wanneer u een lokaal project debugt. Deze functie is niet bedoeld voor productieomgevingen.

Geef toestemming om toegang te krijgen tot lokale bestanden

Om veiligheidsredenen vereist Chrome expliciete gebruikersrechten voor een website om toegang te krijgen tot bestanden op uw lokale netwerk of computer. Wanneer DevTools probeert verbinding te maken met uw lokale project via devtools.json , wordt u gevraagd om Chrome toestemming te verlenen voor toegang tot de directory van uw project. Dit verzoek om toestemming voldoet aan het beleid voor lokale netwerktoegang van Chrome , dat verzoeken van openbare netwerken naar lokale bestemmingen beperkt, tenzij toestemming is verleend. De mogelijkheid om deze toestemming aan te vragen is beperkt tot beveiligde contexten (HTTPS). Voor lokale ontwikkeling betekent dit meestal dat localhost als een beveiligde context wordt behandeld.

Een `devtools.json` -bestand maken en serveren

Voor een typisch frontendproject dat op een lokale ontwikkelserver wordt uitgevoerd, moet u uw server configureren om te reageren op de /.well-known/appspecific/com.chrome.devtools.json -aanvraag met de juiste JSON-inhoud.

U kunt dit als volgt aanpakken:

Genereer een UUID: Je hebt een UUID v4 nodig. Je kunt er een genereren met online tools of een script.
Bepaal de projectroot: verkrijg het absolute pad naar de hoofdmap van uw project.
Maak een eindpunt: configureer uw ontwikkelserver om GET-verzoeken naar /.well-known/appspecific/com.chrome.devtools.json te verwerken.
JSON serveren: Wanneer dit eindpunt wordt bereikt, wordt een JSON-antwoord geserveerd met de header Content-Type: application/json en de inhoud devtools.json .

Het pad naar workspace.root in uw devtools.json -bestand moet een absoluut pad zijn naar de hoofdmap van uw project op het lokale bestandssysteem. Dit betekent dat het pad varieert afhankelijk van uw besturingssysteem (bijvoorbeeld /Users/yourname/projects/my-app op macOS of Linux of C:\Users\yourname\projects\my-app op Windows) en uw specifieke projectconfiguratie. Overweeg om het toe te voegen aan uw genegeerde bestanden (bijvoorbeeld aan de lijst .gitignore) om te voorkomen dat dit bestand wordt ingecheckt voor de productieomgeving.

Het is belangrijk dat uw server dit pad dynamisch genereert of serveert, of dat u het correct configureert voor uw ontwikkelomgeving. Overweeg het toe te voegen aan uw genegeerde bestanden (bijvoorbeeld aan de lijst .gitignore ) om te voorkomen dat dit bestand wordt ingecheckt voor de productieomgeving.

Voorbeelden

Er zijn verschillende manieren om devtools.json -bestand aan te leveren, afhankelijk van de technische stack van uw project.

Node.js en Express

Dit script draait een minimale Express-server. Het serveert een JSON-bestand in /.well-known/appspecific/com.chrome.devtools.json dat het pad naar de projectRoot. Het verwijst naar de map van waaruit de server wordt uitgevoerd. Pas de variabele projectRoot aan zodat deze correct verwijst naar de daadwerkelijke root-directory van uw project, niet per se naar de locatie van uw serverscript.

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}`);
});

Gebruik het `devtools-json-generator` script

U kunt generate-devtools-json gebruiken om devtools.json voor u te genereren.

Om het bestand devtools.json in de huidige directory te genereren, voert u het volgende uit:

npx generate-devtools-json

Of om het bestand in een specifieke directory te genereren, geeft u de directory als argument door:

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

Lees meer over devtools-json-generator op de homepage van het project .

Integraties

Sommige frontend-frameworks en buildtools bieden plug-ins of configuraties om dit proces te vereenvoudigen.

Vite

Voor Vite-gebaseerde projecten (inclusief SvelteKit) is de vite-plugin-devtools-json een oplossing. Deze automatiseert het genereren en direct aanbieden van het devtools.json bestand.

Om het te gebruiken, installeer je de plugin:

npm install -D vite-plugin-devtools-json

Voeg het vervolgens toe aan je vite.config.js (of vite.config.ts ):

// 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',
    }),
  ],
});

Hoekig

Als u ng serve gebruikt om uw Angular-project lokaal uit te voeren (en uw @angular/cli versie minimaal 19.0.0 is), biedt de Angular CLI middleware die automatisch het juiste devtools.json -bestand voor u serveert.

Om bijvoorbeeld een nieuwe applicatie te maken en uit te voeren:

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

Wanneer u naar https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json navigeert, ziet u het gegenereerde JSON-bestand.

Probleemoplossing

U kunt de typische problemen met automatische werkruimteverbindingen oplossen door de tips in dit gedeelte te volgen.

Een map uit werkruimten verwijderen

Als een projectmap al automatisch is gekoppeld, kunt u deze handmatig verwijderen uit de instellingen van uw DevTools-werkruimte:

Open Chrome DevTools .
Ga naar het tabblad Bronnen .
Selecteer in het linkerdeelvenster het subtabblad Werkruimten .
Klik met de rechtermuisknop op de ongewenste projectmap en selecteer Verwijderen uit werkruimte .

Negeer 404-fouten op de server

Als u deze functie niet voor een bepaald project wilt gebruiken en 404-fouten ziet voor de /.well-known/appspecific/com.chrome.devtools.json in uw serverlogs, kunt u deze fouten negeren. De aanvraag is onschadelijk als het bestand niet wordt weergegeven. U kunt uw server ook configureren om te reageren met een 404-status voor dit specifieke pad zonder een fout te loggen.

Hoe u deze functie in Chrome DevTools kunt uitschakelen

Als u de functie voor automatische werkruimtedetectie in Chrome DevTools wilt uitschakelen, moet u de juiste Chrome-vlag instellen:

Open Chrome en ga naar chrome://flags .
Zoek naar " DevTools Project Settings " en schakel deze uit .
Mogelijk vindt u ook een gerelateerde vlag genaamd " DevTools Automatic Workspace Folders " en kunt u deze ook uitschakelen.
Start Chrome opnieuw om de wijzigingen door te voeren.

Samenvatting

Door het devtools.json -mechanisme te begrijpen en te gebruiken, kunt u uw lokale ontwikkelingsworkflow met Chrome DevTools aanzienlijk verbeteren.