ลบล้างเนื้อหาเว็บและส่วนหัวการตอบกลับ HTTP ภายในเครื่อง

Sofia Emelianova

การลบล้างในเครื่องช่วยให้คุณปลดล็อกเวิร์กโฟลว์ได้ด้วยการสร้างต้นแบบและทดสอบการเปลี่ยนแปลงและการแก้ไขโดยไม่ต้องรอให้แบ็กเอนด์ บุคคลที่สาม หรือ API รองรับ

ใช้การลบล้างในเครื่องเพื่อจำลองทรัพยากรระยะไกลแม้ว่าคุณจะไม่มีสิทธิ์เข้าถึงก็ตาม คุณจำลองการตอบกลับคำขอและไฟล์ต่างๆ ได้ เช่น ส่วนหัวการตอบกลับ HTTP และเนื้อหาเว็บ รวมถึงคำขอ XHR และคำขอ Fetch

ตัวอย่างเช่น การลบล้างในระดับท้องถิ่นช่วยได้ในกรณีการใช้งานต่อไปนี้

• แก้ไข API จำลองและ API ทดสอบก่อนที่จะนำไปใช้จริง
• สร้างต้นแบบการออกแบบ UI ใหม่หากคุณทราบโครงสร้างข้อมูลที่แบ็กเอนด์จะใช้แล้ว
• ทดสอบการแก้ไขประสิทธิภาพ เช่น กำจัด CLS เพื่อให้แน่ใจล่วงหน้าว่าการแก้ไขเหล่านั้นมีความสำคัญ

หมายเหตุ: ดูวิดีโอด้านบนเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งาน

การลบล้างในเครื่องยังช่วยให้คุณเก็บการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไว้ได้เมื่อโหลดหน้าเว็บ

วิธีการทำงาน

• เมื่อคุณทำการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกสำเนาของไฟล์ที่แก้ไขแล้วไปยังโฟลเดอร์ที่คุณระบุ
• เมื่อโหลดหน้าเว็บซ้ำ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไฟล์ที่แก้ไขแล้วในเครื่องแทนที่จะเป็นทรัพยากรในเครือข่าย

หมายเหตุ: การลบล้างในเครื่องจะปิดใช้แคชโดยอัตโนมัติ

นอกจากนี้ คุณยังบันทึกการเปลี่ยนแปลงลงในไฟล์ต้นฉบับได้โดยตรงด้วย ดูแก้ไขและบันทึกไฟล์ด้วย Workspace

ข้อจำกัด

การลบล้างในเครื่องใช้ได้กับส่วนหัวของการตอบกลับของเครือข่ายและไฟล์ส่วนใหญ่ รวมถึงคำขอ XHR และคำขอ Fetch โดยมีข้อยกเว้น 2 รายการดังนี้

• ระบบจะปิดใช้แคชเมื่อเปิดใช้การลบล้างในเครื่อง
• DevTools จะไม่บันทึกการเปลี่ยนแปลงที่ทำในแผนผัง DOM ของแผงองค์ประกอบ
• หากคุณแก้ไข CSS ในแผงรูปแบบ และแหล่งที่มาของ CSS นั้นเป็นไฟล์ HTML ทาง DevTools จะไม่บันทึกการเปลี่ยนแปลง

แต่คุณแก้ไขไฟล์ HTML ในแผงแหล่งที่มาได้

ตั้งค่าการลบล้างในเครื่อง

คุณลบล้างเนื้อหาเว็บหรือส่วนหัวของการตอบกลับได้ทันทีในแผงเครือข่าย

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ ไปที่แผงเครือข่าย คลิกขวาที่คำขอที่ต้องการลบล้าง เลือกลบล้างส่วนหัวหรือลบล้างเนื้อหาจากเมนูแบบเลื่อนลง
2. หากยังไม่ได้ตั้งค่าการลบล้างในเครื่อง ในแถบการดำเนินการที่ด้านบน DevTools จะแจ้งให้คุณทำสิ่งต่อไปนี้
   1. เลือกโฟลเดอร์ที่จะใช้จัดเก็บไฟล์ที่ลบล้าง
   2. คลิกอนุญาตเพื่อให้สิทธิ์การเข้าถึงแก่ DevTools
