วิธีบังคับให้เบราว์เซอร์ Chrome โหลดไฟล์. css ขณะทำการดีบักใน Visual Studio

ฉันกำลังแก้ไขไฟล์. css ภายใน Visual Studio 2012 (ในโหมดแก้ไขข้อบกพร่อง) ฉันใช้ Chrome เป็นเบราว์เซอร์ของฉัน เมื่อฉันทำการเปลี่ยนแปลงไฟล์. css ของแอปพลิเคชันภายใน Visual Studio และบันทึกการรีเฟรชหน้าจะไม่โหลดเมื่อมีการเปลี่ยนแปลงที่อัปเดตในไฟล์. css ของฉัน ฉันคิดว่าไฟล์. css ยังคงถูกแคชอยู่

ฉันเหนื่อย:

1. CTRL / F5
2. ใน Visual Studio 2012 ไปที่คุณสมบัติโครงการแท็บเว็บเลือกเริ่มโปรแกรมภายนอกในส่วนเริ่มการทำงานวางหรือเรียกดูเส้นทางสำหรับ Google Chrome (เหมืองคือ C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) ในกล่องอาร์กิวเมนต์บรรทัดคำสั่งให้ใส่ -incognito
3. ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome คลิกที่ไอคอน "เกียร์" เลือก "ปิดใช้งานแคช"

ดูเหมือนจะไม่มีอะไรทำงานได้นอกจากฉันจะหยุดแก้ไขข้อบกพร่องด้วยตนเอง (ปิด Chrome) รีสตาร์ทแอปพลิเคชัน (ในการดีบัก)

มีวิธีใดที่จะบังคับให้ Chrome โหลดการเปลี่ยนแปลง css ทั้งหมดและโหลดไฟล์. css ใหม่ทุกครั้งหรือไม่

อัปเดต:
1. การเปลี่ยนแปลงรูปแบบในบรรทัดในไฟล์. aspx ของฉันจะถูกหยิบขึ้นมาเมื่อฉันรีเฟรช แต่การเปลี่ยนแปลงในไฟล์. css ไม่ได้ 2. เป็นแอพ ASP.NET MVC4 ดังนั้นฉันคลิกที่ไฮเปอร์ลิงก์ซึ่งทำ GET การทำเช่นนั้นฉันไม่เห็นคำขอใหม่สำหรับสไตล์ชีท แต่คลิก F5 ไฟล์. css จะถูกโหลดใหม่และรหัสสถานะ (บนแท็บเครือข่าย) คือ 200

มีวิธีแก้ไขปัญหาที่ซับซ้อนมากขึ้น แต่สิ่งที่ง่ายและง่ายมากก็คือการเพิ่มสตริงข้อความค้นหาแบบสุ่มใน CSS ของคุณ

เช่น src="/css/styles.css?v={random number/string}"

หากคุณกำลังใช้ PHP time()หรือภาษาฝั่งเซิร์ฟเวอร์อื่นคุณสามารถทำเช่นนี้โดยอัตโนมัติด้วย ดังนั้นมันจะเป็นstyles.css?v=<?=time();?>

ด้วยวิธีนี้สตริงแบบสอบถามจะใหม่ทุกครั้ง อย่างที่ฉันพูดมีวิธีแก้ปัญหาที่ซับซ้อนกว่าที่มีความไดนามิกมากกว่า แต่ในจุดประสงค์การทดสอบวิธีนี้เป็นวิธีที่ดีที่สุด (IMO)

วิธีบังคับให้ chrome โหลด css และ js จริง:

ตัวเลือก Windows 1: CTRL+ SHIFT+ R
ตัวเลือก Windows 2: SHIFT+F5

OS X: ⌘+ SHIFT+R

อัปเดตตามที่ระบุโดย @PaulSlocum ในความคิดเห็น (และอีกมากมายที่ยืนยันแล้ว)

คำตอบเดิม:

Chrome เปลี่ยนพฤติกรรม Ctrl+ Rจะทำมัน

บน OS X: ⌘+R

หากคุณมีปัญหาในการโหลดไฟล์ css / js ใหม่ให้เปิดตัวตรวจสอบ ( CTRL+ SHIFT+ C) ก่อนทำการโหลดซ้ำ

[อ่านข้อมูลล่าสุดด้านล่าง]

วิธีที่ง่ายที่สุดที่ฉันพบคือการตั้งค่า Chrome DevTools คลิกที่ไอคอนรูปเฟือง (หรือจุดแนวตั้ง 3 จุดในเวอร์ชันที่ใหม่กว่า) ที่ด้านบนขวาของ DevTools เพื่อเปิดกล่องโต้ตอบ "การตั้งค่า" ในกล่องกาเครื่องหมาย: "ปิดใช้งานแคช (ในขณะที่ DevTools เปิดอยู่)"

UPDATE: ตอนนี้การตั้งค่านี้ถูกย้าย สามารถพบได้ในแท็บ "เครือข่าย" เป็นช่องทำเครื่องหมายระบุว่า "ปิดใช้งานแคช"

คุณกำลังจัดการกับปัญหาแคชเบราว์เซอร์

