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

Sofia Emelianova
Sofia Emelianova
GitHub

Với chế độ ghi đè cục bộ, bạn có thể ghi đè các tiêu đề phản hồi HTTP và nội dung trên web, bao gồm cả XHR và các yêu cầu tìm nạp, để 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 đó. Nhờ vậy, bạn có thể tạo các thay đổi nguyên mẫu mà không cần chờ phần phụ trợ hỗ trợ. 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.

Quy trình như sau:

  • 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.

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:

  1. 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. Chọn ghi đè nội dung trong trình đơn nhấp chuột phải của yêu cầu.
  2. 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 đè. Công cụ cho nhà phát triển nhắc bạn chọn một thư mục.
    2. 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. Quyền truy cập vào Công cụ cho nhà phát triển.
  3. 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ế độ đó.

  4. 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:

Để 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:

  1. Thiết lập cơ chế ghi đè cục bộ.
  2. 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 Đã lưu. 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 đè.

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

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 đè.

Biểu tượng chấm màu tím có chú giải công cụ 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ợ này hỗ trợ thay đổi của bạn. Mô phỏng và thử nghiệm nhanh:

  1. Thiết lập cơ chế ghi đè cục bộ.
  2. 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.
  3. Thực hiện thay đổi đối với dữ liệu đã tìm nạp rồi lưu tệp.
  4. 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.

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 ở:

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

  1. Thiết lập cơ chế ghi đè cục bộ và kiểm tra, chẳng hạn như trang minh hoạ này.
  2. 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.

  3. Di chuột qua giá trị tiêu đề phản hồi và đặt con trỏ vào đó.

    Trình chỉnh sửa Tiêu đề phản hồi.

    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.

  4. Sửa đổi hoặc thêm tiêu đề mới.

    Sửa đổi giá trị tiêu đề hiện có, thêm giá trị mới và xoá giá trị ghi đè.

    • Để 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 đè.

  5. 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:

  1. Nhấp vào Đã lưu. .headers bên cạnh mục Response Headers (Tiêu đề phản hồi).

    Liên kết ghi đè Tiêu đề bên cạnh mục 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 đè.

  2. Chỉnh sửa tệp .headers:

    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 .

  3. Lưu tệp .headers bằng tổ hợp phím Command / Control + S.

  4. Làm mới trang để áp dụng các thay đổi.