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

Sofia Emelianova

Aby śledzić zmiany w kodzie wprowadzone w Narzędziach deweloperskich, użyj panelu Zmiany.

Omówienie

Za pomocą panelu 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

Panel Zmiany pokazuje tylko 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 panel Zmiany

Aby otworzyć panel 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ąć Dostosuj i kontroluj Narzędzia deweloperskie > Więcej narzędzi > Zmiany.

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

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 panel Zmiany i wybierz plik po prawej stronie panelu.

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

W panelu Zmiany automatycznie wydrukowane są dane wyjściowe diff, 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 jednym przyciskiem:

1. Otwórz panel Zmiany i po prawej stronie panelu wybierz plik CSS, w którym wprowadzono zmiany.

   

2. Kliknij przycisk Kopiuj u dołu panelu Zmiany.

Cofanie wszystkich zmian wprowadzonych w pliku

Aby cofnąć zmiany wprowadzone w pliku:

1. Po lewej stronie panelu 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.