Dừng Chrome lưu trữ các tập tin JS của tôi


136

Tôi sẽ thực hiện thay đổi cho các tệp JS của mình nhưng nó sẽ không thực sự thay đổi trong trình duyệt, tôi phải đổi tên các tệp mỗi lần để nó tải lại. Có một số loại lệnh .htaccess tôi có thể thêm hoặc một cái gì đó để làm cho nó dừng bộ nhớ đệm?

Nó thậm chí còn lưu trữ các trang html lõi cứng của tôi. Tôi cần mở lại toàn bộ trình duyệt của mình chỉ để xem các thay đổi. Nó có thể là một vấn đề máy chủ?


Việc bật tiêu đề ETag trong máy chủ web của bạn có khiến Chrome lưu vào bộ nhớ cache nhưng truy xuất chính xác một bản sao mới của tệp khi nó đã thay đổi không?
Nhà phát triển Web

Câu trả lời:


200

Bạn có thể nhấp vào biểu tượng cài đặt ở góc trên bên phải ...| Thêm công cụ | Công cụ dành cho nhà phát triển | Mạng | Vô hiệu hóa bộ nhớ cache (trong khi DevTools đang mở)

Đối với windows, đây là F12hoặc CTRL + SHIFT + Itrong khi trên macCMD + SHIFT + I mở ra DevTools.

Đường dẫn mới cho Chrome Update tháng 9 năm 2018:

Nhấp vào biểu tượng cài đặt ở góc trên bên phải ...| Cài đặt | Sở thích | Công cụ dành cho nhà phát triển | Mạng | Vô hiệu hóa bộ đệm (trong khi DevTools đang mở)


4
Thất bại lớn bởi chrome là bộ nhớ đệm mọi thứ ... ngay cả khi trang được đánh dấu là Không có bộ đệm .... Ồ, ít nhất thì nó cũng hoạt động, người dùng có thể chịu đựng nhưng ít nhất tôi có thể phát triển
Robert Noack

4
Xin lưu ý rằng "Cài đặt" không còn ở dưới cùng bên phải! Nhấp vào menu ba chấm ở trên cùng bên phải để vào cài đặt.
yizzlez

4
Vị trí là: góc trên bên phải | "..." | cài đặt | Sở thích | Mạng | "Vô hiệu hóa bộ đệm" (trong khi DevTools đang mở).
nguyên tử88

1
Đây là THỰC HÀNH RẤT BẮT ĐẦU !!! Không, bạn không nên có một bản hack tạm thời cho việc sử dụng của mình .... bạn nên có một giải pháp PERMANENT cho TẤT CẢ người dùng của mình. Cách tốt nhất là một chuỗi truy vấn ngẫu nhiên ở cuối src. src = "someJs.js? someRandomStringCreatedByInlineJsOrServerRenderedCode" sẽ làm cho nó có phiên bản mới mọi lúc. một chuỗi ngẫu nhiên tốt sẽ là lấy ngày / giờ ngày hôm nay và ném nó vào đó. bạn có thể phải biến nó thành một chuỗi vì nó có thể là một đối tượng ngày. Điều thực sự tồi tệ là đây là câu trả lời được chọn và được đánh giá rất cao.

1
Kể từ Chrome 61.0.3163.100, có vẻ như tùy chọn này hiện nằm trong Điều kiện mạng / Công cụ khác. Tùy chọn "Công cụ dành cho nhà phát triển" không còn tồn tại.
Ilia Koulikov

61

Cách nhanh hơn để thực hiện việc này là nhấp chuột phải vào biểu tượng làm mới bên cạnh thanh địa chỉ và chọn Tải lại bộ nhớ cache và Hard

Chỉ cần đảm bảo các công cụ dev của Chrome được mở. (Nhấn F12) Nhân tiện ... Thủ thuật này chỉ hoạt động trên Chrome cho Windows, Ubuntu và Mac OS


2
FYI, tôi đã thử tất cả những thứ này, và hoàn toàn không có cái nào hoạt động. Trên máy của tôi (có cài đặt mặc định cho Mountain Lion), F12 hiển thị bảng điều khiển.
Aubrey Goodman

2
Làm thế nào là nó tốt hơn nhiều so với câu trả lời được chấp nhận? Bạn có thể tải lại bình thường với câu trả lời được chấp nhận.
SSH này vào

không bạn không thể. ít nhất là tôi không thể. không có câu trả lời nào phù hợp với tôi, vẫn bật lên một cảnh báo bị xóa trong tệp js cục bộ của tôi nhưng nó vẫn nằm trong tệp js được lưu trong bộ nhớ cache trong chrome.
Burak Karakuş

1
Làm việc cho tôi. Hãy chắc chắn rằng các công cụ dev đang mở, nếu không, nhấp chuột phải sẽ không hiển thị menu.
Venryx

Tôi thấy tùy chọn, nhưng trong trường hợp của tôi, kịch bản không được làm mới.
Ilia Koulikov


12

thêm một cái gì đó như script.js?a=[random Number] với số ngẫu nhiên được tạo bởi PHP.

Bạn đã thử hết hạn = 0, pragma "no-cache" và "cache-control = NO-CACHE" chưa? (Tôi không biết họ nói gì về Script).


2
Tôi tình cờ gặp câu hỏi này và đang lướt qua câu trả lời. Đây là một ý tưởng tồi, bởi vì: 1) tạo số ngẫu nhiên ở mỗi yêu cầu sẽ khiến trình duyệt tải xuống lại tệp mỗi lần truy cập. Bạn muốn một giá trị thời gian xây dựng , để các trình duyệt chỉ tạo lại giá trị khi bạn thay đổi trang web. Vì PHP là thời gian chạy được diễn giải, nên bạn có thể cần phải làm điều đó vào thời gian triển khai. và 2) tạo ra một số ngẫu nhiên có nghĩa là đôi khi (với xác suất tăng theo thời gian), trình duyệt sẽ có một số bản sao cũ được lưu trong bộ nhớ cache ngẫu nhiên. Nếu bạn phải làm điều đó vào thời gian yêu cầu, hãy sử dụng dấu thời gian!
JakeRobb

