เมื่อใช้การลบล้างในเครื่อง คุณจะเลิกบล็อกเวิร์กโฟลว์ได้โดยสร้างต้นแบบและทดสอบการเปลี่ยนแปลงและการแก้ไขโดยไม่ต้องรอให้มีแบ็กเอนด์ บุคคลที่สาม หรือ API มารองรับ
ใช้การลบล้างในเครื่องเพื่อจำลองทรัพยากรระยะไกลแม้ว่าคุณจะไม่มีสิทธิ์เข้าถึงก็ตาม คุณสามารถจำลองการตอบกลับคำขอและไฟล์ต่างๆ เช่น ส่วนหัวการตอบกลับ HTTP และเนื้อหาเว็บ รวมถึง XHR และคำขอดึงข้อมูล
เช่น การลบล้างในเครื่องจะเป็นประโยชน์ในกรณีการใช้งานต่อไปนี้
- Mock API และทดสอบการแก้ไข API ก่อนการใช้จริง
- สร้างต้นแบบการออกแบบ UI ใหม่ ถ้าคุณทราบโครงสร้างข้อมูลที่แบ็กเอนด์จะใช้
- ทดสอบการแก้ไขประสิทธิภาพ เช่น กำจัด CLS เพื่อให้แน่ใจได้ว่าการแก้ไขเหล่านั้นจะมีนัยสำคัญ
การลบล้างในเครื่องยังช่วยให้คุณเก็บการเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไว้ในการโหลดหน้าเว็บได้
วิธีการทำงาน
- เมื่อทำการเปลี่ยนแปลงในเครื่องมือสำหรับนักพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกสำเนาของไฟล์ที่แก้ไขลงในโฟลเดอร์ที่คุณระบุ
- เมื่อคุณโหลดหน้านี้ซ้ำ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงไฟล์ในเครื่องที่แก้ไขแทนทรัพยากรเครือข่าย
นอกจากนี้คุณยังบันทึกการเปลี่ยนแปลงลงในไฟล์ต้นฉบับได้โดยตรงอีกด้วย โปรดดูหัวข้อแก้ไขและบันทึกไฟล์ด้วยพื้นที่ทำงาน
ข้อจำกัด
การลบล้างในเครื่องใช้ได้กับส่วนหัวการตอบกลับของเครือข่ายและสำหรับไฟล์ส่วนใหญ่ รวมถึงคำขอ XHR และการดึงข้อมูล โดยมีข้อยกเว้นบางประการดังนี้
- ระบบจะปิดใช้แคชเมื่อเปิดใช้การลบล้างในเครื่อง
- เครื่องมือสำหรับนักพัฒนาเว็บจะไม่บันทึกการเปลี่ยนแปลงที่ทำในแผนผัง DOM ของแผงองค์ประกอบ
- หากคุณแก้ไข CSS ในแผงรูปแบบและแหล่งที่มาของ CSS นั้นเป็นไฟล์ HTML เครื่องมือสำหรับนักพัฒนาเว็บจะไม่บันทึกการเปลี่ยนแปลง
แต่จะแก้ไขไฟล์ HTML ได้ในแผงแหล่งที่มาแทน
ตั้งค่าการลบล้างในเครื่อง
คุณลบล้างเนื้อหาเว็บหรือส่วนหัวการตอบกลับได้ทันทีในแผงเครือข่าย โดยทำดังนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ ไปที่แผงเครือข่าย คลิกขวาที่คำขอที่คุณต้องการลบล้าง เลือกลบล้างส่วนหัวหรือลบล้างเนื้อหาจากเมนูแบบเลื่อนลง
- หากคุณยังไม่ได้ตั้งค่าการลบล้างในเครื่อง แถบการดำเนินการด้านบนจะแสดงข้อความแจ้งให้คุณดำเนินการต่อไปนี้
- เลือกโฟลเดอร์เพื่อจัดเก็บไฟล์การลบล้าง
- คลิกอนุญาตเพื่อให้สิทธิ์เข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บ
- เลือกโฟลเดอร์เพื่อจัดเก็บไฟล์การลบล้าง
- หากคุณตั้งค่าการลบล้างในเครื่องไว้แต่ปิดใช้ เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดใช้โดยอัตโนมัติ
เมื่อตั้งค่าและเปิดใช้การลบล้างภายในเครื่องแล้ว เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังสิ่งต่อไปนี้โดยขึ้นอยู่กับสิ่งที่คุณกำลังจะลบล้าง
- แผงแหล่งที่มาซึ่งให้คุณเปลี่ยนแปลงเนื้อหาเว็บได้
- เครื่องมือแก้ไขในเครือข่าย > ส่วนหัว > ส่วนหัวการตอบกลับ เพื่อให้คุณเปลี่ยนแปลงส่วนหัวการตอบกลับได้
หากต้องการปิดใช้การลบล้างในเครื่องชั่วคราวหรือลบไฟล์การลบล้างทั้งหมด ให้ไปที่แหล่งที่มา > การลบล้าง และล้างช่องทำเครื่องหมาย เปิดใช้การลบล้างในเครื่อง หรือคลิก ล้างตามลำดับ
หากต้องการลบไฟล์ลบล้างเดียวหรือการลบล้างทั้งหมดในโฟลเดอร์ ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ในแหล่งที่มา > การลบล้าง เลือกลบ แล้วคลิกตกลงในกล่องโต้ตอบ การดำเนินการนี้ยกเลิกไม่ได้และคุณจะต้องสร้างการลบล้างที่ถูกลบอีกครั้งด้วยตนเอง
หากต้องการดูการลบล้างทั้งหมดอย่างรวดเร็ว ในแผงเครือข่าย ให้คลิกขวาที่คำขอแล้วเลือกแสดงการลบล้างทั้งหมด จากนั้นเครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังแหล่งที่มา > การลบล้าง
ลบล้างเนื้อหาเว็บ
วิธีลบล้างเนื้อหาเว็บ
- ตั้งค่าการลบล้างในเครื่อง
- ทำการเปลี่ยนแปลงไฟล์และบันทึกไว้ในเครื่องมือสำหรับนักพัฒนาเว็บ
เช่น คุณแก้ไขไฟล์ในแหล่งที่มาหรือ CSS ในองค์ประกอบ > รูปแบบได้ เว้นแต่ CSS จะอยู่ในไฟล์ HTML
เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกไฟล์ที่แก้ไขแล้วไว้ในแหล่งที่มา > การลบล้าง และแสดงไอคอน 
ถัดจากไฟล์ที่ถูกลบล้างในแผงและแผงที่เกี่ยวข้อง ได้แก่ องค์ประกอบ > รูปแบบ เครือข่าย และแหล่งที่มา > การลบล้าง
นอกจากนี้ แผงเครือข่ายจะแสดงไอคอนจุดสีม่วงพร้อมเคล็ดลับเครื่องมือข้างแท็บการตอบกลับของคำขอที่มีเนื้อหาเว็บที่ถูกลบล้าง
ลบล้าง XHR หรือคำขอดึงข้อมูลเพื่อจำลองทรัพยากรระยะไกล
เมื่อใช้การลบล้างในเครื่อง คุณไม่จำเป็นต้องเข้าถึงแบ็กเอนด์และไม่ต้องรอให้ระบบรองรับการเปลี่ยนแปลง จำลองและทดสอบได้ทันที:
- ตั้งค่าการลบล้างในเครื่อง
- ในเครือข่าย ให้กรองคำขอ XHR/fetch ค้นหาคำขอที่คุณต้องการ คลิกขวาที่คำขอ แล้วเลือกลบล้างเนื้อหา
- ทำการเปลี่ยนแปลงข้อมูลที่ดึงมาและบันทึกไฟล์
- รีเฟรช หน้าเว็บและสังเกตการเปลี่ยนแปลงที่ทำ
หากต้องการเรียนรู้เกี่ยวกับเวิร์กโฟลว์นี้ ให้ดูวิดีโอต่อไปนี้
ติดตามการเปลี่ยนแปลงในเครื่อง
คุณติดตามการเปลี่ยนแปลงทั้งหมดที่ทำกับเนื้อหาเว็บได้ในที่เดียว ซึ่งก็คือแท็บลิ้นชักการเปลี่ยนแปลง
นอกจากนี้ในแหล่งที่มา > การลบล้าง คุณสามารถคลิกขวาที่ไฟล์ที่บันทึกไว้และเลือกเปิดในโฟลเดอร์ที่มีจากเมนูบริบทได้ ซึ่งจะเป็นการเปิดโฟลเดอร์ที่คุณเลือกในระหว่างoverrides setup ซึ่งคุณสามารถแก้ไขไฟล์ได้ด้วยตัวแก้ไขโค้ดที่คุณชื่นชอบ
ลบล้างส่วนหัวการตอบกลับ HTTP
จากแผงเครือข่าย คุณจะลบล้างส่วนหัวการตอบกลับของ HTTP ได้โดยไม่ต้องเข้าถึงเว็บเซิร์ฟเวอร์
การลบล้างส่วนหัวการตอบกลับจะช่วยให้คุณสร้างต้นแบบการแก้ไขภายในสำหรับส่วนหัวต่างๆ ได้ ซึ่งรวมถึงแต่ไม่จำกัดเพียงรายการต่อไปนี้
วิธีลบล้างส่วนหัวการตอบกลับ
- ตั้งค่าการลบล้างในเครื่อง แล้วตรวจสอบหน้าสาธิตนี้
- ไปที่เครือข่าย ค้นหาคำขอ คลิกขวาที่คำขอ แล้วเลือกลบล้างส่วนหัว เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังเครื่องมือแก้ไขส่วนหัว > ส่วนหัวการตอบกลับ
วางเมาส์เหนือค่าส่วนหัวการตอบกลับแล้ววางเคอร์เซอร์ตรงจุดนั้น
หรือหากต้องการเปิดใช้เครื่องมือแก้ไขส่วนหัวการตอบกลับ ให้วางเมาส์เหนือค่าส่วนหัวการตอบกลับ แล้วคลิกแก้ไข แก้ไข
แก้ไขหรือเพิ่มส่วนหัวใหม่
- หากต้องการแก้ไขค่าส่วนหัว ให้คลิกค่านั้น
- หากต้องการเพิ่มส่วนหัวใหม่ ให้คลิก เพิ่มส่วนหัว
- หากต้องการนำการลบล้างส่วนหัวออก ให้คลิก ข้างรายการนั้น การดำเนินการนี้จะนำส่วนหัวที่คุณเพิ่มหรือเปลี่ยนค่าที่แก้ไขแล้วกลับไปเป็นค่าเดิม
แผงเครือข่ายจะไฮไลต์ส่วนหัวที่แก้ไขเป็นสีเขียว และนําการลบล้างออกด้วยสีแดงและขีดฆ่า นอกจากนี้ แท็บส่วนหัวจะแสดงไอคอนจุดสีม่วงพร้อมเคล็ดลับเครื่องมือเพื่อแจ้งให้ทราบว่ามีการลบล้างส่วนหัว
รีเฟรชหน้าเว็บเพื่อใช้การเปลี่ยนแปลง
แก้ไขการลบล้างส่วนหัวการตอบกลับทั้งหมด
วิธีแก้ไขการลบล้างส่วนหัวทั้งหมดในที่เดียว
คลิก
.headers ถัดจากส่วนส่วนหัวการตอบกลับ
เครื่องมือสำหรับนักพัฒนาเว็บจะนำคุณไปยังไฟล์
.headersที่เกี่ยวข้องในแหล่งที่มา > การลบล้างแก้ไขไฟล์
.headersโดยทำดังนี้
หากต้องการเพิ่มกฎการลบล้างใหม่ ให้คลิกเพิ่มกฎการลบล้าง กฎในที่นี้คือชุดของส่วนหัวและค่า รวมทั้งมีคำขอเดียวหรือหลายคำขอที่จะนำมาใช้
หากต้องการเพิ่มคู่ส่วนหัว-ค่าลงในกฎ ให้วางเมาส์เหนือคู่อื่นแล้วคลิก
หากต้องการเปลี่ยนกลับค่าส่วนหัว ให้นำส่วนหัวหรือกฎที่เพิ่มออก วางเมาส์เหนือส่วนหัวหรือกฎนั้นแล้วคลิก
บันทึกไฟล์
.headersด้วย Command / Control + Sรีเฟรชหน้าเว็บเพื่อใช้การเปลี่ยนแปลง