Với tính năng ghi đè cục bộ, bạn có thể bỏ chặn quy trình làm việc của mình bằng cách tạo bản minh hoạ và kiểm thử các thay đổi cũng như bản sửa lỗi mà không cần chờ phần phụ trợ, bên thứ ba hoặc API hỗ trợ.
Sử dụng chế độ ghi đè cục bộ để mô phỏng tài nguyên từ xa ngay cả khi bạn không có quyền truy cập vào các tài nguyên đó. Bạn có thể mô phỏng phản hồi cho các yêu cầu và tệp khác nhau, ví dụ: tiêu đề phản hồi HTTP và nội dung web, bao gồm cả XHR và yêu cầu tìm nạp.
Ví dụ: cơ chế ghi đè cục bộ có thể hữu ích trong các trường hợp sử dụng sau:
- API mô phỏng và kiểm thử bản sửa lỗi API trước khi phát hành công khai.
- Tạo nguyên mẫu cho các thiết kế giao diện người dùng mới nếu bạn đã biết cấu trúc dữ liệu mà phần phụ trợ sẽ sử dụng.
- Kiểm thử các bản sửa lỗi hiệu suất, ví dụ: loại bỏ CLS, để đảm bảo trước rằng các bản sửa lỗi đó có ý nghĩa.
Tính năng ghi đè cục bộ cũng cho phép bạn giữ lại các thay đổi bạn thực hiện trong DevTools trong quá trình tải trang.
Cách hoạt động
- Khi bạn thực hiện thay đổi trong Công cụ cho nhà phát triển, Công cụ cho nhà phát triển sẽ lưu bản sao của tệp đã sửa đổi vào thư mục mà bạn chỉ định.
- Khi bạn tải lại trang, Công cụ cho nhà phát triển sẽ phân phát tệp cục bộ đã được sửa đổi, chứ không phải tài nguyên mạng.
Bạn cũng có thể lưu trực tiếp các thay đổi vào tệp nguồn. Xem bài viết Chỉnh sửa và lưu tệp bằng Không gian làm việc.
Các điểm hạn chế
Tính năng ghi đè cục bộ hoạt động với tiêu đề phản hồi mạng và cho hầu hết các loại tệp, bao gồm cả XHR và yêu cầu tìm nạp, với một vài ngoại lệ:
- Bộ nhớ đệm sẽ bị tắt khi bạn bật tính năng Ghi đè cục bộ.
- Công cụ cho nhà phát triển không lưu các thay đổi được thực hiện trong cây DOM của bảng điều khiển Phần tử.
- Nếu bạn chỉnh sửa CSS trong ngăn Styles (Kiểu) và nguồn của CSS đó là tệp HTML, thì DevTools sẽ không lưu thay đổi.
Thay vào đó, bạn có thể chỉnh sửa tệp HTML trong bảng điều khiển Nguồn.
Thiết lập cơ chế ghi đè cục bộ
Bạn có thể ghi đè nội dung web hoặc tiêu đề phản hồi ngay lập tức trong bảng điều khiển Mạng:
- Mở Công cụ cho nhà phát triển, chuyển đến bảng điều khiển Mạng, nhấp chuột phải vào một yêu cầu bạn muốn ghi đè, chọn Ghi đè tiêu đề hoặc Ghi đè nội dung trong trình đơn thả xuống.
- Nếu bạn chưa thiết lập cơ chế ghi đè cục bộ, thì trong thanh hành động ở trên cùng, Công cụ cho nhà phát triển sẽ nhắc bạn:
- Chọn một thư mục để lưu trữ các tệp ghi đè.
- Nhấp vào Cho phép để cấp cho DevTools quyền truy cập vào ứng dụng đó.
- Chọn một thư mục để lưu trữ các tệp ghi đè.
- Nếu bạn đã thiết lập nhưng tắt chế độ ghi đè cục bộ, thì DevTools sẽ tự động bật chế độ này.
Sau khi bạn thiết lập và bật tính năng ghi đè cục bộ, tuỳ thuộc vào nội dung bạn sắp ghi đè, Công cụ cho nhà phát triển sẽ đưa bạn đến:
- Bảng điều khiển Sources (Nguồn) cho phép bạn thay đổi nội dung web.
- Trình chỉnh sửa trong mục Mạng > Tiêu đề > Tiêu đề phản hồi để cho phép bạn thay đổi tiêu đề phản hồi.
Để tạm thời tắt cơ chế ghi đè cục bộ hoặc xoá tất cả các tệp ghi đè, hãy chuyển đến Nguồn > Ghi đè và bỏ chọn hộp đánh dấu Enable Local Overrides (Bật cơ chế ghi đè cục bộ) hoặc nhấp vào Xoá tương ứng.
Để xoá một tệp ghi đè hoặc toàn bộ các cơ chế ghi đè trong một thư mục, hãy nhấp chuột phải vào tệp hoặc thư mục đó trong Sources > (Nguồn) > Overrides (Ghi đè), chọn Delete (Xoá) rồi nhấp vào OK trong hộp thoại. Bạn không thể huỷ thao tác này sau khi thực hiện, và bạn sẽ phải tạo lại các chế độ ghi đè đã xoá theo cách thủ công.
Để xem nhanh tất cả các cơ chế ghi đè, trong bảng điều khiển Mạng, hãy nhấp chuột phải vào một yêu cầu rồi chọn Hiển thị tất cả cơ chế ghi đè. Công cụ cho nhà phát triển sẽ đưa bạn đến Nguồn > Ghi đè.
Ghi đè nội dung trên web
Cách ghi đè nội dung web:
- Thiết lập cơ chế ghi đè cục bộ.
- Thực hiện các thay đổi đối với tệp và lưu các thay đổi đó trong DevTools.
Ví dụ: bạn có thể chỉnh sửa các tệp trong Nguồn hoặc CSS trong Thành phần > Kiểu, trừ phi CSS nằm trong tệp HTML.
Công cụ cho nhà phát triển lưu các tệp đã sửa đổi, liệt kê các tệp đó trong phần Nguồn > Ghi đè và cho bạn thấy biểu tượng 
bên cạnh các tệp bị ghi đè trong các bảng điều khiển và ngăn liên quan: Phần tử > Kiểu, Mạng và Nguồn > Ghi đè.
Ngoài ra, bảng điều khiển Mạng cho thấy biểu tượng dấu chấm màu tím có chú thích bên cạnh thẻ Phản hồi của một yêu cầu có nội dung web được ghi đè.
Ghi đè XHR hoặc yêu cầu tìm nạp để mô phỏng tài nguyên từ xa
Với tính năng ghi đè cục bộ, bạn không cần quyền truy cập vào phần phụ trợ và không phải đợi phần phụ trợ hỗ trợ các thay đổi của bạn. Mô phỏng và thử nghiệm nhanh:
- Thiết lập cơ chế ghi đè cục bộ.
- Trong Mạng, hãy lọc yêu cầu XHR/fetch, tìm yêu cầu bạn cần, nhấp chuột phải vào yêu cầu rồi chọn Ghi đè nội dung.
- Chỉnh sửa dữ liệu đã tìm nạp rồi lưu tệp.
- Làm mới trang và quan sát các thay đổi đã áp dụng.
Để tìm hiểu quy trình làm việc này, hãy xem video sau:
Theo dõi các thay đổi cục bộ
Bạn có thể theo dõi tất cả thay đổi mà bạn thực hiện đối với nội dung web ở cùng một nơi – thẻ ngăn Thay đổi.
Ngoài ra, trong phần Nguồn > Ghi đè, bạn có thể nhấp chuột phải vào tệp đã lưu rồi chọn Mở trong thư mục chứa từ trình đơn theo bối cảnh. Thao tác này sẽ mở thư mục bạn đã chọn trong quá trình thiết lập chế độ ghi đè. Ở đó, bạn có thể sửa đổi các tệp bằng trình soạn thảo mã mà mình yêu thích.
Ghi đè tiêu đề phản hồi HTTP
Trong bảng điều khiển Mạng, bạn có thể ghi đè các tiêu đề phản hồi HTTP mà không cần quyền truy cập vào máy chủ web.
Với ghi đè tiêu đề phản hồi, bạn có thể sửa nguyên mẫu cục bộ cho nhiều tiêu đề khác nhau, bao gồm nhưng không giới hạn ở:
- Tiêu đề chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
- Tiêu đề chính sách về quyền
- Tiêu đề tách biệt nhiều nguồn gốc
Cách ghi đè tiêu đề phản hồi:
- Thiết lập cơ chế ghi đè cục bộ và kiểm tra, chẳng hạn như trang minh hoạ này.
- Chuyển đến Mạng, tìm một yêu cầu, nhấp chuột phải vào yêu cầu đó rồi chọn Ghi đè tiêu đề. Công cụ cho nhà phát triển sẽ đưa bạn đến trình chỉnh sửa Headers (Tiêu đề) > Response Headers (Tiêu đề phản hồi).
Di chuột qua một giá trị tiêu đề phản hồi rồi đặt con trỏ tại đó.
Ngoài ra, để bật trình chỉnh sửa Tiêu đề phản hồi, hãy di chuột qua một giá trị tiêu đề phản hồi rồi nhấp vào Chỉnh sửa.
Sửa đổi hoặc thêm tiêu đề mới.
- Để chỉnh sửa giá trị tiêu đề, hãy nhấp vào giá trị đó.
- Để thêm tiêu đề mới, hãy nhấp vào Thêm tiêu đề.
- Để xoá một tiêu đề ghi đè, hãy nhấp vào biểu tượng bên cạnh tiêu đề đó. Thao tác này sẽ xoá các tiêu đề bạn đã thêm hoặc huỷ bỏ các giá trị đã sửa đổi về giá trị ban đầu.
Bảng điều khiển Mạng làm nổi bật các tiêu đề đã sửa đổi bằng màu xanh lục và xoá các tiêu đề ghi đè bằng màu đỏ và bị gạch chéo. Ngoài ra, thẻ Tiêu đề sẽ cho thấy biểu tượng dấu chấm màu tím kèm theo chú thích để bạn biết rằng tiêu đề sẽ bị ghi đè.
Hãy làm mới trang để áp dụng các thay đổi.
Chỉnh sửa tất cả các chế độ ghi đè tiêu đề phản hồi
Cách chỉnh sửa tất cả các tiêu đề ghi đè ở cùng một nơi:
Nhấp vào
.headers bên cạnh phần Tiêu đề phản hồi.
Công cụ cho nhà phát triển sẽ chuyển bạn đến tệp
.headerstương ứng trong phần Nguồn > Ghi đè.Chỉnh sửa tệp
.headers:
Để thêm quy tắc ghi đè mới, hãy nhấp vào Thêm quy tắc ghi đè. Quy tắc ở đây là một tập hợp các tiêu đề và giá trị và một hoặc nhiều yêu cầu áp dụng các tiêu đề và giá trị đó.
Để thêm một cặp giá trị-tiêu đề vào một quy tắc, hãy di chuột qua một cặp khác rồi nhấp vào .
Để huỷ bỏ giá trị tiêu đề, hãy xoá một tiêu đề hoặc quy tắc đã thêm, di chuột qua tiêu đề hoặc quy tắc đó rồi nhấp vào .
Lưu tệp
.headersbằng tổ hợp phím Command / Control + S.Làm mới trang để áp dụng các thay đổi.