Ta strona została przetłumaczona przez Cloud Translation API.

Automatyczne połączenie z obszarem roboczym w Narzędziach deweloperskich w Chrome

Obszar roboczy to zaawansowana funkcja, która umożliwia bezpośrednie edytowanie plików źródłowych witryny w Narzędziach deweloperskich w Chrome. Dzięki temu nie musisz ciągle przełączać się między edytorem kodu a przeglądarką.

Przegląd

Obszar roboczy w Narzędziach deweloperskich w Chrome mapuje pliki obsługiwane przez serwer WWW na pliki w lokalnym folderze na komputerze. Gdy włączysz obszar roboczy dla projektu lokalnego, wszelkie zmiany wprowadzane w plikach w panelu Źródła w Narzędziach deweloperskich będą automatycznie zapisywane w plikach projektu lokalnego. Zapewnia to płynną edycję, dzięki czemu masz wrażenie, że pracujesz bezpośrednio nad kodem projektu, a jednocześnie korzystasz z informacji w czasie rzeczywistym dostarczanych przez Narzędzia deweloperskie.

Zalety automatycznego łączenia z obszarem roboczym

Automatyczne połączenie z obszarem roboczym usprawnia konfigurację, ponieważ eliminuje konieczność ręcznego konfigurowania. Zamiast ręcznie dodawać foldery projektu do narzędzi deweloperskich, lokalny serwer deweloperski może udostępniać specjalny devtools.json, który narzędzia deweloperskie w Chrome wykrywają automatycznie. Daje to kilka korzyści:

Szybsze debugowanie: edytuj pliki w Narzędziach deweloperskich i od razu zobacz zmiany bez opuszczania przeglądarki ani ręcznego zapisywania.
Zmiany w czasie rzeczywistym: zmiany są natychmiast odzwierciedlane w plikach lokalnych i przeglądarce, co zwiększa szybkość tworzenia.
Brak ręcznej konfiguracji: automatyzuje mapowanie plików projektu, co skraca czas konfiguracji, zwłaszcza w przypadku nowych projektów lub podczas wdrażania członków zespołu.

Jak działa automatyczne łączenie z obszarem roboczym?

Automatyczne połączenie z przestrzenią roboczą działa w ten sposób, że lokalny serwer deweloperski udostępnia określony plik JSON w zdefiniowanej ścieżce. Gdy Narzędzia deweloperskie w Chrome są otwarte i przeglądasz witrynę obsługiwaną przez localhost, automatycznie wysyłają żądanie do:

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

Jeśli serwer odpowie prawidłowym plikiem devtools.json, DevTools użyje zawartych w nim informacji, aby automatycznie połączyć się z folderami źródłowymi projektu. devtools.json plik zwykle zawiera:

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

workspace.root: ścieżka bezwzględna do katalogu głównego projektu w lokalnym systemie plików.
workspace.uuid: unikalny identyfikator (UUID w wersji 4) Twojego projektu. Ułatwia to narzędziom deweloperskim rozróżnianie różnych projektów.

Gdy narzędzia deweloperskie otrzymają i przetworzą ten plik, w panelu Źródła > Obszary robocze pojawi się przycisk Połącz.

Zaprojektowane z myślą o lokalnym programowaniu i debugowaniu

Mechanizm automatycznego wykrywania obszaru roboczego za pomocą devtools.json jest przeznaczony wyłącznie dla lokalnych środowisk programistycznych i działa tylko wtedy, gdy aplikacja jest obsługiwana z localhost. Narzędzia deweloperskie w Chrome wysyłają żądanie /.well-known/appspecific/com.chrome.devtools.json tylko w trybie programowania, gdy debugujesz projekt lokalny. Ta funkcja nie jest przeznaczona do środowisk produkcyjnych.

Udzielanie dostępu do plików lokalnych

Ze względów bezpieczeństwa Chrome wymaga wyraźnej zgody użytkownika, aby witryna mogła uzyskać dostęp do plików w sieci lokalnej lub na komputerze. Gdy Narzędzia deweloperskie spróbują połączyć się z lokalnym projektem za pomocą devtools.json, pojawi się prośba o przyznanie Chrome uprawnień dostępu do katalogu projektu. To żądanie uprawnień jest zgodne z zasadami dostępu do sieci lokalnej w Chrome, które ograniczają żądania z sieci publicznych do miejsc docelowych w sieci lokalnej, chyba że użytkownik przyzna uprawnienia. Możliwość żądania tego uprawnienia jest ograniczona do bezpiecznych kontekstów (HTTPS). W przypadku programowania lokalnego oznacza to zwykle, że localhost jest traktowany jako kontekst bezpieczny.

Tworzenie i wyświetlanie pliku `devtools.json`

W przypadku typowego projektu frontendu działającego na lokalnym serwerze deweloperskim musisz skonfigurować serwer tak, aby odpowiadał na żądanie /.well-known/appspecific/com.chrome.devtools.json z prawidłową treścią JSON.

Oto ogólne wskazówki:

