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

Sofia Emelianova
Sofia Emelianova

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

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

เช่น การลบล้างในเครื่องจะเป็นประโยชน์ในกรณีการใช้งานต่อไปนี้

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

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

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

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

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

ข้อจำกัด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวเลือก "เปิดในโฟลเดอร์ที่เก็บ"

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

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

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

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

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

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

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

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

    การแก้ไขค่าส่วนหัวที่มีอยู่ การเพิ่มค่าใหม่ และนำการลบล้างออก

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

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

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

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

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

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

    ส่วนหัวจะลบล้างลิงก์ที่อยู่ถัดจากส่วนส่วนหัวการตอบกลับ

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

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

    กำลังแก้ไขไฟล์ .headers

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

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

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

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

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