← กลับไปยังคุณสมบัติ
Free

Diff Tool

Diff Tool ช่วยเปรียบเทียบข้อความสองชุดและไฮไลต์บรรทัดที่เพิ่มขึ้น, ลบออก และบรรทัดที่ไม่เปลี่ยนแปลงด้วยสีที่ต่างกัน รองรับการแสดงผลทั้งแบบ Unified (สไตล์ Git) และแบบ Side-by-side (เคียงข้างกัน) พร้อมตัวเลือกสำหรับละเว้นช่องว่างและละเว้นตัวพิมพ์เล็ก-ใหญ่ มีประโยชน์สำหรับการตรวจสอบการแก้ไข, การเปรียบเทียบไฟล์กำหนดค่า หรือการตรวจสอบคำตอบจาก API

การเปรียบเทียบข้อความสองเวอร์ชันเป็นงานที่ต้องทำอยู่เสมอ — ไม่ว่าจะเป็นการดูว่ามีอะไรเปลี่ยนไปในไฟล์กำหนดค่า, การตรวจสอบคำตอบจาก API สองชุด, หรือการยืนยันว่าการย้ายข้อมูลสตริงไม่ทำให้สิ่งใดพัง Diff Tool ช่วยให้งานนี้เรียบง่ายขึ้น เพียงวางข้อความ A (ต้นฉบับ) และข้อความ B (ที่เปลี่ยนแปลง) แล้วคลิก Compare ผลลัพธ์จะแสดงทุกบรรทัดแยกตามประเภท: เพิ่มขึ้น (สีเขียว, เครื่องหมาย +), ลบออก (สีแดง, เครื่องหมาย −), หรือไม่เปลี่ยนแปลง สามารถสลับการแสดงผลได้ระหว่างแบบ Unified (สไตล์ Git ที่แสดงทับซ้อนกัน) และแบบ Side-by-side (สองคอลัมน์คู่กัน) การทำ Diff ใช้อัลกอริทึม Longest Common Subsequence เพื่อให้การจัดเรียงลำดับแม่นยำที่สุด ตัวเลือกละเว้นช่องว่างและละเว้นตัวพิมพ์เล็ก-ใหญ่จะช่วยเมื่อความเปลี่ยนแปลงที่แท้จริงถูกบดบังด้วยความแตกต่างของการจัดรูปแบบ สถิติด้านบนจะแสดงจำนวนบรรทัดที่เพิ่ม/ลบ/คงเดิมเพื่อให้คุณเห็นภาพรวมในพริบตา

ตัวอย่างสด
example.com
เครื่องมือเปรียบเทียบความต่าง (Diff) +3 เพิ่มแล้ว −2 ลบแล้ว 5 ไม่เปลี่ยนแปลง
รวมเป็นหนึ่ง วางข้างกัน
1 1 function greet(name) {
2 console.log("Hi " + name);
2 + console.log(`Hello, ${name}!`);
3 + console.log(`Welcome back.`);
3 4 }
4 5  
5 greet("world");
6 + greet("Alice");
6 7 greet("Bob");
คุณสมบัติหลัก

Diff ระดับบรรทัด

จัดหมวดหมู่ทุกบรรทัดว่าเป็นส่วนที่เพิ่ม, ลบ หรือคงเดิม โดยใช้อัลกอริทึม Longest Common Subsequence เพื่อความแม่นยำสูงสุดในการจัดเรียง

มุมมอง Unified และ Side-by-side

สลับระหว่างมุมมอง Unified (แบบ Git ที่วางซ้อนกัน) และแบบ Side-by-side (สองคอลัมน์) ตามความถนัดในการอ่านของคุณ

แสดงผลแบบแยกสี

บรรทัดที่เพิ่มจะไฮไลต์สีเขียวพร้อมเครื่องหมาย +; บรรทัดที่ลบจะไฮไลต์สีแดงพร้อมเครื่องหมาย −; บรรทัดที่คงเดิมจะเป็นสีกลาง ช่วยให้กวาดสายตาตรวจหาความเปลี่ยนแปลงได้รวดเร็ว

ละเว้นช่องว่าง / ตัวพิมพ์

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

สถิติการทำ Diff

แถบด้านบนจะแสดงจำนวน "+N เพิ่ม −N ลบ N คงเดิม" — สรุปภาพรวมได้ทันทีโดยไม่ต้องไล่ดูทุกบรรทัด

รวดเร็วแม้ข้อมูลจะมีจำนวนมาก

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

กรณีการใช้งานทั่วไป

ตรวจสอบการแก้ไขก่อนบันทึก

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

เปรียบเทียบคำตอบจาก API

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

เปรียบเทียบไฟล์กำหนดค่า

เปรียบเทียบไฟล์กำหนดค่าของแต่ละสภาพแวดล้อม (เช่น Dev เทียบกับ Prod) หรือไฟล์เก่าเทียบกับไฟล์ใหม่ เพื่อหาจุดที่แตกต่างซึ่งอาจทำให้เกิดบั๊ก

ตรวจสอบผลลัพธ์จากการจัดรูปแบบ

หลังจากรัน Formatter กับไฟล์ ให้ลองทำ Diff เพื่อยืนยันว่ามีเพียงช่องว่างหรือการจัดรูปแบบเท่านั้นที่เปลี่ยนไป — ไม่มีการเปลี่ยนความหมายของโค้ด

ตรวจสอบการย้ายข้อความ

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

วิธีใช้งาน
1

เปิดเครื่องมือ Diff Tool

คลิกไอคอน Diff ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นพร้อมพื้นที่ใส่ข้อความสองช่องเคียงข้างกัน

2

วางข้อความ A และ B

วางเวอร์ชันต้นฉบับในข้อความ A และเวอร์ชันที่เปลี่ยนไปในข้อความ B รองรับข้อความทุกรูปแบบ — ทั้งโค้ด, JSON, Log หรือข้อความทั่วไป

3

เลือกตัวเลือกเพิ่มเติม

เปิดใช้ Ignore whitespace (ละเว้นช่องว่าง) หรือ Ignore case (ละเว้นตัวพิมพ์) หากการจัดรูปแบบหรือตัวพิมพ์ใหญ่-เล็กเป็นสิ่งที่คุณต้องการข้ามไป

4

คลิก Compare

กดปุ่ม Compare ผลการทำ Diff จะแสดงด้านล่างพร้อมรหัสสีแยกบรรทัดและสถิติสรุปที่ด้านบน

5

สลับมุมมอง (ระบุได้)

สลับไปมาระหว่างมุมมอง Unified และ Side-by-side มุมมอง Unified จะกะทัดรัดกว่า ส่วน Side-by-side จะทำให้การเปรียบเทียบเป็นคู่ชัดเจน

พร้อมที่จะลองหรือยัง?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox