ใช้แผงการเปลี่ยนแปลงเพื่อติดตามการเปลี่ยนแปลงโค้ดที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บ
ภาพรวม
แผงการเปลี่ยนแปลงช่วยให้คุณติดตามการเปลี่ยนแปลงต่อไปนี้ได้
- HTML ในแหล่งที่มาที่เปิดใช้การลบล้างในเครื่อง
- CSS ในองค์ประกอบ > สไตล์หรือแหล่งที่มา
- JavaScript ในแหล่งที่มา
แผงการเปลี่ยนแปลงจะแสดงเฉพาะการเปลี่ยนแปลงที่คุณทำในเครื่องมือสำหรับนักพัฒนาเว็บเท่านั้น หากคุณโหลดเครื่องมือสำหรับนักพัฒนาเว็บหรือหน้าเว็บซ้ำ การเปลี่ยนแปลงจะหายไป
หากต้องการให้เครื่องมือสําหรับนักพัฒนาเว็บเก็บการเปลี่ยนแปลงไว้เมื่อโหลดหน้าเว็บ ให้ทําตามขั้นตอนในการลบล้างในเครื่อง
หากต้องการให้เครื่องมือสำหรับนักพัฒนาเว็บเขียนการเปลี่ยนแปลงลงในแหล่งที่มาในเครื่อง ให้ทำตามขั้นตอนในหัวข้อแก้ไขและบันทึกไฟล์ด้วย Workspaces
เปิดแผงการเปลี่ยนแปลง
วิธีเปิดแผงการเปลี่ยนแปลง
กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) เพื่อเปิดเมนูคำสั่ง
เริ่มพิมพ์
changesเลือกแสดงการเปลี่ยนแปลง แล้วกด Enter
หรือคลิก 
ปรับแต่งและควบคุม DevTools ที่มุมขวาบน > เครื่องมือเพิ่มเติม > การเปลี่ยนแปลง
โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงแผงการเปลี่ยนแปลงที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บในลิ้นชัก
ดูและทำความเข้าใจการเปลี่ยนแปลง
วิธีดูการเปลี่ยนแปลง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
ทำการเปลี่ยนแปลงแหล่งที่มา
- HTML: ก่อนอื่น ให้เปิดใช้การลบล้างในเครื่อง จากนั้นทําการเปลี่ยนแปลงในแหล่งที่มา
- CSS ในองค์ประกอบ > สไตล์หรือแหล่งที่มา
- JavaScript ในแหล่งที่มา
เปิดแผงการเปลี่ยนแปลง แล้วเลือกไฟล์ทางด้านขวาของแผง
ดูเอาต์พุต
diffที่ไฮไลต์ข้อมูลต่อไปนี้
แผงการเปลี่ยนแปลงจะแสดงผลลัพธ์ diff ในรูปแบบที่อ่านง่ายโดยอัตโนมัติ คุณจึงไม่ต้องเลื่อนแนวนอนเพื่อดูการเปลี่ยนแปลงในบรรทัดเดียว
คัดลอกการเปลี่ยนแปลง CSS
หากทําการเปลี่ยนแปลง CSS ในองค์ประกอบ > สไตล์ คุณสามารถคัดลอกทั้งหมดได้ด้วยปุ่มเดียว ดังนี้
เปิดแผงการเปลี่ยนแปลง แล้วเลือกไฟล์ CSS ที่คุณทำการเปลี่ยนแปลงทางด้านขวาของแผง
คลิกปุ่ม
Copy ที่ด้านล่างของแผงการเปลี่ยนแปลง
เปลี่ยนกลับการเปลี่ยนแปลงทั้งหมดที่ทำในไฟล์
วิธีเปลี่ยนกลับการเปลี่ยนแปลงที่ทำในไฟล์
- เลือกไฟล์ที่มีการเปลี่ยนแปลงเพื่อเปลี่ยนกลับทางด้านซ้ายมือของแผงการเปลี่ยนแปลง
- ในแถบการดำเนินการที่ด้านล่าง ให้คลิก
เปลี่ยนการเปลี่ยนแปลงทั้งหมดกลับเป็นไฟล์ปัจจุบัน
