Làm cách nào để buộc trình duyệt Chrome tải lại tệp .css trong khi gỡ lỗi trong Visual Studio?

Tôi hiện đang chỉnh sửa tệp .css bên trong Visual Studio 2012 (ở chế độ gỡ lỗi). Tôi đang sử dụng Chrome làm trình duyệt của mình. Khi tôi thay đổi tệp .css của ứng dụng bên trong Visual Studio và lưu, làm mới trang sẽ không tải với thay đổi được cập nhật trong tệp .css của tôi. Tôi nghĩ rằng tập tin .css vẫn được lưu trữ.

Tôi đã thử:

1. CTRL / F5
2. Trong Visual Studio 2012, Chuyển đến thuộc tính dự án, tab Web Chọn Bắt đầu chương trình bên ngoài trong phần Bắt đầu hành động Dán hoặc duyệt đến đường dẫn cho Google Chrome (Của tôi là C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) Trong hộp Đối số dòng lệnh đặt -incognito
3. Đã sử dụng các công cụ dành cho nhà phát triển Chrome, nhấp vào biểu tượng "bánh răng", chọn "Tắt bộ nhớ cache".

Dường như không có gì hoạt động trừ khi tôi dừng gỡ lỗi thủ công, (tắt Chrome), khởi động lại ứng dụng (trong gỡ lỗi).

Có cách nào để buộc Chrome luôn tải lại tất cả các thay đổi css và tải lại tệp .css không?

Cập nhật:
1. Thay đổi kiểu nội dòng trong tệp .aspx của tôi được chọn khi tôi làm mới. Nhưng những thay đổi trong tệp .css thì không. 2. Đây là một ứng dụng ASP.NET MVC4 vì vậy tôi nhấp vào một siêu liên kết, nó thực hiện GET. Làm điều đó, tôi không thấy một yêu cầu mới cho biểu định kiểu. Nhưng khi nhấp vào F5, tệp .css được tải lại và mã Trạng thái (trên tab mạng) là 200.

Có nhiều giải pháp phức tạp hơn nhiều, nhưng một giải pháp rất đơn giản, đơn giản chỉ là thêm một chuỗi truy vấn ngẫu nhiên vào CSS của bạn.

Nhu la src="/css/styles.css?v={random number/string}"

Nếu bạn đang sử dụng php hoặc ngôn ngữ phía máy chủ khác, bạn có thể thực hiện việc này một cách tự động time(). Vì vậy, nó sẽ làstyles.css?v=<?=time();?>

Bằng cách này, chuỗi truy vấn sẽ mới mỗi lần. Giống như tôi đã nói, có nhiều giải pháp phức tạp hơn, năng động hơn, nhưng trong mục đích thử nghiệm, phương pháp này là hàng đầu (IMO).

Để buộc chrome tải lại css và js:

Tùy chọn Windows 1: CTRL+ SHIFT+ R
Tùy chọn Windows 2: SHIFT+F5

HĐH X: ⌘+ SHIFT+R

Cập nhật như đã nêu bởi @PaulSlocum trong các bình luận (và nhiều xác nhận)

Câu trả lời gốc:

Chrome đã thay đổi hành vi. Ctrl+ Rsẽ làm điều đó.

Trên HĐH X: ⌘+R

Nếu bạn gặp sự cố khi tải lại các tệp css / js, hãy mở trình kiểm tra ( CTRL+ SHIFT+ C) trước khi thực hiện tải lại.

[ĐỌC CẬP NHẬT DƯỚI ĐÂY]

Cách dễ nhất tôi tìm thấy là trong cài đặt DevTools của Chrome. Nhấp vào biểu tượng bánh răng (hoặc 3 dấu chấm dọc, trong các phiên bản gần đây hơn) ở góc trên bên phải của DevTools để mở hộp thoại "Cài đặt". Trong đó, đánh dấu vào ô: "Vô hiệu hóa bộ đệm (trong khi DevTools đang mở)"

CẬP NHẬT: Bây giờ cài đặt này đã được di chuyển. Nó có thể được tìm thấy trong tab "Mạng", đó là hộp kiểm có nhãn "Tắt bộ nhớ cache".

Bạn đang đối phó với vấn đề bộ nhớ cache của trình duyệt.

Vô hiệu hóa bộ đệm trong trang chính nó. Điều đó sẽ không lưu tệp hỗ trợ của trang trong trình duyệt / bộ đệm.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

Mã này bạn yêu cầu / cần chèn vào headthẻ của trang bạn đang gỡ lỗi hoặc trong headthẻ của master pagetrang web của bạn