ปิดใช้งานแคชในหน้านั้น ที่จะไม่บันทึกไฟล์สนับสนุนหน้าในเบราว์เซอร์ / แคช

<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" />

รหัสนี้คุณต้องการ / จำเป็นต้องแทรกในheadแท็กของหน้าที่คุณกำลังดีบั๊กหรือในheadแท็กของ master pageไซต์ของคุณ

นี่จะไม่อนุญาตให้เบราว์เซอร์ไฟล์แคชในที่สุดไฟล์จะไม่ถูกจัดเก็บในไฟล์ชั่วคราวของเบราว์เซอร์ดังนั้นจึงไม่มีแคชดังนั้นจึงไม่จำเป็นต้องโหลดซ้ำ :)

ฉันแน่ใจว่าสิ่งนี้จะทำ :)

ในกรณีของฉันในการตั้งค่า Chrome DevTools เพียงตั้งค่า "ปิดใช้งานแคช (ในขณะที่ DevTools เปิดอยู่)" ไม่ทำงานต้องตรวจสอบ "เปิดใช้งานแผนที่แหล่งที่มาของ CSS" และ "สร้าง CSS ที่โหลดอัตโนมัติใหม่" ซึ่งแสดงอยู่ในแหล่งที่มา กลุ่มเพื่อทำให้ปัญหาแคชนี้หายไป

กด+SHIFTF5

มันใช้งานได้สำหรับฉันด้วย Chrome รุ่น 54

ฉันประสบปัญหาเดียวกันที่นี่! แต่ฉันแน่ใจว่าความละเอียดของฉันดีกว่าตัวอย่างด้านบนทั้งหมดทำสิ่งนี้

1. ดึงคอนโซลนักพัฒนาซอฟต์แวร์ Chrome ขึ้นมาโดยกด F12
2. คลิกขวาที่ปุ่มโหลดที่ด้านบนของเบราว์เซอร์แล้วเลือก "Empty Cache และ Hard Reload"

แค่นี้แหละ!

ด้วย macOS ฉันสามารถบังคับให้ Chrome โหลดไฟล์ CSS อีกครั้งด้วยการทำ

⌘+ SHIFT+R

พบคำตอบนี้ฝังอยู่ในความคิดเห็นที่นี่แต่สมควรได้รับการเปิดเผยมากขึ้น

Chrome รุ่นปัจจุบัน (55.x) ไม่ได้โหลดทรัพยากรทั้งหมดเมื่อคุณโหลดหน้าเว็บอีกครั้ง (Command + R) - และไม่มีประโยชน์สำหรับการดีบักไฟล์. css

Command + R ทำงานได้ดีหากคุณต้องการดีบักเฉพาะไฟล์. html, .php, .etc และเร็วขึ้นเพราะทำงานกับทรัพยากรโลคัล / แคช (.css, .js) ในการลบแคชของเบราว์เซอร์ด้วยตนเองสำหรับการแก้จุดบกพร่องซ้ำแต่ละครั้งจะไม่สะดวก

ขั้นตอนการบังคับโหลดไฟล์. css บน Mac (Keyboard Shortcut / Chrome): Command + Shift + R

ฉันใช้Edgeรุ่น 81.0.416.64 (รุ่นเป็นทางการ) (64 บิต) และเป็นพื้นฐานของโครงการโอเพ่นซอร์ส Chromium

กดF12เพื่อเข้าสู่เครื่องมือ Dev
คลิกแท็บเครือข่าย
ตรวจสอบปิดใช้งานแคช

ฉันรู้ว่ามันเป็นคำถามเก่า แต่ถ้าใครยังคงดูวิธีการโหลดไฟล์ css / js ภายนอกไฟล์เดียววิธีที่ง่ายที่สุดใน Chrome ตอนนี้คือ:

1. ไปที่แท็บเครือข่ายใน DevTools
2. คลิกขวาที่ทรัพยากรและเลือกReplay XHRเพื่อทำซ้ำการร้องขอ

ตรวจสอบให้แน่ใจว่าได้เลือกตัวเลือกปิดใช้งานแคชเพื่อบังคับให้โหลดซ้ำ

สำหรับ macOS Chrome:

1. เปิดเครื่องมือนักพัฒนาซอฟต์แวร์cmd+ alt+i
2. คลิกจุดสามจุดที่มุมขวาบนในเครื่องมือของนักพัฒนาซอฟต์แวร์
3. คลิกการตั้งค่า
4. เลื่อนลงไปที่ Network
5. เปิดใช้งานDisable cache (while DevTools is open)ดูภาพหน้าจอ:

เหตุใดจึงจำเป็นต้องรีเฟรชทั้งหน้า เพียงรีเฟรชไฟล์ css เท่านั้นโดยไม่ต้องโหลดหน้าซ้ำ มันจะมีประโยชน์มากเมื่อคุณต้องรอการตอบกลับจาก DB เมื่อคุณได้รับข้อมูลจากฐานข้อมูลและเติมข้อมูลหน้านั้นให้แก้ไขไฟล์ css ของคุณแล้วโหลดซ้ำใน Chrome (หรือใน Firefox) ต้องการทำเช่นนั้นคุณต้องติดตั้งส่วนขยาย CSS Reloader เวอร์ชั่น Firefox ก็มีให้เช่นกัน

