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

Sofia Emelianova

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

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

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

ข้อจำกัด

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

• ระบบจะปิดใช้แคชเมื่อเปิดใช้การลบล้างในเครื่อง
• เครื่องมือสำหรับนักพัฒนาเว็บจะไม่บันทึกการเปลี่ยนแปลงที่ทำในแผนผัง 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. วางเมาส์เหนือค่าส่วนหัวการตอบกลับแล้ววางเคอร์เซอร์ตรงจุดนั้น

   

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

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

   

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

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

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

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

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

1. คลิก .headers ถัดจากส่วนส่วนหัวการตอบกลับ

   

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

2. แก้ไขไฟล์ .headers โดยทำดังนี้

   

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

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

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

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

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