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

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

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

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

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

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

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

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

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

ข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ลบล้าง 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 รีเฟรชหน้าเพื่อใช้การเปลี่ยนแปลง