3. หากคุณตั้งค่าการลบล้างในเครื่องไว้แต่ปิดใช้ เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดใช้การลบล้างเหล่านั้นโดยอัตโนมัติ

4. เมื่อตั้งค่าและเปิดใช้การลบล้างในเครื่องแล้ว เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังส่วนต่อไปนี้ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณกำลังจะลบล้าง

   • แผงแหล่งที่มาเพื่อให้คุณเปลี่ยนแปลงเนื้อหาเว็บได้
   • เอดิเตอร์ในเครือข่าย > ส่วนหัว > ส่วนหัวของการตอบกลับเพื่อให้คุณทำการเปลี่ยนแปลงส่วนหัวของการตอบกลับได้

หากต้องการปิดใช้การลบล้างในเครื่องชั่วคราวหรือลบไฟล์การลบล้างทั้งหมด ให้ไปที่แหล่งที่มา > การลบล้าง แล้วยกเลิกการเลือกช่องทำเครื่องหมาย เปิดใช้การลบล้างในเครื่อง หรือคลิก ล้าง ตามลำดับ

หากต้องการลบไฟล์แทนที่รายการเดียวหรือการแทนที่ทั้งหมดในโฟลเดอร์ ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ในแหล่งข้อมูล > การแทนที่ เลือกลบ แล้วคลิกตกลงในกล่องโต้ตอบ การดำเนินการนี้จะยกเลิกไม่ได้ และคุณจะต้องสร้างการลบล้างที่ลบไปแล้วขึ้นมาใหม่ด้วยตนเอง

หากต้องการดูการลบล้างทั้งหมดอย่างรวดเร็ว ให้คลิกขวาที่คำขอในแผงเครือข่าย แล้วเลือกแสดงการลบล้างทั้งหมด เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังแหล่งที่มา > การลบล้าง

ลบล้างเนื้อหาเว็บ

วิธีลบล้างเนื้อหาเว็บ

1. ตั้งค่าการลบล้างในเครื่อง
2. ทำการเปลี่ยนแปลงในไฟล์และบันทึกใน DevTools

หมายเหตุ: คุณจะลบล้างไฟล์ที่แมปแหล่งที่มาไม่ได้ หากคลิกขวาที่คำขอในแผงเครือข่าย แล้วเลือกลบล้างเนื้อหา DevTools จะแสดงกล่องโต้ตอบที่นำคุณไปยังไฟล์ต้นฉบับแทน

เช่น คุณสามารถแก้ไขไฟล์ในแหล่งที่มาหรือ CSS ในองค์ประกอบ > รูปแบบได้ เว้นแต่ CSS จะอยู่ในไฟล์ HTML

DevTools จะบันทึกไฟล์ที่แก้ไข แสดงรายการใน Sources > Overrides และแสดงไอคอน ข้างไฟล์ที่ถูกแทนที่ในแผงและบานหน้าต่างที่เกี่ยวข้อง: Elements > Styles, Network และ Sources > Overrides

นอกจากนี้ แผงเครือข่ายยังแสดงไอคอนจุดสีม่วงพร้อมเคล็ดลับเครื่องมือข้างแท็บการตอบกลับของคำขอที่มีเนื้อหาเว็บที่ลบล้าง

ลบล้างคำขอ XHR หรือคำขอการดึงข้อมูลเพื่อจำลองทรัพยากรระยะไกล

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

1. ตั้งค่าการลบล้างในเครื่อง
2. ในเครือข่าย ให้กรองคำขอ XHR/fetch ค้นหาคำขอที่ต้องการ คลิกขวา แล้วเลือกลบล้างเนื้อหา
3. แก้ไขข้อมูลที่ดึงมาแล้วบันทึกไฟล์
4. รีเฟรชหน้าเว็บและดูการเปลี่ยนแปลงที่ใช้

ดูเวิร์กโฟลว์นี้ได้จากวิดีโอต่อไปนี้

ติดตามการเปลี่ยนแปลงในเครื่อง

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

นอกจากนี้ ในแหล่งที่มา > การลบล้าง คุณสามารถคลิกขวาที่ไฟล์ที่บันทึกไว้ แล้วเลือกเปิดในโฟลเดอร์ที่มีจากเมนูตามบริบท ซึ่งจะเปิดโฟลเดอร์ที่คุณเลือกในระหว่างการตั้งค่าการลบล้าง คุณสามารถแก้ไขไฟล์ด้วยโปรแกรมแก้ไขโค้ดที่ชื่นชอบได้

