Ghi đè cục bộ nội dung web và tiêu đề phản hồi HTTP

Sofia Emelianova

Với tính năng ghi đè cục bộ, bạn có thể bỏ chặn quy trình làm việc bằng cách tạo mẫu 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ợ các thay đổi và bản sửa lỗi đó.

Sử dụng chế độ ghi đè cục bộ để mô phỏng các 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 các phản hồi cho yêu cầu và nhiều tệp, ví dụ: tiêu đề phản hồi HTTP và nội dung web, bao gồm cả yêu cầu XHR và yêu cầu tìm nạp.

Ví dụ: các quy tắc ghi đè cục bộ có thể giúp ích trong các trường hợp sử dụng sau:

Mô phỏng API và kiểm thử các bản sửa lỗi API trước khi chúng thực sự được đưa vào sản xuất.
Tạo mẫu 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 giúp bạn giữ lại những thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển trên các lần tải trang.

Cách hoạt động

Khi bạn thực hiện các thay đổi trong Công cụ cho nhà phát triển, Công cụ cho nhà phát triển sẽ lưu một bản sao của tệp đã sửa đổi vào một 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ộ đã sửa đổi thay vì 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 phần 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 đối với tiêu đề phản hồi mạng và hầu hết các loại tệp, bao gồm cả yêu cầu XHR và yêu cầu tìm nạp, với một số trường hợp ngoại lệ:

Bộ nhớ đệm sẽ bị vô hiệu hoá khi bạn bật chế độ 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 Kiểu và nguồn của CSS đó là một 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 Nguồn.

Thiết lập chế độ ghi đè cục bộ

Bạn có thể ghi đè nội dung web hoặc tiêu đề phản hồi ngay trong bảng điều khiển Mạng:

