Developer Tools
What Is a Diff? View and Understand Diff Output
Learn what a diff is with an interactive unified diff viewer for patch files, hunk headers, added lines, and removed lines.
1
Files
1
Hunks
3
Added lines
1
Removed lines
3
Context lines
b/src/app.ts
--- a/src/app.ts · +++ b/src/app.ts
@@ -1,6 +1,8 @@
| 1 | 1 | export function total(items) { | |
| 2 | - | return items.length | |
| 2 | + | return items.reduce((sum, item) => { | |
| 3 | + | return sum + item.count | |
| 4 | + | }, 0) | |
| 3 | 5 | } | |
| 4 | 6 | console.log(total([{ count: 2 }])) |
Unified Diff Viewer online
Use Unified Diff Viewer in the browser for quick utility workflows. MKDiff keeps the page focused on practical input, preview, and review steps so you can finish a one-off task without installing a desktop utility.
How do you read a unified diff hunk?
The --- and +++ lines identify the old and new files. A header such as @@ -10,4 +10,5 @@ gives the old and new starting lines and line counts. Lines beginning with - were removed, lines beginning with + were added, and leading spaces mark unchanged context.
View .patch and .diff files in a structured browser UI.
Understand unified diff headers such as --- +++ and @@ hunk ranges.
Review added, removed, and context lines with old and new line numbers.