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

Sofia Emelianova

GitHub

Na karcie Zmiany możesz śledzić zmiany wprowadzone w usłudze:

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

Karta Zmiany pokazuje zmiany wprowadzone w Narzędziach deweloperskich. Po ponownym załadowaniu strony lub Narzędzi deweloperskich zmiany znikną.

Aby w Narzędziach deweloperskich pozostawały zmiany po wczytaniu stron, wykonaj czynności opisane w sekcji 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ż kliknąć Dostosowywanie Narzędzi deweloperskich i konfigurowanie ustawień > Więcej narzędzi > Zmiany.

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

Domyślnie Narzędzia deweloperskie wyświetlają kartę Zmiany w dolnej części okna Narzędzi deweloperskich 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 Zastąpienia lokalne, a potem 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.

4. Obserwuj dane wyjściowe diff, które wyróżniają te elementy:

Karta Zmiany automatycznie drukuje dane wyjściowe diff, więc nie musisz przewijać poziomo, aby zobaczyć zmiany w jednym wierszu.

Skopiuj zmiany CSS

Po wprowadzeniu zmian w arkuszu 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 u dołu karty Zmiany.

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