Tôi đang phát triển một trang web dựa trên mã nguồn Wordpress thông qua XAMPP. Đôi khi tôi thay đổi mã CSS, tập lệnh hoặc thứ gì đó khác và tôi nhận thấy trình duyệt của mình cần thời gian để áp dụng các sửa đổi. Điều này dẫn đến việc tôi phải sử dụng nhiều trình duyệt để làm mới một trình duyệt và nếu không áp dụng các kiểu mới, tôi sẽ thử trình duyệt thứ hai và nó luôn như vậy.
Có một số cách để tránh vấn đề này? Đôi khi tôi đang thay đổi mã mà không nhận thấy các sửa đổi trước đó.
Giải pháp chung
Nhấn Ctrl+ F5(hoặc Ctrl+ Shift+ R) để buộc tải lại bộ nhớ cache. Tôi tin rằng máy Mac sử dụng Cmd+ Shift+ R.
PHP
Trong PHP, bạn có thể tắt bộ nhớ cache bằng cách đặt ngày hết hạn thành một thời điểm trong quá khứ với tiêu đề:
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
Trình duyệt Chrome
Bạn có thể tắt bộ nhớ cache của Chrome bằng cách mở công cụ dành cho nhà phát triển F12, nhấp vào biểu tượng bánh răng ở góc dưới bên phải và chọn Tắt bộ nhớ cache trong hộp thoại cài đặt, như sau:
Hình ảnh lấy từ câu trả lời này .
Firefox
Gõ about:configvào thanh URL sau đó tìm mục tiêu đề network.http.use-cache. Đặt cái này thành false.
Nếu bạn muốn tránh điều đó ở phía máy khách, bạn có thể thêm một cái gì đó như ?v=1.xliên kết tệp css khi nội dung tệp bị thay đổi. Ví dụ: nếu có, <link rel="stylesheet" type="text/css" href="css-file-name.css">bạn có thể thay đổi nó thành <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">điều này sẽ bỏ qua bộ nhớ đệm.
Quan điểm của nhà phát triển
Nếu bạn đang ở chế độ phát triển (như trong câu hỏi ban đầu), cách tốt nhất là tắt bộ nhớ đệm trong trình duyệt thông qua thẻ meta HTML. Để làm cho cách tiếp cận này trở nên phổ biến, bạn phải chèn ít nhất ba thẻ meta như hình dưới đây.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Theo cách này, bạn với tư cách là nhà phát triển, chỉ cần làm mới trang để xem các thay đổi. Nhưng đừng quên nhận xét rằng mã khi đang được sản xuất, sau tất cả, bộ nhớ đệm là một điều tốt cho khách hàng của bạn.
Chế độ Sản xuất
Vì trong quá trình sản xuất, bạn sẽ cho phép lưu vào bộ nhớ đệm và khách hàng của bạn không cần biết cách buộc tải lại toàn bộ hoặc bất kỳ thủ thuật nào khác, bạn phải bảo đảm trình duyệt sẽ tải tệp mới. Và vâng, trong trường hợp này, cách tốt nhất mà tôi biết là thay đổi tên của tệp.
Nếu bạn muốn chắc chắn rằng các tệp này được Chrome làm mới đúng cách cho tất cả người dùng, thì bạn cần phải có must-revalidatetrong Cache-Controltiêu đề. Điều này sẽ khiến Chrome kiểm tra lại các tệp để xem liệu chúng có cần được tìm nạp lại hay không.
Đề xuất tiêu đề phản hồi sau:
Cache-Control: must-validate
Điều này yêu cầu Chrome kiểm tra với máy chủ và xem có tệp mới hơn không. Nếu có một tệp mới hơn, nó sẽ nhận nó trong phản hồi. Nếu không, nó sẽ nhận được phản hồi 304 và đảm bảo rằng phản hồi trong bộ nhớ cache được cập nhật.
Nếu bạn KHÔNG đặt tiêu đề này, thì trong trường hợp không có bất kỳ cài đặt nào khác làm mất hiệu lực tệp, Chrome sẽ không bao giờ kiểm tra với máy chủ để xem có phiên bản mới hơn hay không.