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

Sofia Emelianova

Dzięki zastąpieniom lokalnym możesz odblokować przepływ pracy, tworząc prototypy i testując zmiany oraz poprawki bez oczekiwania na obsługę przez backend, usługi zewnętrzne lub interfejsy 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.

Zastąpienia lokalne mogą być przydatne np. w takich przypadkach:

• testować poprawki interfejsu API przed ich wdrożeniem w wersji produkcyjnej.
• Jeśli znasz już struktury danych, których będzie używać backend, utwórz prototyp nowych projektów interfejsu.
• Przetestuj poprawki dotyczące wydajności, np. usuń CLS, aby upewnić się z wyprzedzeniem, że są one znaczące.

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

Zastąpienia lokalne umożliwiają też zachowanie zmian wprowadzonych w Narzędziach deweloperskich podczas wczytywania strony.

Jak to działa

• Gdy wprowadzisz zmiany w Narzędziach deweloperskich, narzędzia te zapiszą kopię zmodyfikowanego pliku w określonym folderze.
• Gdy ponownie załadujesz stronę, Narzędzia deweloperskie zwracają zmodyfikowany lokalnie plik, a nie zasób sieciowy.

Uwaga: zastąpienia lokalne 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 Workspaces.

Ograniczenia

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

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

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

Konfigurowanie zastąpień lokalnych

Treści internetowe lub nagłówki odpowiedzi możesz zastąpić od razu w panelu Sieć:

1. Otwórz Narzędzia deweloperskie, przejdź do panelu Sieć, kliknij żądanie, które chcesz zastąpić, prawym przyciskiem myszy, a potem w menu kliknij Zastąp nagłówki lub Zastąp zawartość.
2. Jeśli nie masz jeszcze skonfigurowanych zastąpień lokalnych, na pasku działań u góry DevTools pojawi się komunikat z prośbą o wykonanie tych czynności:
   1. Wybierz folder, w którym będą zapisywane pliki zastąpienia.
   2. Kliknij Zezwól, aby przyznać DevTools uprawnienia dostępu.
3. Jeśli masz skonfigurowane lokalne zastąpienia, ale są one wyłączone, Narzędzia deweloperskie automatycznie je włączają.

4. Gdy lokalne zastąpienia zostaną skonfigurowane i włączone, w Narzędziach deweloperskich pojawi się okno:

   • Panel Źródła umożliwiający 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ć zastąpienia lokalne lub usunąć wszystkie pliki zastąpień, otwórz Źródła > Zastąpienia i odznacz pole wyboru Włącz zastąpienia lokalne lub kliknij Wyczyść.

Aby usunąć pojedynczy plik zastąpienia lub wszystkie pliki zastąpienia w folderze, kliknij plik lub folder prawym przyciskiem myszy w sekcji Źródła > Zastąpienia, wybierz Usuń, a następnie kliknij OK w oknie dialogowym. Tej czynności nie można cofnąć. Usunięte zastąpienia trzeba będzie utworzyć ponownie ręcznie.

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

Zastępowanie treści internetowych

Aby zastąpić zawartość internetową:

1. Skonfiguruj lokalne zastąpienia.
2. Wprowadzać zmiany w plikach i je zapisywać w Narzędziach deweloperskich.

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

Możesz np. edytować pliki w sekcji Źródła lub CSS w sekcji Elementy > Style, chyba że CSS znajduje się w plikach HTML.

DevTools zapisuje zmodyfikowane pliki, wyświetla je w sekcji Źródła > Zastąpienia oraz pokazuje ikonę  obok zastąpionych plików w odpowiednich panelach: Elementy > Style, Sieć i Źródła > Zastąpienia.

Dodatkowo w panelu Sieć obok karty Odpowiedź żądania z zastąpioną zawartością internetową wyświetla się ikona fioletowej kropki z opisem.

Zastąp żądania XHR lub żądania pobierania w celu imitowania zasobów zdalnych

Dzięki zastąpieniom lokalnym nie musisz mieć dostępu do backendu ani czekać, aż backend zaakceptuje zmiany. tworzyć symulacje i eksperymentować na bieżąco:

1. Skonfiguruj lokalne zastąpienia.
2. W sekcji Sieć odfiltruj żądania XHR/fetch, znajdź żądanie, które potrzebujesz, kliknij je prawym przyciskiem myszy i wybierz Zastąp zawartość.
3. Wprowadź zmiany w pobrane dane i zapisz plik.
4. Odśwież stronę i obserwuj zastosowane zmiany.

Aby dowiedzieć się więcej o tym procesie, 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 zawierającym. Otworzy się folder wybrany podczas konfigurowania zastąpień. Możesz tam modyfikować pliki za pomocą ulubionego edytora kodu.

Zastępowanie nagłówków odpowiedzi HTTP

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

Za pomocą zastąpień nagłówków odpowiedzi możesz lokalnie testować poprawki różnych nagłówków, m.in.:

• Nagłówki mechanizmu współdzielenia zasobów między domenami (CORS)
• Nagłówki Permissions-Policy
• Nagłówki izolacji z różnych domen

Aby zastąpić nagłówek odpowiedzi:

1. Skonfiguruj lokalne zastąpienia i sprawdź na przykład tę stronę demonstracyjną.
2. Otwórz Sieć, znajdź żądanie, kliknij je prawym przyciskiem myszy i wybierz Zastąp nagłówki. W Narzędziach deweloperskich otworzy się edytor Nagłówki > Nagłówki odpowiedzi.

3. Najedź kursorem na wartość nagłówka odpowiedzi i umieść tam kursor.

   

   Aby włączyć edytor nagłówków odpowiedzi, możesz też najechać kursorem na wartość nagłówka odpowiedzi i kliknąć edytuj Edytuj.

4. Zmień 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 pierwotnych wartości.

   W panelu Sieć zmodyfikowane nagłówki są wyróżnione na zielono, a usunięte zastąpione nagłówki – na czerwono i pominięte. Dodatkowo na karcie Nagłówki wyświetla się fioletowa kropka z etykietką informującą o zastąpieniu nagłówków.

5. Aby zastosować zmiany, odśwież stronę.

Edytowanie wszystkich zastąpień nagłówka odpowiedzi

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

1. Kliknij .headers obok sekcji Nagłówki odpowiedzi.

   

   Narzędzia programistyczne przekierowują 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 składa się z zestawu nagłówków i wartości oraz jednego lub wielu żądań, które mają zostać zastosowane.

     Uwaga: możesz używać symboli wieloznacznych, aby określić wiele żądań naraz. Wyznacz kilka znaków, używając *, a drugiego – za pomocą ?.

   • 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łę, najedź na niego kursorem i kliknij .

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

4. Aby zastosować zmiany, odśwież stronę.