คุณสามารถคัดลอกวางสคริปต์นี้ในคอนโซล Chrome และบังคับให้สคริปต์ CSS โหลดซ้ำทุก 3 วินาที บางครั้งฉันพบว่ามีประโยชน์เมื่อฉันปรับปรุง 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);

ฉันแก้ไขด้วยเคล็ดลับง่าย ๆ นี้

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

ยังคงเป็นปัญหา

การใช้พารามิเตอร์เช่น "..css? something = random-value" ไม่มีการเปลี่ยนแปลงใด ๆ ในประสบการณ์การสนับสนุนลูกค้าของฉัน การเปลี่ยนชื่อใช้งานได้เท่านั้น

อีกอย่างคือการเปลี่ยนชื่อไฟล์ ฉันใช้ URL Rewrite ใน IIS บางครั้งการเขียนซ้ำของ Isapi ของ Helicon

เพิ่มกฎใหม่

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

หมายเหตุ: ฉันขอสงวนการใช้ตัวพิมพ์เล็กเพื่อแยกชื่อออกจากหมายเลขสุ่ม อาจเป็นอย่างอื่น

ตัวอย่าง:

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

(ไม่มีโฟลเดอร์สไตล์มันเป็นเพียงส่วนหนึ่งของรูปแบบ)

รหัสออกเป็น:

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

เปลี่ยนเส้นทางเป็น:

(R: 1 = เทมเพลต)

/template.css

คำอธิบายยาวเท่านั้น

เพิ่งมีปัญหานี้เมื่อมีคนใช้ Chrome (บน Mac) หยุดโหลดไฟล์ CSS ในทันที CMD + R ไม่ทำงานเลย ฉันไม่ชอบคำแนะนำด้านบนที่บังคับให้โหลดซ้ำอย่างถาวรในระบบการผลิต

สิ่งที่ใช้ได้ผลคือเปลี่ยนชื่อไฟล์ CSS ในไฟล์ HTML (และเปลี่ยนชื่อไฟล์ CSS แน่นอน) สิ่งนี้บังคับให้ Chrome ต้องรับไฟล์ CSS ล่าสุด

หากคุณใช้ Sublime Text 3 การใช้ระบบบิลด์เพื่อเปิดไฟล์จะเป็นการเปิดเวอร์ชันล่าสุดและเป็นวิธีที่สะดวกในการโหลดไฟล์ผ่าน [CTRL + B] เพื่อตั้งค่าระบบบิลด์ที่เปิดไฟล์ใน chrome:

1. ไปที่ 'เครื่องมือ'

2. เลื่อนเม้าส์ของคุณไปที่ 'สร้างระบบ' ที่ด้านล่างของรายการให้คลิก 'ระบบสร้างใหม่ ... '

3. ในระบบไฟล์ build ใหม่ให้พิมพ์สิ่งนี้:

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

** หากเส้นทางที่ระบุไว้ข้างต้นในชุดอัญประกาศชุดแรกเป็นเส้นทางที่ Chrome ตั้งอยู่บนคอมพิวเตอร์ของคุณหากไม่พบตำแหน่งของ chrome และแทนที่เส้นทางในชุดคำพูดชุดแรกด้วยเส้นทางไปที่ chrome บนคอมพิวเตอร์ของคุณ

วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายของคุณคือการเปิดหน้าต่างใหม่ที่ไม่ระบุตัวตนใน Chrome หรือหน้าต่างส่วนตัวของคุณใน Firefoxซึ่งตามค่าเริ่มต้นไม่ใช่แคช

คุณสามารถใช้สิ่งนี้เพื่อจุดประสงค์ในการพัฒนาเพื่อที่คุณจะได้ไม่ต้องใส่รหัสป้องกันแคชแบบสุ่มในโครงการของคุณ

หากคุณใช้ IE พระเจ้าอาจช่วยคุณได้!

Ctrl + F5

Shift + F5

ทั้งงาน

วิธีที่ง่ายที่สุดบน Safari 11.0 macOS SIERRA 10.12.6: โหลดหน้าซ้ำจากจุดเริ่มต้นคุณสามารถใช้ความช่วยเหลือในการค้นหาตำแหน่งที่อยู่ในเมนูหรือคุณสามารถใช้ตัวเลือกทางลัด (alt) + คำสั่ง + R

Chrome/firefox/safari/IE จะโหลดหน้าทั้งหมดใหม่โดยใช้ทางลัดเหล่านี้

Ctrl+ R (OR) Ctrl+F5

หวังว่ามันจะช่วยคุณได้!

หากคุณใช้ SiteGround เป็น บริษัท โฮสติ้งของคุณและไม่มีวิธีแก้ไขปัญหาอื่นใดให้ลองใช้งาน

จาก cPanel ไปที่ "เครื่องมือปรับปรุงเว็บไซต์" และคลิก "SuperCacher" ในหน้าต่อไปนี้คลิกปุ่ม "ล้างข้อมูลแคช"