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