Perubahan: Melacak perubahan HTML, CSS, dan JavaScript Anda

Sofia Emelianova
Sofia Emelianova

Dengan tab Perubahan, lacak perubahan yang Anda buat untuk:

Tab Perubahan menampilkan perubahan yang Anda buat dalam DevTools. Jika Anda memuat ulang DevTools atau halaman, perubahannya 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 Workspace.

Buka 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 Command.

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

    Menjalankan perintah Show Changes

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

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

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

Melihat dan memahami perubahan Anda

Untuk melihat perubahan Anda:

  1. Buka DevTools.
  2. Buat perubahan pada sumber Anda:

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

  4. Amati output diff yang menandai hal berikut:

Perbedaan yang ditandai di tab Perubahan

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

Salin perubahan CSS

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

  1. Buka tab Perubahan dan, di sisi kanan tab, pilih file CSS tempat Anda membuat perubahan.

    Salin.

  2. Klik tombol Salin. Copy 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 Urungkan Kembalikan semua perubahan ke file saat ini.

Tombol Kembalikan