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

Sofia Emelianova

GitHub

ในแท็บการเปลี่ยนแปลง ให้ติดตามการเปลี่ยนแปลงที่คุณทำกับ

• HTML ในแหล่งที่มาที่เปิดใช้การลบล้างในเครื่อง
• CSS ในองค์ประกอบ > รูปแบบ หรือแหล่งที่มา
• JavaScript ในแหล่งที่มา

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

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

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

เปิดแท็บการเปลี่ยนแปลง

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

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

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

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

   

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

การเปลี่ยนแปลง" width="800" height="460">

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

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

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

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

2. ทำการเปลี่ยนแปลงแหล่งที่มา

   • HTML: ขั้นแรกให้เปิดใช้การลบล้างในเครื่อง จากนั้นทําการเปลี่ยนแปลงในแหล่งที่มา
   • CSS ในองค์ประกอบ > รูปแบบ หรือแหล่งที่มา
   • JavaScript ในแหล่งที่มา

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

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

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

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

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

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

   

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

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

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

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