Mở Công cụ cho nhà phát triển, chuyển đến bảng Mạng, nhấp chuột phải vào yêu cầu mà 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 chế độ ghi đè cục bộ, thì trong thanh thao tác ở trên cùng, Công cụ cho nhà phát triển sẽ nhắc bạn:
1. Chọn một thư mục để lưu trữ các tệp ghi đè.
2. Nhấp vào Cho phép để cấp quyền truy cập Công cụ cho nhà phát triển cho ứng dụng đó.
Nếu bạn đã thiết lập nhưng tắt chế độ ghi đè cục bộ, thì Công cụ cho nhà phát triển sẽ tự động bật chế độ này.
Sau khi bạn thiết lập và bật chế độ 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 Nguồn cho phép bạn thay đổi nội dung trên web.
- Trình chỉnh sửa trong Network (Mạng) > Headers (Tiêu đề) > Response Headers (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 Sources (Nguồn) > Overrides (Ghi đè) rồi 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 Clear (Xoá) tương ứng.

Để xoá một tệp ghi đè hoặc tất cả các tệp 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 và sẽ phải tạo lại các chế độ cài đặt thay thế đã xoá theo cách thủ công.

Để nhanh chóng xem tất 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 tất cả các chế độ ghi đè. Công cụ cho nhà phát triển sẽ đưa bạn đến phần Nguồn > Ghi đè.

Ghi đè nội dung trên web

Cách ghi đè nội dung trên web:

Thiết lập cơ chế ghi đè cục bộ.
Chỉnh sửa tệp và lưu các tệp đó trong Công cụ cho nhà phát triển.

Ví dụ: Bạn có thể chỉnh sửa các tệp trong Sources (Nguồn) hoặc CSS trong Elements (Phần tử) > Styles (Kiểu), trừ phi CSS nằm trong tệp HTML.

DevTools lưu các tệp đã sửa đổi, liệt kê các tệp đó trong Sources > Overrides (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 và ngăn có liên quan: Elements > Styles (Phần tử > Kiểu), Network (Mạng) và Sources > Overrides (Nguồn > Ghi đè).

Các biểu tượng tương ứng bên cạnh các tệp bị ghi đè trong phần Sources (Nguồn), Network (Mạng) và Elements (Phần tử), sau đó là Styles (Kiểu)

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 bị ghi đè.

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.

Ghi đè XHR hoặc yêu cầu tìm nạp để mô phỏng tài nguyên từ xa

Với chế độ 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 ngay lập tức:

Thiết lập chế độ ghi đè cục bộ.
Trong Mạng, hãy lọc các yêu cầu XHR/tìm nạp, 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.
Thay đổi 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 này, hãy xem video sau:

Theo dõi các thay đổi trên thiết bị

Bạn có thể theo dõi tất cả các thay đổi mà bạn thực hiện đối với nội dung trên web ở cùng một nơi – thẻ ngăn kéo Thay đổi.

Ngoài ra, trong phần Sources (Nguồn) > Overrides (Ghi đè), bạn có thể nhấp chuột phải vào tệp đã lưu rồi chọn Open in containing folder (Mở trong thư mục chứa) trong 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 đè. Tại đây, bạn có thể sửa đổi các tệp bằng trình chỉnh sửa mã yêu thích.

Lựa chọn "Mở trong thư mục chứa".

Ghi đè tiêu đề phản hồi HTTP

Trong bảng điều khiển Mạng, bạn có thể ghi đè tiêu đề phản hồi HTTP mà không cần truy cập vào máy chủ web.

Với tính năng ghi đè tiêu đề phản hồi, bạn có thể tạo mẫu cục bộ các bản sửa lỗi cho nhiều tiêu đề, bao gồm nhưng không giới hạn ở:

Cách ghi đè tiêu đề phản hồi:

Thiết lập chế độ ghi đè cục bộ và mở trang bạn muốn gỡ lỗi.
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 đề. DevTools sẽ đưa bạn đến trình chỉnh sửa Headers > Response Headers (Tiêu đề > Tiêu đề phản hồi).
Di chuột qua một giá trị tiêu đề phản hồi và đặ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 lên 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.

Lưu ý: Ví dụ này thêm tiêu đề Access-Control-Allow-Origin: * để loại bỏ lỗi CORS.
- Để chỉnh sửa giá trị tiêu đề, hãy nhấp vào giá trị đó.
- Để thêm một tiêu đề mới, hãy nhấp vào biểu tượng Thêm tiêu đề.
- Để xoá một chế độ ghi đè tiêu đề, hãy nhấp vào biểu tượng bên cạnh chế độ đó. Thao tác này sẽ xoá các tiêu đề bạn đã thêm hoặc khôi phục các giá trị đã sửa đổi về giá trị ban đầu.
Bảng Mạng làm nổi bật các tiêu đề đã sửa đổi bằng màu xanh lục và các chế độ ghi đè đã xoá bằng màu đỏ và bị gạch ngang. Ngoài ra, thẻ Headers (Tiêu đề) sẽ có biểu tượng dấu chấm màu tím kèm theo chú giải công cụ để cho bạn biết rằng tiêu đề đã bị ghi đè.
Làm mới trang để áp dụng các thay đổi.

Chỉnh sửa tất cả các cơ chế ghi đè tiêu đề phản hồi

Cách chỉnh sửa tất cả thông tin ghi đè tiêu đề ở cùng một nơi:

Nhấp vào .headers bên cạnh phần Response Headers (Tiêu đề phản hồi).

Công cụ cho nhà phát triển sẽ đưa bạn đến tệp .headers tương ứng trong Sources > Overrides (Nguồn > Ghi đè).
Chỉnh sửa tệp .headers:
- Để thêm một 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 nhóm gồm các tiêu đề và giá trị, cũng như một hoặc nhiều yêu cầu để áp dụng các tiêu đề và giá trị đó.
  
  Lưu ý: Bạn có thể sử dụng ký tự đại diện để chỉ định nhiều yêu cầu cùng một lúc. Chỉ định nhiều ký tự bằng * và một ký tự bằng ?.
- Để thêm một cặp giá trị tiêu đề vào một quy tắc, hãy di chuột lên một cặp khác rồi nhấp vào .
- Để khôi phục giá trị tiêu đề, hãy xoá 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 biểu tượng .
Lưu tệp .headers bằng tổ hợp phím Command / Control + S.
Làm mới trang để áp dụng các thay đổi.