Zarządza Pan/Pani CSS na produkcyjnej witrynie, przełącza się na inną stronę i wszystkie zmiany znikają. Irytujące? Jeszcze jak. Panel Elements w Chrome DevTools świetnie nadaje się do szybkiego edytowania stylów i znaczników, ale do niedawna wszelkie eksperymenty trwały dokładnie do pierwszego F5. A powrót do edytora kodu, przebudowywanie buildu i ponowne wdrażanie tylko po to, by zweryfikować hipotezę, to strata czasu, której nikt nie lubi.

Na szczęście Chrome ma wbudowany mechanizm, który rozwiązuje ten problem. Nazywa się Local Overrides i pozwala zapisywać zmiany lokalnie w taki sposób, że przeglądarka stosuje je nawet po odświeżeniu strony. Funkcja pojawiła się już w Chrome 65, ale przez ostatnie lata zyskała nowe możliwości: teraz można podmieniać nie tylko pliki, ale i nagłówki HTTP odpowiedzi, a także mockować zapytania API bezpośrednio z przeglądarki.

W tym poradniku, od włączenia po śledzenie poprawek: wszystko, czego potrzebuje programista do produktywnej pracy z lokalnymi nadpisaniami.

💡 Szybki przegląd:

• Włącza Pan/Pani Local Overrides na karcie Sources i wybiera folder do przechowywania nadpisanych plików.
• Edytuje Pan/Pani CSS, JS lub HTML na karcie Sources, zmiany są automatycznie zapisywane lokalnie.
• Odświeża Pan/Pani stronę lub przechodzi na inną, Chrome nadal stosuje Pana/Pani poprawki.
• Śledzi Pan/Pani diff zmian na karcie Changes i zarządza plikami przez Overrides.

Jak włączyć lokalne nadpisania

Proszę otworzyć DevTools (F12 lub Ctrl+Shift+I) i przejść na kartę Sources (Źródła). W lewej części panelu proszę znaleźć kartę Overrides (Nadpisania). Jeśli nie jest widoczna, proszę kliknąć ikonę >>, aby wyświetlić ukryte karty.

Proszę kliknąć przycisk Select folder for overrides (Wybierz folder dla nadpisań). Chrome poprosi o pozwolenie na dostęp do systemu plików, proszę wybrać istniejący folder lub utworzyć nowy. To w nim będą przechowywane wszystkie nadpisane pliki.

Po wybraniu folderu pole wyboru Enable Local Overrides włączy się automatycznie. Proszę zwrócić uwagę: na karcie Network (Sieć) pojawi się ikona ostrzeżenia, która sygnalizuje, że część żądań sieciowych może być przechwytywana i zastępowana lokalnymi wersjami plików. To normalne i oznacza, że nadpisania są aktywne.

Jak wprowadzać i zapisywać zmiany

A teraz najciekawsze, czyli edycja. Proszę otworzyć dowolny plik przez kartę Sources: znaleźć potrzebny CSS lub JavaScript w drzewie plików po lewej stronie i kliknąć dwukrotnie. Proszę wprowadzić poprawki i nacisnąć Ctrl+S, plik zostanie zapisany w Pana/Pani lokalnym folderze, a Chrome zacznie używać wersji lokalnej zamiast serwerowej.

Ważny niuans: proszę edytować znaczniki właśnie na karcie Sources, a nie Elements. Panel Elements jest wygodny do wizualnej pracy z DOM, ale zmiany HTML dokonane w nim nie są zapisywane jako lokalne nadpisania. Proszę przełączyć się na Sources, znaleźć odpowiedni plik HTML i tam edytować, fioletowa kropka obok nazwy pliku potwierdzi, że plik został nadpisany.

Proszę odświeżyć stronę lub przejść na inną, Chrome nadal będzie stosować Pana/Pani poprawki. Chce Pan/Pani przywrócić oryginał? Proszę usunąć plik z folderu nadpisań lub odznaczyć pole Enable Local Overrides.

Osobno warto wspomnieć o nadpisywaniu nagłówków HTTP, czyli możliwości dodanej w późniejszych wersjach Chrome. Proszę wejść na kartę Network, kliknąć prawym przyciskiem myszy na żądanie i wybrać Override headers. Chrome utworzy plik .headers w Pana/Pani lokalnym folderze, gdzie można zdefiniować niestandardowe nagłówki odpowiedzi. Jest to niezastąpione przy testowaniu polityk CORS, Content-Security-Policy i cache'owania bez zmian na serwerze.

Jak śledzić wprowadzone poprawki

Kiedy aktywnie nadpisuje Pan/Pani dziesiątki plików, łatwo zapomnieć, co dokładnie i gdzie było zmieniane. Do tego służą w DevTools dwa przydatne narzędzia.

Karta Overrides (w panelu Sources) pokazuje pełną listę nadpisanych plików, pogrupowanych według domen. Stąd można otworzyć dowolny plik do dalszej edycji lub usunąć niepotrzebne nadpisanie, prawy przycisk myszy → Delete.

