Perubahan: Melacak perubahan HTML, CSS, dan JavaScript Anda

Sofia Emelianova

Dengan tab Perubahan, lacak perubahan yang Anda buat pada:

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

Tab Perubahan 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.

Untuk membuat DevTools perubahan penulisan ke sumber lokal, ikuti langkah-langkah di Mengedit dan menyimpan file dengan Ruang Kerja.

Membuka tab Perubahan

Untuk membuka tab Perubahan:

1. Buka DevTools.

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

3. Mulai ketik changes, pilih Tampilkan Perubahan, lalu tekan Enter.

   

Atau, di sudut kanan atas, klik Sesuaikan dan kontrol DevTools > Alat lainnya > Perubahan.

Perubahan" width="800" height="460">

Secara default, DevTools menampilkan tab Perubahan di bagian bawah jendela DevTools, di Panel Samping.

Melihat dan memahami perubahan yang Anda lakukan

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 tab Perubahan, lalu pilih file di sisi kanan tab.

4. Amati output diff yang menyoroti hal berikut:

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

Salin perubahan CSS

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

1. Buka tab Perubahan, lalu di sisi kanan tab, pilih file CSS yang Anda buat perubahannya.

   

2. Klik tombol Salin di bagian bawah tab Perubahan.

Mengembalikan semua perubahan yang dibuat pada file

Untuk mengembalikan perubahan yang dibuat pada file:

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