Zmiany: śledzenie zmian w kodzie HTML, CSS i JavaScript

Sofia Emelianova

Na karcie Zmiany możesz śledzić wprowadzone zmiany:

• Kod HTML w sekcji Źródła z włączonymi zastąpieniami lokalnymi
• CSS w sekcji Elementy > Style lub Źródła
• JavaScript w sekcji Źródła

Na karcie Zmiany widoczne są zmiany wprowadzone w Narzędziach deweloperskich. Jeśli załadujesz ponownie Narzędzia deweloperskie lub stronę, zmiany znikną.

Aby zapewnić zachowywanie zmian w Narzędziach deweloperskich po wczytaniu strony, wykonaj czynności opisane w artykule Zastąpienia lokalne.

Aby w Narzędziach deweloperskich wprowadzić zmiany w źródłach lokalnych, wykonaj czynności opisane w artykule Edytowanie i zapisywanie plików w obszarach roboczych.

Otwórz kartę Zmiany

Aby otworzyć kartę Zmiany:

1. Otwórz Narzędzia deweloperskie.

2. Naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń.

3. Zacznij pisać changes, wybierz Pokaż zmiany i naciśnij Enter.

   

Możesz też w prawym górnym rogu kliknąć Dostosowywanie i kontrolowanie Narzędzi deweloperskich > Więcej narzędzi > Zmiany.

Zmiany" szerokość="800" wysokość="460">

Domyślnie Narzędzia deweloperskie wyświetlają kartę Zmiany u dołu okna Narzędzia deweloperskie w panelu.

Wyświetlanie i analizowanie zmian

Aby wyświetlić zmiany:

1. Otwórz Narzędzia deweloperskie.

2. Wprowadź zmiany w źródłach:

   • HTML: najpierw włącz Lokalne zastąpienia, a następnie wprowadź zmiany w sekcji Źródła
   • CSS w sekcji Elementy > Style lub Źródła
   • JavaScript w sekcji Źródła

3. Otwórz kartę Zmiany i wybierz plik po prawej stronie karty.

4. Zwróć uwagę na dane wyjściowe funkcji diff, które wyróżniają te elementy:

Dane wyjściowe funkcji diff są wydrukowane automatycznie na karcie Zmiany, dzięki czemu nie trzeba przewijać ekranu w poziomie, by zobaczyć zmiany w jednym wierszu.

Skopiuj zmiany CSS

Jeśli wprowadzisz zmiany w CSS w sekcji Elementy > Style, możesz skopiować je wszystkie za pomocą jednego przycisku:

1. Otwórz kartę Zmiany i po prawej stronie wybierz plik CSS, w którym zostały wprowadzone zmiany.

   

2. Kliknij przycisk Kopiuj na dole karty Zmiany.

Cofanie wszystkich zmian wprowadzonych w pliku

Aby cofnąć zmiany wprowadzone w pliku:

1. Po lewej stronie karty Zmiany wybierz plik ze zmianami, które chcesz cofnąć.
2. Na pasku działań u dołu kliknij Cofnij wszystkie zmiany w bieżącym pliku.