Điều này sẽ không cho phép trình duyệt lưu tệp bộ đệm, cuối cùng các tệp sẽ không được lưu trữ trong các tệp tạm thời của trình duyệt, do đó không có bộ đệm, do đó không cần tải lại :)

Tôi chắc chắn điều này sẽ làm :)

Trong trường hợp của tôi, trong cài đặt DevTools của Chrome, chỉ cần đặt "Tắt bộ đệm (trong khi DevTools đang mở)" không hoạt động, nó cần kiểm tra "Bật bản đồ nguồn CSS" và "Tự động tải lại CSS được tạo", được liệt kê trong nguồn nhóm, để làm cho vấn đề bộ nhớ cache này biến mất.

Nhấn SHIFT+ F5.

Nó hoạt động với tôi với Chrome phiên bản 54.

tôi đã phải đối mặt với vấn đề tương tự ở đây! nhưng tôi chắc chắn, độ phân giải của tôi tốt hơn tất cả các ví dụ trên, chỉ cần làm điều này,

1. Kéo bảng điều khiển dành cho nhà phát triển Chrome bằng cách nhấn F12
2. Nhấp chuột phải vào nút tải lại ở đầu trình duyệt và chọn "Cache trống và tải lại cứng".

Đó là nó!

Với macOS, tôi có thể buộc Chrome tải lại tệp CSS bằng cách thực hiện

⌘+ SHIFT+R

Tìm thấy câu trả lời này bị chôn vùi trong các ý kiến ở đây nhưng nó xứng đáng được tiếp xúc nhiều hơn.

Phiên bản hiện tại của Chrome (55.x) không tải lại tất cả tài nguyên khi bạn tải lại trang (Command + R) - và điều đó không hữu ích để gỡ lỗi tệp .css.

Command + R hoạt động tốt nếu bạn chỉ muốn gỡ lỗi các tệp .html, .php, .etc và nhanh hơn vì hoạt động với các tài nguyên cục bộ / lưu trữ (.css, .js). Để xóa thủ công bộ nhớ cache của trình duyệt cho mỗi lần lặp gỡ lỗi không thuận tiện.

Quy trình buộc tải lại tệp .css trên máy Mac (Phím tắt / Chrome): Command + Shift + R

Tôi đang sử dụng Edge Phiên bản 81.0.416.64 (Bản dựng chính thức) (64-bit) và dựa trên dự án nguồn mở Chromium.

Nhấn F12để vào Dev Tools.
Nhấp vào Tab Mạng
Kiểm tra Tắt bộ nhớ cache

Tôi biết đó là một câu hỏi cũ, nhưng nếu bất cứ ai vẫn đang tìm cách tải lại chỉ một tệp css / js bên ngoài, cách dễ nhất bây giờ trong Chrome là:

1. Chuyển đến tab Mạng trong DevTools
2. Nhấp chuột phải vào tài nguyên và chọn Phát lại XHR để lặp lại yêu cầu

Đảm bảo rằng tùy chọn Vô hiệu hóa bộ đệm được chọn để buộc tải lại.

Đối với Chrome macOS:

1. Mở công cụ phát triển cmd+ alt+i
2. Nhấp vào ba dấu chấm ở góc trên bên phải trong công cụ dành cho nhà phát triển
3. Nhấp vào cài đặt
4. Cuộn xuống Network
5. Cho phép Disable cache (while DevTools is open)xem ảnh chụp màn hình:

Tại sao cần phải làm mới toàn bộ trang? Chỉ cần làm mới các tập tin css mà không cần tải lại trang. Nó rất hữu ích khi, ví dụ, bạn phải chờ một phản hồi dài từ DB. Khi bạn nhận được dữ liệu từ DB và điền vào trang, sau đó chỉnh sửa các tệp css của bạn và tải lại chúng trong Chrome (hoặc trong Firefox). Để làm điều đó, bạn cần cài đặt phần mở rộng CSS Tải lại . Phiên bản Firefox cũng có sẵn.

Bạn có thể sao chép dán tập lệnh này vào bảng điều khiển Chrome và nó buộc các tập lệnh CSS của bạn tải lại sau mỗi 3 giây. Đôi khi tôi thấy nó hữu ích khi tôi cải thiện các kiểu CSS.

var nodes = document.querySelectorAll('link');
[].forEach.call(nodes, function (node) {
    node.href += '?___ref=0';
});
var i = 0;
setInterval(function () {
    i++;

    [].forEach.call(nodes, function (node) {
        node.href = node.href.replace(/\?\_\_\_ref=[0-9]+/, '?___ref=' + i);
    });
    console.log('refreshed: ' + i);
},3000);