Tôi đang làm điều này và sử dụng số phiên bản xây dựng, với thời gian chờ khá (1 ngày) trên giá trị bộ đệm tiêu đề
Worthy7

11

Một vài ý tưởng:

  1. Khi bạn làm mới trang của mình trong Chrome, hãy thực hiện CTRL + F5 để làm mới hoàn toàn.
  2. Ngay cả khi bạn đặt hết hạn về 0, nó vẫn sẽ lưu trong bộ đệm. Bạn sẽ phải đóng và mở lại trình duyệt của mình.
  3. Đảm bảo rằng khi bạn lưu các tệp trên máy chủ, dấu thời gian sẽ được cập nhật. Trước tiên, Chrome sẽ phát HEADlệnh thay vì GET đầy đủ để xem có cần tải xuống lại toàn bộ tệp hay không và máy chủ sử dụng dấu thời gian để xem.

Nếu bạn muốn tắt bộ nhớ đệm trên máy chủ của mình, bạn có thể thực hiện một số việc như:

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

Trong .htaccess


Có điều này nhưng kiểm tra trước = 0, kiểm tra sau = 0 là sự bổ sung tạo ra sự khác biệt cho tôi.
TadLewis

7

Bước nhanh:

1) Mở bảng điều khiển Công cụ dành cho nhà phát triển bằng cách vào Menu Chrome -> Công cụ -> Công cụ dành cho nhà phát triển

2) Nhấp vào biểu tượng cài đặt ở phía bên tay phải (đó là một răng cưa!)

3) Chọn hộp "Tắt bộ đệm (khi DevTools mở)"

4) Bây giờ, trong khi bảng điều khiển đã hoạt động, chỉ cần nhấn refresh và JS sẽ không được lưu trữ!


1
Tuy nhiên, nó không giúp gỡ lỗi bằng WebStorm. Sau đó DevTools đang mở WebStrom không thể đính kèm trình gỡ lỗi.
Alexander Volkov

5

Vấn đề là Chrome cần phải có must-revalidatetrong tiêu đề Cache-Control` để kiểm tra lại các tệp để xem chúng có cần được tải lại hay không.

Bạn luôn có thể SHIFT-F5 và buộc Chrome làm mới, nhưng nếu bạn muốn khắc phục sự cố này trên máy chủ, hãy bao gồm tiêu đề phản hồi này:

Cache-Control: must-revalidate

Đ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 được 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 cái trong bộ đệm đượ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 không.

Đây là một bài viết blog thảo luận về vấn đề này hơn nữa.


1
Tôi nghĩ rằng nó nên được Cache-Control: must-revalidatethay vì Cache-Control: must-validate. Tôi không nghĩ rằng cái sau là hợp lệ.
László Monda

3

Khi thực hiện cập nhật cho các ứng dụng web của mình, tôi sẽ sử dụng một trình xử lý để trả về một tệp JS duy nhất để tránh các lượt truy cập lớn trên máy chủ của tôi hoặc thêm một chuỗi truy vấn nhỏ vào chúng:

<script type="text/javascript" src="/mine/myscript?20111205"></script>

2
Mặc dù điều này có vẻ như là một cách thực hành khéo léo, bạn có thể gặp sự cố với một số proxy sẽ ngừng lưu trữ khi họ tìm thấy một chuỗi truy vấn: developers.google.com/speed/docs/best-practices/,
Francois Bourgeois

2
Vậy bạn nên làm gì thay thế?
BlueSky

1
<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>

1

Tôi biết đây là một câu hỏi "cũ". Nhưng đau đầu với bộ nhớ đệm không bao giờ được. Sau hàng đống thử nghiệm và sai sót, tôi thấy rằng một trong những nhà cung cấp dịch vụ lưu trữ web của chúng tôi đã thông qua CPanel ứng dụng này có tên là Cachewall. Tôi vừa nhấp vào chế độ Kích hoạt phát triển và ... voilà !!! Nó dừng cơn đau kéo dài ngay lập tức :) Hy vọng điều này sẽ giúp người khác ... R


0

Tôi đã nhận được cùng một tệp css khi tôi duyệt trang web (trên máy chủ của công ty lưu trữ với tên miền thực) và tôi không thể nhận được phiên bản cập nhật trên chrome. Tôi đã có thể nhận được phiên bản cập nhật của tệp khi tôi duyệt nó trên Firefox. Không có câu trả lời nào trong số này làm việc cho tôi. Tôi cũng có các tệp trang web trên máy của mình và duyệt trang web với localhost bằng máy chủ apache cục bộ của tôi. Tôi tắt máy chủ apache của tôi và tôi đã có thể nhận được tập tin cập nhật. Bằng cách nào đó, máy chủ apache cục bộ của tôi đã bị rối với bộ đệm chrome. Hy vọng điều này sẽ giúp được ai đó vì nó rất khó để tôi khắc phục điều này.


0
  1. Mở công cụ phát triển

    • Hoặc F12
    • Hoặc ...-> More Tools->Developer Tools
  2. Nhấp chuột Empty Cache and Hard Reload

    • Nhấp chuột phải vào biểu tượng làm mới (chỉ bên trái thanh địa chỉ url)
    • Hoặc nhấp chuột trái vào biểu tượng làm mới và giữ nó trong 1 giây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.