Trang này được dịch bởi Cloud Translation API.

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 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à 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à tìm nạp.

Ví dụ: tính năng ghi đè cục bộ có thể hữu í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 thực sự phát hành bản chính thức.
Tạo nguyên 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 về hiệu suất, chẳng hạn như loại bỏ CLS để đảm bảo trước rằng các mức đó là quan trọng.

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 DevTools, DevTools sẽ lưu một 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 đã sửa đổi trên máy, 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 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ế

Cơ chế 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à tìm nạp, ngoại trừ một số trường hợp:

Bộ nhớ đệm sẽ bị tắt khi bạn bật tính năng Ghi đè cục bộ.
Công cụ 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à tệp HTML, Công cụ cho nhà phát triển 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 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 chế độ ghi đè cục bộ, trong thanh thao tác ở trên cùng, DevTools 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 Allow (Cho phép) để cấp quyền truy cập vào Công cụ cho nhà phát triển.
Nếu bạn đã thiết lập cơ chế ghi đè cục bộ nhưng bị tắt, Công cụ cho nhà phát triển sẽ tự động bật các quy tắc đó.
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 web.
- Trình chỉnh sửa trong mục Mạng > Tiêu đề > Tiêu đề phản hồi để bạn có thể 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ả tệp ghi đè, hãy chuyển đến Sources (Nguồn) > Overrides (Ghi đè) rồi bỏ đánh dấu hộp đánh dấu Enable Local Overrides (Bật cơ chế ghi đè cục bộ) hoặc nhấp vào Clear (Xoá).

Để xoá một tệp ghi đè hoặc tất cả 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 Nguồn > Ghi đè, chọn 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.

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

Ghi đè nội dung 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 Phần tử > Kiểu, trừ phi CSS đó nằm trong tệp HTML.

DevTools sẽ lưu các tệp đã sửa đổi, liệt kê các tệp đó trong Sources (Nguồn) > Overrides (Ghi đè) và hiển thị biểu tượng bên cạnh các tệp đã ghi đè trong các bảng điều khiển và ngăn liên quan: Elements (Phần tử) > Styles (Kiểu), Network (Mạng) và Sources (Nguồn) > Overrides (Ghi đè).

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

Ngoài ra, bảng điều khiển Mạng hiển thị biểu tượng dấu chấm màu tím có chú giải công cụ 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ú giải công cụ bên cạnh thẻ Phản hồi.

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

Với cơ 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 nhanh:

Thiết lập cơ chế ghi đè cục bộ.
Trong Mạng, hãy lọc cá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 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) trên 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.

Tuỳ chọn "Mở trong thư mục chứa".

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

Từ bảng điều khiển Network (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 bản sửa lỗi nguyên mẫu cục bộ 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à kiểm tra, ví dụ: 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 Tiêu đề > Tiêu đề phản hồi.
Di chuột qua 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.

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 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 đề được sửa đổi bằng màu xanh lục và xoá các chế độ ghi đè màu đỏ và bị gạch bỏ. 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 đè.
Làm mới trang để áp dụng các thay đổi.

Chỉnh sửa tất 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 .headers tương ứng trong phần 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 tập hợp 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 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 .headers bằng tổ hợp phím Command / Control + S.
Hãy làm mới trang để áp dụng các thay đổi.