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

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

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

ตัวอย่างเช่น การลบล้างเฉพาะที่อาจช่วยใน Use Case ต่อไปนี้

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

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

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

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

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

ข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

1. ตั้งค่าการลบล้างในเครื่อง
2. ทำการเปลี่ยนแปลงไฟล์และบันทึกไว้ในเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

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

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

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

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

ติดตามการเปลี่ยนแปลงในท้องถิ่น

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

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

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

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

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

   

   DevTools จะนําคุณไปยังไฟล์ .headers ที่เกี่ยวข้องในแหล่งที่มา > การลบล้าง

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

   

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

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

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

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

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