Wygeneruj identyfikator UUID: potrzebny będzie identyfikator UUID w wersji 4. Możesz go wygenerować za pomocą narzędzi online lub skryptu.
Określ katalog główny projektu: uzyskaj ścieżkę bezwzględną do katalogu głównego projektu.
Utwórz punkt końcowy: skonfiguruj serwer deweloperski tak, aby obsługiwał żądania GET wysyłane do /.well-known/appspecific/com.chrome.devtools.json.
Udostępnij JSON: gdy ten punkt końcowy zostanie osiągnięty, udostępnij odpowiedź JSON z nagłówkiem Content-Type: application/json i zawartością devtools.json.

Ścieżka workspace.root określona w pliku devtools.json musi być ścieżką bezwzględną do katalogu głównego projektu w lokalnym systemie plików. Oznacza to, że ścieżka będzie się różnić w zależności od systemu operacyjnego (np. /Users/yourname/projects/my-app w systemie macOS lub Linux albo C:\Users\yourname\projects\my-app w systemie Windows) i konfiguracji projektu. Aby uniknąć sprawdzania tego pliku w środowisku produkcyjnym, rozważ dodanie go do listy ignorowanych plików (np. do listy .gitignore).

Ważne jest, aby serwer generował lub obsługiwał tę ścieżkę dynamicznie albo aby była ona prawidłowo skonfigurowana w środowisku programistycznym. Aby uniknąć sprawdzania tego pliku w środowisku produkcyjnym, rozważ dodanie go do listy ignorowanych plików (np. do listy .gitignore).

Przykłady

Plik devtools.json możesz udostępnić na wiele sposobów, w zależności od stosu technologicznego projektu.

Node.js i Express

Ten skrypt uruchamia minimalny serwer Express. Udostępnia plik JSON w lokalizacji /.well-known/appspecific/com.chrome.devtools.json, który zawiera ścieżkę do projectRoot.. Wskazuje folder, z którego jest uruchamiany serwer. Dostosuj zmienną projectRoot, aby prawidłowo wskazywała rzeczywisty katalog główny projektu, a niekoniecznie miejsce, w którym znajduje się skrypt serwera.

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

Użyj skryptu `devtools-json-generator`

Możesz użyć generate-devtools-json, aby wygenerować devtools.json.

Aby wygenerować plik devtools.json w bieżącym katalogu, uruchom to polecenie:

npx generate-devtools-json

Aby wygenerować plik w określonym katalogu, przekaż go jako argument:

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

Więcej informacji o devtools-json-generator znajdziesz na stronie głównej projektu.

Integracje

Niektóre platformy frontendowe i narzędzia do kompilacji oferują wtyczki lub konfiguracje, które upraszczają ten proces.

Vite

W przypadku projektów opartych na Vite (w tym SvelteKit) rozwiązaniem jest vite-plugin-devtools-json. Automatyzuje generowanie i wyświetlanie pliku devtools.json w czasie rzeczywistym.

Aby z niej korzystać, zainstaluj wtyczkę:

npm install -D vite-plugin-devtools-json

Następnie dodaj go do vite.config.js (lub 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',
    }),
  ],
});

Angular

Jeśli używasz polecenia ng serve do lokalnego uruchamiania projektu Angular (a wersja @angular/cli to co najmniej 19.0.0), interfejs wiersza poleceń Angular udostępnia oprogramowanie pośredniczące, które automatycznie obsługuje odpowiedni plik devtools.json.

Na przykład, aby utworzyć i uruchomić nową aplikację:

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

Gdy przejdziesz do https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json, zobaczysz wygenerowany plik JSON.

Rozwiązywanie problemów

Typowe problemy związane z automatycznym łączeniem obszaru roboczego możesz rozwiązać, korzystając ze wskazówek w tej sekcji.

Usuwanie folderu z obszarów roboczych

Jeśli folder projektu został już połączony automatycznie, możesz go ręcznie usunąć z ustawień obszaru roboczego Narzędzi deweloperskich:

Otwórz Narzędzia deweloperskie w Chrome.
Otwórz kartę Źródła.
W panelu po lewej stronie wybierz podkartę Obszary robocze.
Kliknij prawym przyciskiem myszy niechciany folder projektu i wybierz Usuń z obszaru roboczego.

Ignorowanie błędów 404 na serwerze

Jeśli nie chcesz używać tej funkcji w przypadku konkretnego projektu i w logach serwera widzisz błędy 404 dotyczące żądania /.well-known/appspecific/com.chrome.devtools.json, możesz je zignorować. Jeśli plik nie zostanie wyświetlony, żądanie nie będzie szkodliwe. Możesz też skonfigurować serwer tak, aby zwracał stan 404 w przypadku tej konkretnej ścieżki bez rejestrowania błędu.

Jak wyłączyć tę funkcję w Narzędziach deweloperskich w Chrome

Jeśli chcesz wyłączyć funkcję automatycznego wykrywania obszaru roboczego w Narzędziach deweloperskich w Chrome, musisz ustawić odpowiednią flagę Chrome:

Otwórz Chrome i przejdź do chrome://flags.
Wyszukaj „Ustawienia projektu Narzędzi deweloperskich” i ustaw opcję Wyłączone.
Możesz też znaleźć powiązany flag „DevTools Automatic Workspace Folders” i go wyłączyć.
Aby zastosować zmiany, uruchom ponownie Chrome.

Podsumowanie

Dzięki zrozumieniu i wykorzystaniu mechanizmu devtools.json możesz znacznie usprawnić lokalny proces tworzenia stron za pomocą Narzędzi deweloperskich w Chrome.