Zastąp treści internetowe i nagłówki odpowiedzi HTTP lokalnie

Sofia Emelianova

Dzięki lokalnym zastąpieniom możesz odblokować przepływ pracy, tworząc prototypy i testując zmiany oraz poprawki bez czekania na obsługę ze strony backendu, podmiotów zewnętrznych lub interfejsów API.

Używaj lokalnych zastąpień, aby imitować zasoby zdalne, nawet jeśli nie masz do nich dostępu. Możesz symulować odpowiedzi na żądania i różne pliki, np. nagłówki odpowiedzi HTTP i treści internetowe, w tym żądania XHR i żądania pobierania.

Przykładowe przypadki użycia zastąpień lokalnych:

• Symuluj interfejs API i testuj poprawki interfejsu API, zanim zostaną one wdrożone w wersji produkcyjnej.
• Twórz prototypy nowych projektów interfejsu, jeśli znasz już struktury danych, których będzie używać backend.
• Testuj poprawki wydajności, np. eliminuj CLS, aby z wyprzedzeniem sprawdzić, czy są one znaczące.

Uwaga: aby dowiedzieć się więcej o przypadkach użycia, obejrzyj film powyżej.

Zastępowanie lokalne umożliwia też zachowanie zmian wprowadzonych w Narzędziach deweloperskich po ponownym wczytaniu strony.

Jak to działa

• Gdy wprowadzisz zmiany w Narzędziach deweloperskich, zapiszą one kopię zmodyfikowanego pliku w określonym przez Ciebie folderze.
• Gdy ponownie załadujesz stronę, Narzędzia deweloperskie będą używać lokalnego, zmodyfikowanego pliku zamiast zasobu sieciowego.

Uwaga: lokalne zastąpienia automatycznie wyłączają pamięć podręczną.

Możesz też zapisywać zmiany bezpośrednio w plikach źródłowych. Zobacz Edytowanie i zapisywanie plików w przestrzeniach.

Ograniczenia

Lokalne zastąpienia działają w przypadku nagłówków odpowiedzi sieciowych i większości typów plików, w tym żądań XHR i fetch, z kilkoma wyjątkami:

• Pamięć podręczna jest wyłączona, gdy włączone są lokalne zastąpienia.
• Narzędzia deweloperskie nie zapisują zmian wprowadzonych w drzewie DOM w panelu Elementy.
• Jeśli edytujesz CSS w panelu Style, a źródłem tego CSS jest plik HTML, Narzędzia deweloperskie nie zapiszą zmiany.

Zamiast tego możesz edytować pliki HTML w panelu Źródła.

Konfigurowanie zastąpień lokalnych

Możesz od razu zastąpić treść internetową lub nagłówki odpowiedzi w panelu Sieć:

1. Otwórz Narzędzia deweloperskie, przejdź do panelu Sieć, kliknij prawym przyciskiem myszy żądanie, które chcesz zastąpić, i z menu wybierz Zastąp nagłówki lub Zastąp treść.
2. Jeśli nie masz jeszcze skonfigurowanych lokalnych zastąpień, w pasku działań u góry Narzędzia deweloperskie wyświetlą prośbę o wykonanie tych czynności:
   1. Wybierz folder, w którym mają być przechowywane pliki zastępowania.
   2. Kliknij Zezwól, aby przyznać Narzędziom deweloperskim prawa dostępu do tego pliku.
3. Jeśli masz skonfigurowane lokalne zastąpienia, ale są one wyłączone, Narzędzia deweloperskie automatycznie je włączą.

4. Gdy lokalne zastąpienia zostaną skonfigurowane i włączone, w zależności od tego, co chcesz zastąpić, Narzędzia deweloperskie przekierują Cię do:

   • Panel Źródła, który umożliwia wprowadzanie zmian w treściach internetowych.
   • Edytor w sekcji Sieć > Nagłówki > Nagłówki odpowiedzi, który umożliwia wprowadzanie zmian w nagłówkach odpowiedzi.

Aby tymczasowo wyłączyć lokalne zastąpienia lub usunąć wszystkie pliki zastąpień, otwórz Źródła > Zastąpienia i odznacz pole wyboru  Włącz lokalne zastąpienia lub kliknij  Wyczyść.

Aby usunąć pojedynczy plik zastępujący lub wszystkie pliki zastępujące w folderze, kliknij prawym przyciskiem myszy plik lub folder w sekcji Źródła > Zastąpienia, wybierz Usuń, a potem w oknie kliknij OK. Tej czynności nie można cofnąć i musisz ręcznie odtworzyć usunięte zastąpienia.

Aby szybko wyświetlić wszystkie zastąpienia, w panelu Sieć kliknij prawym przyciskiem myszy żądanie i wybierz Pokaż wszystkie zastąpienia. Narzędzia deweloperskie otworzą kartę Źródła > Zastąpienia.

Zastępowanie treści internetowych

Aby zastąpić treść internetową:

1. Konfigurowanie lokalnych zastąpień
2. Wprowadź zmiany w plikach i zapisz je w Narzędziach deweloperskich.

