Perubahan: Melacak perubahan HTML, CSS, dan JavaScript Anda

Sofia Emelianova

Gunakan panel Perubahan untuk melacak perubahan kode yang dilakukan dalam DevTools.

Ringkasan

Dengan panel Perubahan, lacak perubahan yang Anda buat pada:

• HTML di Sumber dengan Penggantian lokal yang diaktifkan
• CSS di Elemen > Gaya atau Sumber
• JavaScript di Sumber

Panel Perubahan hanya menampilkan perubahan yang Anda buat dalam DevTools. Jika Anda memuat ulang DevTools atau halaman, perubahan akan hilang.

Agar DevTools mempertahankan perubahan di seluruh pemuatan halaman, ikuti langkah-langkah di Penggantian lokal.

Agar DevTools menulis perubahan ke sumber lokal Anda, ikuti langkah-langkah di Mengedit dan menyimpan file dengan Ruang Kerja.

Membuka panel Perubahan

Untuk membuka panel Perubahan:

1. Buka DevTools.

2. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS) untuk membuka Command Menu.

3. Mulai ketik changes, pilih Show Changes, lalu tekan Enter.

   

Atau, di sudut kanan atas, klik Customize and control DevTools > More tools > Changes.

Secara default, DevTools menampilkan panel Perubahan di bagian bawah jendela DevTools, di Panel samping.

Melihat dan memahami perubahan

Untuk melihat perubahan Anda:

1. Buka DevTools.

2. Buat perubahan pada sumber Anda:

   • HTML: Pertama, aktifkan Penggantian lokal, lalu buat perubahan di Sumber
   • CSS di Elemen > Gaya atau Sumber
   • JavaScript di Sumber

3. Buka panel Perubahan dan pilih file di sisi kanan panel.

4. Amati output diff yang menyoroti hal berikut:

Panel Perubahan akan mencetak output diff secara otomatis, sehingga Anda tidak perlu men-scroll secara horizontal untuk melihat perubahan dalam satu baris.

Menyalin perubahan CSS

Jika Anda membuat perubahan pada CSS di Elemen > Gaya, Anda dapat menyalin semuanya dengan satu tombol:

1. Buka panel Perubahan dan, di sisi kanan panel, pilih file CSS yang telah Anda ubah.

   

2. Klik tombol Salin di bagian bawah panel Perubahan.

Mengembalikan semua perubahan yang dibuat pada file

Untuk mengembalikan perubahan yang dibuat pada file:

1. Di sisi kiri panel Perubahan, pilih file dengan perubahan yang ingin dikembalikan.
2. Di panel tindakan di bagian bawah, klik Kembalikan semua perubahan ke file saat ini.