Narzędzia deweloperskie Chrome: Nadpisywanie oraz Przestrzeń robocza - Wszechstronny przewodnik

W tej instrukcji dowiesz się, jak używać narzędzi developerskich Chrome do dostosowywania stylów i skryptów bez konieczności dokonywania zmian w kodzie źródłowym. Pokazane zostanie, jak za pomocą Overrides i Workspace w Chrome przeprowadzać rozległe testy i dostosowania na stronie internetowej bez konieczności dotykania oryginalnego pliku serwera.

Najważniejsze wnioski

• Przy użyciu Overrides możesz nadpisywać pliki lokalnie w celu przeprowadzania testów i dostosowań.
• Workspace pozwala na połączenie lokalnego folderu deweloperskiego z narzędziami developerskimi Chrome, umożliwiając bezpośrednie dokonywanie zmian.
• Obie te funkcje są niezwykle przydatne do debugowania problemów w środowisku produkcyjnym bez wpływania na oryginalny kod serwera.

Krok po kroku

Aby efektywnie korzystać z narzędzi developerskich Chrome, postępuj zgodnie z tymi krokami:

1. Używanie Overrides

Najpierw chcemy skorzystać z funkcji Overrides w Chrome. Wybierz plik JavaScript, na przykład main.js, który jest pobierany z serwera.

Kliknij prawym przyciskiem myszy na plik i wybierz opcję „Override Content” z menu kontekstowego.

Wyświetli się okno dialogowe, w którym możesz wybrać lokalizację pliku na dysku. Upewnij się, że utworzyłeś już folder, w którym chcesz przechowywać nadpisywane pliki.

Wybierz żądany folder i kliknij „Select Folder”. Oparty o to zostanie połączenie między oryginalnym plikiem a twoim plikiem lokalnym.

Teraz musisz udzielić przeglądarce dostępu do tego katalogu. Ponownie kliknij na menu Overrides i upewnij się, że zezwolenie na dostęp do wybranego katalogu jest włączone.

2. Tworzenie pliku lokalnego

Teraz możesz utworzyć nowy plik w folderze Overrides. Otwórz plik i np. wpisz do niego prosty skrypt alert().

Możesz dostosować zawartość według własnych potrzeb. Zapisz plik i odśwież stronę, aby zobaczyć, że teraz pojawi się okno Alert zamiast pliku, który pierwotnie został pobrany z serwera.

3. Sprawdzanie aktywności sieciowej

Aby upewnić się, że plik już nie jest pobierany z serwera, otwórz kartę Network w narzędziach developerskich. Powinieneś zobaczyć, że plik main.js nie jest już pobierany z serwera, a w zamian są wczytywane zawartości nadpisane lokalnie.

Jeśli chcesz dodać więcej Overrides lub usunąć istniejące, przejdź do sekcji Overrides, gdzie znajdziesz podsumowanie wszystkich aktywnych Overrides.

4. Praca z Workspace

Następnie chcemy skonfigurować Workspace. Pozwala to na połączenie lokalnego folderu deweloperskiego z narzędziami developerskimi. Przejdź do ustawień narzędzi developerskich Chrome i znajdź opcję „Workspace”.

Wybierz folder, w którym znajdują się twoje projekty. Chrome również potrzebuje zgody na dostęp do tego folderu, więc upewnij się, że udzieliłeś odpowiednich uprawnień.

5. Modyfikacje w kodzie

Teraz możesz pracować bezpośrednio w Workspace. Na przykład otwórz swój plik main.js, dokonaj zmian i zapisz plik. Kod zostanie automatycznie ponownie załadowany z serwera, dzięki czemu od razu zobaczysz, jak zmiany wpłynęły na Twoją witrynę.

6. Debugowanie w Workspace

Jedną z praktycznych zalet Workspaces jest możliwość ustawienia punktów wstrzymania, aby efektywnie debugować swój kod. Ustaw punkty wstrzymania w liniach kodu i odśwież stronę, aby przerwać wykonanie i sprawdzić bieżący stan zmiennych.

7. Zalety i wady

Mimo że Workspace jest przydatny, wielu programistów zaleca dokonywanie zmian bezpośrednio w edytorze kodu, takim jak Visual Studio Code, a następnie zapisywanie plików tam. Dzięki temu lepiej widzisz, która wersja plików jest używana. Korzystanie z Workspace’u może być mylące, zwłaszcza gdy nie jest jasne, jaka jest relacja z oryginalnymi plikami.

Niemniej jednak, jeśli edytujesz tylko proste pliki CSS lub kod nieprzetworzony, Workspace może być dobrą opcją.

Podsumowanie

W tym przewodniku nauczyłeś się, jak korzystać z Overrides i Workspace w narzędziach Chrome Developer Tools do dostosowywania stylów i skryptów bez konieczności dotykania oryginalnego pliku serwera. Overrides pozwalają szybko wprowadzać zmiany, podczas gdy Workspace umożliwia bezpośrednią pracę z folderem deweloperskim.