ลบล้างส่วนหัวการตอบกลับ HTTP

จากแผงเครือข่าย คุณสามารถลบล้างส่วนหัวการตอบกลับ HTTP ได้โดยไม่ต้องเข้าถึงเว็บเซิร์ฟเวอร์

การลบล้างส่วนหัวของการตอบกลับช่วยให้คุณสร้างต้นแบบการแก้ไขส่วนหัวต่างๆ ในเครื่องได้ ซึ่งรวมถึงแต่ไม่จำกัดเพียงส่วนหัวต่อไปนี้

• ส่วนหัวของกลไกการแชร์ทรัพยากรข้ามโดเมน (CORS)
• ส่วนหัวของนโยบายสิทธิ์
• ส่วนหัวของการแยกแบบข้ามต้นทาง

วิธีลบล้างส่วนหัวการตอบกลับ

1. ตั้งค่าการลบล้างในเครื่อง แล้วเปิดหน้าเว็บที่ต้องการแก้ไขข้อบกพร่อง
2. ไปที่เครือข่าย ค้นหารายการคำขอ คลิกขวา แล้วเลือกลบล้างส่วนหัว DevTools จะนำคุณไปยังโปรแกรมแก้ไขส่วนหัว > ส่วนหัวการตอบกลับ

3. วางเมาส์เหนือค่าส่วนหัวการตอบกลับและวางเคอร์เซอร์ไว้ตรงนั้น

   

   หรือหากต้องการเปิดใช้เครื่องมือแก้ไขส่วนหัวของการตอบกลับ ให้วางเมาส์เหนือค่าส่วนหัวของการตอบกลับ แล้วคลิกแก้ไข แก้ไข

4. แก้ไขหรือเพิ่มส่วนหัวใหม่

   หมายเหตุ: ตัวอย่างนี้เพิ่มส่วนหัว Access-Control-Allow-Origin: * เพื่อกำจัดข้อผิดพลาด CORS

   

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

   แผงเครือข่ายจะไฮไลต์ส่วนหัวที่แก้ไขเป็นสีเขียวและการลบล้างที่นำออกเป็นสีแดงและขีดทับ นอกจากนี้ แท็บส่วนหัวจะแสดงไอคอนจุดสีม่วงพร้อมเคล็ดลับเครื่องมือเพื่อแจ้งให้คุณทราบว่ามีการลบล้างส่วนหัว

5. รีเฟรชหน้าเว็บเพื่อใช้การเปลี่ยนแปลง

แก้ไขการลบล้างส่วนหัวการตอบกลับทั้งหมด

วิธีแก้ไขการลบล้างส่วนหัวทั้งหมดในที่เดียว

1. คลิก .headers ข้างส่วนส่วนหัวของคำตอบ

   

   DevTools จะนำคุณไปยังไฟล์ .headers ที่เกี่ยวข้องใน Sources > Overrides

2. แก้ไขไฟล์ .headers

   

   • หากต้องการเพิ่มกฎการลบล้างใหม่ ให้คลิกเพิ่มกฎการลบล้าง กฎในที่นี้คือชุดของส่วนหัวและค่า รวมถึงคำขอเดียวหรือหลายคำขอที่จะใช้กฎ

     หมายเหตุ: คุณใช้ไวลด์การ์ดเพื่อระบุคำขอหลายรายการพร้อมกันได้ กำหนดอักขระหลายตัวด้วย * และอักขระตัวเดียวด้วย ?

   • หากต้องการเพิ่มคู่ส่วนหัว-ค่าลงในกฎ ให้วางเมาส์เหนือคู่อื่นแล้วคลิก

   • หากต้องการเปลี่ยนค่าส่วนหัวกลับ ให้นำส่วนหัวหรือกฎที่เพิ่มออก วางเมาส์เหนือส่วนหัวหรือกฎนั้น แล้วคลิก

3. บันทึกไฟล์ .headers โดยกด Command / Control + S

4. รีเฟรชหน้าเว็บเพื่อใช้การเปลี่ยนแปลง