Uwaga: nie możesz zastąpić plików zmapowanych na źródło. Jeśli w panelu Sieć klikniesz prawym przyciskiem myszy żądanie i wybierzesz Zastąp zawartość, Narzędzia deweloperskie wyświetlą okno, które przeniesie Cię do oryginalnych plików źródłowych.

Możesz na przykład edytować pliki w Źródłach lub kod CSS w Elementach > Style, chyba że kod CSS znajduje się w plikach HTML.

Narzędzia deweloperskie zapisują zmodyfikowane pliki, wyświetlają je w sekcji Źródła > Zastąpienia i pokazują ikonę  obok zastąpionych plików w odpowiednich panelach i okienkach: Elementy > Style, Sieć oraz Źródła > Zastąpienia.

Dodatkowo w panelu Sieć obok karty Odpowiedź żądania z zastąpioną treścią internetową wyświetla się fioletowa kropka z etykietką.

Zastępowanie żądań XHR lub pobierania w celu imitowania zasobów zdalnych

W przypadku lokalnych zastąpień nie musisz mieć dostępu do backendu ani czekać, aż będzie obsługiwał Twoje zmiany. Symulowanie i eksperymentowanie w trakcie pracy:

1. Konfigurowanie lokalnych zastąpień
2. W sekcji Sieć odfiltruj żądania XHR/fetch, znajdź potrzebne żądanie, kliknij je prawym przyciskiem myszy i wybierz Zastąp treść.
3. Wprowadź zmiany w pobranych danych i zapisz plik.
4. Odśwież stronę i sprawdź, czy zmiany zostały zastosowane.

Aby poznać ten przepływ pracy, obejrzyj ten film:

Śledzenie zmian lokalnych

Wszystkie zmiany wprowadzone w treściach internetowych możesz śledzić w jednym miejscu – na karcie Zmiany.

Dodatkowo w sekcji Źródła > Zastąpienia możesz kliknąć prawym przyciskiem myszy zapisany plik i w menu kontekstowym wybrać Otwórz w folderze. Otworzy się folder wybrany podczas konfigurowania zastąpień. Możesz tam modyfikować pliki w ulubionym edytorze kodu.

Zastępowanie nagłówków odpowiedzi HTTP

Na panelu Sieć możesz zastąpić nagłówki odpowiedzi HTTP bez dostępu do serwera internetowego.

Dzięki zastępowaniu nagłówków odpowiedzi możesz lokalnie testować poprawki różnych nagłówków, w tym:

• Nagłówki CORS
• Nagłówki Permissions-Policy
• Nagłówki izolacji między domenami

Aby zastąpić nagłówek odpowiedzi:

1. Skonfiguruj zastąpienia lokalne i otwórz stronę, którą chcesz zdebugować.
2. Otwórz Sieć, znajdź żądanie, kliknij je prawym przyciskiem myszy i wybierz Zastąp nagłówki. Narzędzia deweloperskie otworzą edytor Nagłówki > Nagłówki odpowiedzi.

3. Najedź kursorem na wartość nagłówka odpowiedzi i umieść go w tym miejscu.

   

   Aby włączyć edytor nagłówków odpowiedzi, najedź kursorem na wartość nagłówka odpowiedzi i kliknij edytuj Edytuj.

4. Zmodyfikuj lub dodaj nowy nagłówek.

   Uwaga: w tym przykładzie dodano nagłówek Access-Control-Allow-Origin: *, aby pozbyć się błędu CORS.

   

   • Aby edytować wartość nagłówka, kliknij ją.
   • Aby dodać nowy nagłówek, kliknij  Dodaj nagłówek.
   • Aby usunąć zastąpienie nagłówka, kliknij obok niego . Spowoduje to usunięcie dodanych nagłówków lub przywrócenie zmodyfikowanych wartości do pierwotnych wartości.

   W panelu Sieć zmodyfikowane nagłówki są zaznaczone na zielono, a usunięte zastąpienia – na czerwono i przekreślone. Dodatkowo na karcie Nagłówki wyświetla się fioletowa kropka z etykietką, która informuje, że nagłówki zostały zastąpione.

5.  Odśwież stronę, aby zastosować zmiany.

Edytowanie wszystkich zastąpień nagłówków odpowiedzi

Aby edytować wszystkie zastąpienia nagłówków w jednym miejscu:

1. Obok sekcji Nagłówki odpowiedzi kliknij .headers.

   

   Narzędzia deweloperskie przeniosą Cię do odpowiedniego pliku .headers w sekcji Źródła > Zastąpienia.

2. Edytuj plik .headers:

   

   • Aby dodać nową regułę zastępowania, kliknij Dodaj regułę zastępowania. Reguła to zestaw nagłówków i wartości oraz jedno lub wiele żądań, do których mają być stosowane.

     Uwaga: możesz używać symboli wieloznacznych, aby określić wiele żądań jednocześnie. Wiele znaków oznacz symbolem *, a jeden znak symbolem ?.

   • Aby dodać do reguły parę nagłówek–wartość, najedź kursorem na inną parę i kliknij .

   • Aby przywrócić wartość nagłówka, usuń dodany nagłówek lub regułę. W tym celu najedź na niego kursorem i kliknij .

3. Zapisz plik .headers, naciskając Command / Control + S.

4.  Odśwież stronę, aby zastosować zmiany.