Với cơ chế ghi đè cục bộ, bạn có thể bỏ chặn quy trình công việc bằng cách tạo nguyên mẫu, kiểm thử các thay đổi và 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 cơ 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 phản hồi cho các yêu cầu và nhiều 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:
- Mock API và các bản sửa lỗi API trước khi thực sự phát hành chính thức.
- 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.
- Thử nghiệm 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 những chỉ số này có giá trị đáng kể.
Chế độ ghi đè cục bộ cũng cho phé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 qua các lần 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 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 thiết bị 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ế
Chế độ ghi đè cục bộ hoạt động với các tiêu đề phản hồi mạng và với 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 bị tắt khi Ghi đè cục bộ được bật.
- 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à 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 các 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 trong bảng 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 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ộ, thì trong thanh thao tác ở 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 Allow (Cho phép) để cấp quyền truy cập cho Công cụ cho nhà phát triển.
- Nếu bạn đã thiết lập chế độ ghi đè cục bộ nhưng bị tắt, thì Công cụ cho nhà phát triển sẽ tự động bật các chế độ đó.
Sau khi thiết lập và bật chế độ ghi đè cục bộ, tuỳ thuộc vào những gì 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 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 chế độ ghi đè cục bộ hoặc xoá tất cả tệp ghi đè, hãy chuyển đến phần Nguồn > Ghi đè rồi bỏ chọn hộp đánh dấu
Enable Local Override (Bật 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ơ 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 phần 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 và sẽ phải tạo lại các lượt ghi đè đã xoá theo cách thủ công.
Để xem nhanh tất cả các chế độ ghi đè, trong bảng điều khiển Network (Mạng), hãy nhấp chuột phải vào một yêu cầu rồi chọn Show all Override (Hiện tất 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ộ.
- Thực hiện các thay đổi đối với tệp và lưu các thay đổi đó 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 Nguồn hoặc CSS trong Phần tử > Kiểu, trừ phi CSS có 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 có 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 hiển thị một biểu tượng chấm màu tím kèm theo chú giải công cụ bên cạnh thẻ Phản hồi của yêu cầu chứa nội dung trên web bị ghi đè.
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ợ này hỗ trợ 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ục Mạng, hãy lọc các yêu cầu XHR/tìm nạp, tìm yêu cầu mà bạn cần, nhấp chuột phải vào đó rồi chọn Ghi đè nội dung.
- Thực hiện thay đổi đối vớ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 của bạn được á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 trên thiết bị
Bạn có thể theo dõi tất cả các thay đổi mà mình thực hiện đối với nội dung trên 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 trên trình đơn theo bối cảnh. Thao tác này sẽ mở thư mục mà bạn đã chọn trong quá trình overrides setup. Tại đó, bạn có thể sửa đổi các tệp bằng trình soạn thảo mã yêu thích của mình.
Ghi đè tiêu đề phản hồi HTTP
Trong bảng 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 cơ chế ghi đè tiêu đề phản hồi, bạn có thể tạo nguyên 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 ở:
- Tiêu đề Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS)
- Tiêu đề về chính sách 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 phầ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 và đặt con trỏ vào đó.
Ngoài ra, để bật trình chỉnh sửa Tiêu đề phản hồi, hãy di chuột qua giá trị tiêu đề phản hồi rồi nhấp vào Chỉnh sửa 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 tiêu đề đó.
- Để thêm tiêu đề mới, hãy nhấp vào Thêm tiêu đề.
- Để xoá chế độ ghi đè tiêu đề, hãy nhấp vào bên cạnh chế độ ghi đè đó. Thao tác này sẽ xoá những tiêu đề bạn đã thêm hoặc chuyển các giá trị đã sửa đổi về giá trị ban đầu.
Bảng điều khiển Network (Mạng) làm nổi bật các tiêu đề đã sửa đổi bằng màu xanh lục, còn các phần ghi đè đã bị xoá bằng màu đỏ và bị gạch ngang. Ngoài ra, thẻ Tiêu đề sẽ hiển thị một 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 mọi chế độ ghi đè tiêu đề phản hồi
Cách chỉnh sửa tất cả quy tắc ghi đè tiêu đề ở cùng một nơi:
Nhấp vào .headers bên cạnh mục 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 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ị, cùng với 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 tiêu đề-giá trị vào 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 đề đã thêm hoặc một quy tắc, 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.Làm mới trang để áp dụng các thay đổi.