Karta Changes (Zmiany) znajduje się w dolnej części DevTools, obok karty Console. Pokazuje diff między oryginalnym plikiem a Pana/Pani lokalną wersją, linijka po linijce, jak w Git. Wygodne do szybkiego audytu: co dokładnie zmienił Pan/Pani w każdym pliku i jak bardzo zmiany różnią się od wyjściowego kodu.

Szybka porada: przed refaktoryzacją lub eksperymentem na produkcyjnej witrynie proszę zrobić snapshot zmian przez Changes, to Pana/Pani lokalny „commit", do którego zawsze można wrócić.

Nadpisania jako narzędzie do testowania wydajności

Oprócz wygodnego prototypowania, Local Overrides otwierają ciekawy scenariusz do analizy wydajności. Ma Pan/Pani możliwość zmieniać kod na nie-lokalnej stronie i od razu mierzyć wpływ tych poprawek na szybkość ładowania i renderowania.

Na przykład podejrzewa Pan/Pani, że zewnętrzny skrypt analityczny spowalnia renderowanie pierwszego ekranu. Proszę nadpisać żądanie, zastąpić oryginalny skrypt pustym plikiem lub wersją odroczoną i uruchomić Lighthouse. Różnica w metrykach wyraźnie pokaże, czy optymalizacja jest uzasadniona.

Inny scenariusz: czcionki. Proszę podmienić plik CSS, usuwając @font-face dla niestandardowej czcionki, i sprawdzić, jak zmieni się LCP (Largest Contentful Paint). Albo proszę poeksperymentować z kolejnością ładowania skryptów, przenieść krytyczny JS z <head> na koniec <body> i porównać wskaźniki.

Harry Roberts i Umar Hansa, znani eksperci od wydajności webowej, opublikowali screencasty z obrazowymi przykładami takiego podejścia. Ich demonstracje pokazują: Local Overrides zamieniają przeglądarkę w piaskownicę dla hipotez wydajnościowych, gdzie każda iteracja zajmuje sekundy, a nie minuty.

Jeśli pracuje Pan/Pani z lokalnym serwerem deweloperskim, wartość nadpisań jest mniejsza, bo i tak kontroluje Pan/Pani kod źródłowy. Ale kiedy trzeba szybko przetestować pomysł na produkcji lub na cudzej stronie bez dostępu do bazy kodu, to narzędzie jest niezastąpione.

⁉️🤔 Często zadawane pytania

Czy lokalne nadpisania są zachowywane po zamknięciu przeglądarki?

Tak, wszystkie pliki są przechowywane w wybranym przez Pana/Panią folderze na dysku. Po ponownym uruchomieniu Chrome nadpisania są automatycznie wznawiane, pod warunkiem, że pole wyboru Enable Local Overrides pozostało włączone. Same pliki nigdzie nie znikają, ponieważ są to zwykłe pliki w Pana/Pani systemie plików.

Czy można nadpisać odpowiedź API (JSON), a nie tylko pliki statyczne?

Tak, począwszy od Chrome 117 to działa. Na karcie Network proszę kliknąć prawym przyciskiem myszy na żądanie i wybrać Override content, Chrome utworzy lokalny plik z treścią odpowiedzi, który można edytować. Przy następnym żądaniu przeglądarka zwróci Pana/Pani lokalną wersję zamiast odpowiedzi serwera.

Dlaczego moje zmiany dokonane w panelu Elements są resetowane po odświeżeniu?

Panel Elements edytuje DOM w pamięci, a nie pliki źródłowe. Aby zmiany przetrwały F5, proszę przełączyć się na kartę Sources, znaleźć odpowiedni plik i tam go edytować. Proszę zapisać przez Ctrl+S, a Chrome utworzy lokalne nadpisanie.

Jak udostępnić lokalne nadpisania koledze z zespołu?

Wystarczy przesłać zawartość folderu z nadpisaniami. Kolega umieszcza pliki w swoim folderze, wskazuje go w DevTools przez Select folder for overrides i wszystkie poprawki są stosowane na jego maszynie. Do pracy zespołowej wygodnie jest trzymać folder nadpisań w repozytorium Git projektu.

Czy można używać Local Overrides w Firefox lub innych przeglądarkach?

W Firefox nie ma odpowiednika Local Overrides, zapisywanie zmian między przeładowaniami nie jest obsługiwane. Edge, oparty na Chromium, ma tę samą funkcjonalność co Chrome, ponieważ korzysta ze wspólnej bazy kodu DevTools. Brave i Opera również obsługują nadpisania jako przeglądarki Chromium.

Do czego naprawdę służą Panu/Pani lokalne nadpisania

Local Overrides w Chrome DevTools to nie tylko „wygodna funkcja". To sposób na przekształcenie przeglądarki w pełnoprawne środowisko do szybkiego prototypowania i testowania hipotez bez dotykania kodu produkcyjnego. Oszczędza Pan/Pani cykle „poprawka → build → wdrożenie → weryfikacja" i otrzymuje wynik natychmiast.

Proszę spróbować teraz: otworzyć dowolną stronę, włączyć nadpisania i zmienić kolor nagłówka. Odświeżyć stronę. Zobaczył Pan/Pani, że kolor pozostał? Właśnie po to to wszystko.