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

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, firmy zewnętrzne lub interfejsy API.

Używaj zastąpień lokalnych, aby imitować zasoby zdalne, nawet jeśli nie masz do nich dostępu. Możesz imitować odpowiedzi na żądania i różne pliki, na przykład 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, twórz prototypy nowego interfejsu.
• Przetestuj poprawki wydajności, np. wyeliminuj CLS, aby z wyprzedzeniem upewnić się, że są istotne.

.

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 przez Ciebie folderze.
• Po ponownym załadowaniu strony Narzędzia deweloperskie udostępniają lokalny, zmodyfikowany plik, a nie zasób sieciowy.

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.
• Narzędzia deweloperskie nie zapisują zmian wprowadzonych w drzewie DOM w panelu Elementy.
• Jeśli edytujesz kod CSS w panelu Style, a źródłem kodu CSS jest plik HTML, Narzędzia deweloperskie nie zapiszą tej zmiany.

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

Konfigurowanie lokalnych zastąpień

Możesz od razu zastąpić treści internetowe lub nagłówki odpowiedzi 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 mają być przechowywane pliki zastępowania.
   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 zobaczysz:

   • Panel Źródła umożliwiający wprowadzanie zmian w treściach internetowych.
   • W edytorze w sekcji Sieć > Nagłówki > nagłówki odpowiedzi, które umożliwiają wprowadzanie zmian w nagłówkach odpowiedzi;

Aby tymczasowo wyłączyć lokalne zastąpienia lub usunąć wszystkie pliki zastępcze, otwórz kolejno Źródła > Zastąpienia i odznacz pole wyboru check_box_outline_blank Włącz lokalne zastąpienia lub kliknij block 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ąć i trzeba będzie ręcznie utworzyć usunięte zastąpienia.

Aby szybko wyświetlić wszystkie zastąpienia, w panelu Sieć kliknij prośbę prawym przyciskiem myszy i wybierz Pokaż wszystkie zastąpienia. W Narzędziach deweloperskich przejdziesz do sekcji Źródła > Zastąpienia.

Zastąp treści z internetu

Aby zastąpić treści z internetu:

1. Skonfiguruj lokalne zastąpienia.
2. Możesz wprowadzać zmiany w plikach i zapisywać je w Narzędziach deweloperskich.

Możesz na przykład edytować pliki w sekcji Źródła lub CSS w sekcji Elementy > Style, chyba że kod 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ć wyświetlana jest ikona fioletowej kropki z etykietką obok karty Odpowiedź żądania z zastąpioną treścią internetową.

Zastępowanie żądań XHR lub żądań 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 pobranych danych i zapisz plik.
4. refresh Odśwież stronę i zobacz, jakie zmiany zostały zastosowane.

Aby zapoznać się z tym procesem, 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ąć zapisany plik prawym przyciskiem myszy i z menu kontekstowego wybrać Otwórz w folderze zawierającym. Spowoduje to otwarcie folderu wybranego podczas zastępowania konfiguracji. Możesz w nim modyfikować pliki za pomocą swojego ulubionego edytora kodu.

Zastąp nagłówki odpowiedzi HTTP

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

Dzięki zastąpieniu nagłówka odpowiedzi możesz lokalnie prototypować poprawki różnych nagłówków, w tym:

• Nagłówki CORS
• Uprawnienia – nagłówki zasad
• Nagłówki izolacji z różnych domen

Aby zastąpić nagłówek odpowiedzi:

1. Skonfiguruj lokalne zastąpienia i sprawdź np. tę stronę demonstracyjną.
2. Otwórz Sieć, znajdź żądanie, kliknij je prawym przyciskiem myszy i wybierz Zastąp nagłówki. W DevTools 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łówki odpowiedzi, najedź kursorem na wartość nagłówka odpowiedzi i kliknij edytuj Edytuj.

4. Zmień nagłówek lub dodaj nowy.

   

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

   Panel Sieć wyróżnia zmodyfikowane nagłówki na zielono, a usunięte zastąpienia na czerwono i przekreślone. Dodatkowo na karcie Nagłówki wyświetla się fioletowa kropka z etykietką informującą o zastąpieniu nagłówków.

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

Edytuj wszystkie zastąpienia nagłówka odpowiedzi

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

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

   

   Aby przejść do odpowiedniego pliku .headers w Narzędziach deweloperskich, kliknij Ź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 więcej żądań, do których mają one zostać zastosowane.

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

   • Aby cofnąć wartość nagłówka, usuń dodany nagłówek lub regułę, najedź na nią kursorem i kliknij delete.

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

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