การเปลี่ยนแปลง: ติดตามการเปลี่ยนแปลง HTML, CSS และ JavaScript

Sofia Emelianova
Sofia Emelianova

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

ภาพรวม

แผงการเปลี่ยนแปลงช่วยให้คุณติดตามการเปลี่ยนแปลงต่อไปนี้ได้

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

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

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

เปิดแผงการเปลี่ยนแปลง

วิธีเปิดแผงการเปลี่ยนแปลง

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

  2. กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดเมนูคำสั่ง

  3. เริ่มพิมพ์ changes เลือกแสดงการเปลี่ยนแปลง แล้วกด Enter

    เรียกใช้คําสั่ง "แสดงการเปลี่ยนแปลง"

หรือคลิก ปรับแต่งและควบคุม DevTools ที่มุมขวาบน > เครื่องมือเพิ่มเติม > การเปลี่ยนแปลง

ตัวเลือกการเปลี่ยนแปลงที่โฟกัสในเมนูแบบเลื่อนลง "เครื่องมือเพิ่มเติม"

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

ดูและทำความเข้าใจการเปลี่ยนแปลง

วิธีดูการเปลี่ยนแปลง

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. ทำการเปลี่ยนแปลงแหล่งที่มา

  3. เปิดแผงการเปลี่ยนแปลง แล้วเลือกไฟล์ทางด้านขวาของแผง

  4. ดูเอาต์พุต diff ที่ไฮไลต์ข้อมูลต่อไปนี้

ความแตกต่างที่ไฮไลต์ในแผงการเปลี่ยนแปลง

แผงการเปลี่ยนแปลงจะแสดงผลลัพธ์ diff ในรูปแบบที่อ่านง่ายโดยอัตโนมัติ คุณจึงไม่ต้องเลื่อนแนวนอนเพื่อดูการเปลี่ยนแปลงในบรรทัดเดียว

คัดลอกการเปลี่ยนแปลง CSS

หากทําการเปลี่ยนแปลง CSS ในองค์ประกอบ > สไตล์ คุณสามารถคัดลอกทั้งหมดได้ด้วยปุ่มเดียว ดังนี้

  1. เปิดแผงการเปลี่ยนแปลง แล้วเลือกไฟล์ CSS ที่คุณทำการเปลี่ยนแปลงทางด้านขวาของแผง

    คัดลอก

  2. คลิกปุ่ม คัดลอก Copy ที่ด้านล่างของแผงการเปลี่ยนแปลง

เปลี่ยนกลับการเปลี่ยนแปลงทั้งหมดที่ทำในไฟล์

วิธีเปลี่ยนกลับการเปลี่ยนแปลงที่ทำในไฟล์

  1. เลือกไฟล์ที่มีการเปลี่ยนแปลงเพื่อเปลี่ยนกลับทางด้านซ้ายมือของแผงการเปลี่ยนแปลง
  2. ในแถบการดำเนินการที่ด้านล่าง ให้คลิก เลิกทำ เปลี่ยนการเปลี่ยนแปลงทั้งหมดกลับเป็นไฟล์ปัจจุบัน

ปุ่มเปลี่ยนกลับ