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

Lokalne zastąpienia pozwalają odblokować przepływ pracy, prototypując oraz testując zmiany i poprawki bez oczekiwania na ich obsługę przez backend, inne firmy czy interfejsy API.

Używaj zastąpień lokalnych, 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 oraz treści internetowe, w tym żądania XHR i pobierania.

Lokalne zastąpienia mogą być przydatne w tych przypadkach:

• Pozorowanie interfejsu API i testowanie jego poprawek przed wdrożeniem wersji produkcyjnej.
• Prototypuj nowe projekty interfejsu, jeśli znasz struktury danych, których będzie używać backend.
• Wypróbuj poprawki wydajności, na przykład usuń CLS, aby z wyprzedzeniem upewnić się, że są istotne.

Lokalne zastąpienia pozwalają też na zachowanie zmian wprowadzonych w Narzędziach deweloperskich po wczytaniu stron.

Jak to działa

• Gdy wprowadzisz zmiany w Narzędziach deweloperskich, te narzędzia 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 obszarach roboczych.

Ograniczenia

Lokalne zastąpienia działają w przypadku nagłówków odpowiedzi sieciowych i większości typów plików, w tym 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 zmodyfikujesz kod CSS w panelu Style, a źródłem tego arkusza CSS będzie plik HTML, Narzędzia deweloperskie nie zapiszą zmiany.

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

Skonfiguruj zastąpienia lokalne

Nagłówki odpowiedzi lub treści z internetu możesz od razu zastąpić w panelu Sieć:

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

4. Po skonfigurowaniu i włączeniu zastąpień lokalnych, w zależności od tego, co chcesz zastąpić, w Narzędziach deweloperskich pojawi się opcja:

   • panel Źródła umożliwiający wprowadzanie zmian w treści internetowej,
   • Edytor w sekcji Sieć > Nagłówki > Nagłówki odpowiedzi umożliwia wprowadzanie zmian w nagłówkach odpowiedzi.

Aby tymczasowo wyłączyć lokalne zastąpienia lub usunąć wszystkie pliki zastępowania, przejdź do sekcji Źródła > Zastąpienia i odznacz pole wyboru check_box_outline_blank Włącz lokalne zastąpienia lub kliknij odpowiednio block Wyczyść.

Aby usunąć pojedynczy plik zastąpienia lub wszystkie zastąpienia w folderze, kliknij prawym przyciskiem 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 trzeba będzie ręcznie odtworzyć usunięte zastąpienia.

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

Zastąp treści internetowe

Aby zastąpić treści internetowe:

1. Skonfiguruj zastąpienia lokalne.
2. Wprowadzanie zmian w plikach i zapisywanie ich w Narzędziach deweloperskich.

Możesz np. edytować pliki w sekcji Źródła lub CSS w sekcji Elementy > 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 wyświetlają ikonę obok zastąpionych plików w odpowiednich panelach i panelach: Elementy > Style, Sieć oraz Źródła > Zastąpienia.

Dodatkowo w panelu Sieć wyświetlana jest ikona z fioletową kropką i etykietką obok karty Odpowiedź żądania z zastąpioną treścią internetową.

Zastąp żądania XHR lub pobierz żądania, aby imitować zasoby zdalne

Dzięki zastąpieniom lokalnym nie musisz mieć dostępu do backendu ani czekać na obsługę zmian. Imitacje i eksperymenty na bieżąco:

1. Skonfiguruj zastąpienia lokalne.
2. W sekcji Sieć przefiltruj według żądań 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. refresh Odśwież stronę i zobacz, jakie zmiany zostały zastosowane.

Aby o nich dowiedzieć się więcej, obejrzyj ten film:

Śledzenie zmian lokalnych

Wszystkie zmiany wprowadzane 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 wybrać z menu kontekstowego Otwórz w folderze zawierającym. Spowoduje to otwarcie folderu wybranego podczas overrides setup. Możesz tam modyfikować pliki za pomocą 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.

Za pomocą zastąpień nagłówków odpowiedzi możesz tworzyć lokalnie prototypy poprawek różnych nagłówków, w tym między innymi:

• Nagłówki CORS
• Nagłówki Permissions-Policy
• Nagłówki izolacji z innych źródeł

Aby zastąpić nagłówek odpowiedzi:

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

3. Najedź kursorem na wartość nagłówka odpowiedzi i umieść w niej 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.

   

   • Aby edytować wartość nagłówka, kliknij ją.
   • Aby dodać nowy nagłówek, kliknij add Dodaj nagłówek.
   • Aby usunąć zastąpienie nagłówka, kliknij obok niego delete. 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ą wyświetlane na zielono, a zastąpienia na czerwono są przekreślone. Dodatkowo na karcie Nagłówki wyświetla się fioletowa kropka z etykietką informującą, że nagłówki zostały zastąpione.

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

Edytuj wszystkie zastąpienia nagłówków odpowiedzi

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

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

   

   W Narzędziach deweloperskich znajdziesz odpowiedni plik .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 zbiór nagłówków i wartości oraz jedno lub wiele żądań, do których należy je zastosować.

   • 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.