Tôi đã giải quyết bằng thủ thuật đơn giản này.

<script type="text/javascript">
  var style = 'assets/css/style.css?'+Math.random();;
</script>

<script type="text/javascript">
  document.write('<link href="'+style+'" rel="stylesheet">');
</script>

Vẫn là một vấn đề.

Sử dụng các tham số như "..css? Something = Random-value" không thay đổi gì trong trải nghiệm hỗ trợ khách hàng của tôi. Chỉ thay đổi tên hoạt động.

Một cái khác về việc đổi tên tập tin. Tôi sử dụng URL Rewrite trong IIS. Đôi khi viết lại Isapi của Helicon.

Thêm quy tắc mới.

+ Name: lame-chrome-fix.
+ Pattern: styles/(\w+)_(\d+)
+ Rewrite URL: /{R:1}.css

Lưu ý: Tôi bảo lưu việc sử dụng chữ hoa để tách tên khỏi số ngẫu nhiên. Có thể là bất cứ điều gì khác.

Thí dụ:

<link href="https://stackoverflow.com/styles/template_<% 
Response.Write( System.DateTime.UtcNow.ToString("ddmmyyhhmmss")); %>" 
type="text/css" />

(Không có thư mục kiểu nào, nó chỉ là một phần tên của mẫu)

Mã đầu ra là:

<link href="/styles/template_285316115328" 
rel="stylesheet" type="text/css">

Chuyển hướng như:

(R: 1 = mẫu)

/template.css

Chỉ có lời giải thích là dài.

Chỉ gặp sự cố này khi một người chạy Chrome (trên máy Mac) đột nhiên ngừng tải tệp CSS. CMD + R hoàn toàn không hoạt động. Tôi không thích những gợi ý ở trên buộc tải lại vĩnh viễn hệ thống sản xuất.

Điều làm việc là thay đổi tên của tệp CSS trong tệp HTML (và tất nhiên đổi tên tệp CSS). Điều này buộc Chrome phải lấy tệp CSS mới nhất.

Nếu bạn đang sử dụng Sublime Text 3, sử dụng hệ thống xây dựng để mở tệp sẽ mở phiên bản mới nhất và cung cấp một cách thuận tiện để tải tệp qua [CTRL + B] Để thiết lập hệ thống xây dựng mở tệp bằng chrome:

1. Chuyển đến 'Công cụ'

2. Di chuột qua 'hệ thống xây dựng'. Ở cuối danh sách được hiển thị, nhấp vào 'Hệ thống xây dựng mới ...'

3. Trong tệp hệ thống xây dựng mới, gõ:

   {"cmd": [ "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]}

** cung cấp đường dẫn được nêu ở trên trong bộ trích dẫn đầu tiên là đường dẫn đến vị trí của chrome trên máy tính của bạn, nếu không chỉ đơn giản là tìm vị trí của chrome và thay thế đường dẫn trong bộ dấu ngoặc kép đầu tiên bằng đường dẫn đến chrome trên máy tính của bạn.

Cách đơn giản nhất để đạt được mục tiêu của bạn là mở một cửa sổ ẩn danh mới trong cửa sổ chrome hoặc riêng tư trong firefox , theo mặc định, không phải bộ đệm.

Bạn có thể sử dụng điều này cho mục đích phát triển để bạn không phải tiêm một số mã ngăn chặn bộ đệm ngẫu nhiên trong dự án của mình.

Nếu bạn đang sử dụng IE thì có thể chúa sẽ giúp bạn!

Ctrl + F5

Shift + F5

Cả hai công việc

Cách dễ nhất trên Safari 11.0 macOS SIERRA 10.12.6: Tải lại trang từ gốc, bạn có thể sử dụng trợ giúp để tìm vị trí trong menu trong đó hoặc bạn có thể sử dụng tùy chọn phím tắt (alt) + lệnh + R.

Chrome/firefox/safari/IE sẽ tải lại toàn bộ trang bằng các phím tắt này

Ctrl+ R (HOẶC) Ctrl+F5

Hy vọng nó có thể giúp bạn!.

Nếu bạn đang sử dụng SiteGround làm công ty lưu trữ của mình và không có giải pháp nào khác hoạt động, hãy thử điều này:

Từ cPanel, đi đến "CÔNG CỤ CẢI THIỆN" và nhấp vào "SuperCacher". Trên trang tiếp theo, nhấp vào nút "Flush Cache".