Thay đổi: Theo dõi các thay đổi về HTML, CSS và JavaScript

Sofia Emelianova
Sofia Emelianova
GitHub

Sử dụng bảng điều khiển Thay đổi để theo dõi các thay đổi về mã được thực hiện trong Công cụ cho nhà phát triển.

Tổng quan

Với bảng điều khiển Thay đổi, hãy theo dõi những thay đổi mà bạn thực hiện đối với:

Bảng điều khiển Thay đổi chỉ hiển thị những thay đổi mà bạn thực hiện trong DevTools. Nếu bạn tải lại DevTools hoặc trang, các thay đổi sẽ biến mất.

Để DevTools duy trì các thay đổi trên các lần tải trang, hãy làm theo các bước trong phần Ghi đè cục bộ.

Để DevTools ghi các thay đổi vào nguồn cục bộ, hãy làm theo các bước trong phần Chỉnh sửa và lưu tệp bằng Workspaces.

Mở bảng Changes (Thay đổi)

Cách mở bảng điều khiển Thay đổi:

  1. Mở Công cụ cho nhà phát triển.

  2. Nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) để mở Trình đơn lệnh.

  3. Bắt đầu nhập changes, chọn Hiện thay đổi rồi nhấn Enter.

    Chạy lệnh Show Changes (Hiển thị thay đổi)

Ngoài ra, ở góc trên bên phải, hãy nhấp vào biểu tượng Tuỳ chỉnh và kiểm soát DevTools > Công cụ khác > Thay đổi.

Tuỳ chọn Thay đổi được lấy làm tiêu điểm trong trình đơn thả xuống Công cụ khác

Theo mặc định, DevTools hiển thị bảng điều khiển Thay đổi ở cuối cửa sổ DevTools, trong Ngăn.

Xem và tìm hiểu các thay đổi của bạn

Cách xem các thay đổi:

  1. Mở Công cụ cho nhà phát triển.

  2. Chỉnh sửa nguồn:

  3. Mở bảng điều khiển Thay đổi rồi chọn một tệp ở bên phải bảng điều khiển.

  4. Quan sát kết quả diff làm nổi bật những nội dung sau:

Phần khác biệt được làm nổi bật trong bảng điều khiển Thay đổi

Bảng điều khiển Changes (Thay đổi) sẽ tự động in đẹp kết quả diff, vì vậy, bạn không cần phải cuộn theo chiều ngang để xem các thay đổi trong một dòng.

Sao chép các thay đổi về CSS

Nếu đã thực hiện thay đổi đối với CSS trong phần