Compare two texts in the browser
Paste the reference on the left and the changed version on the right to check added, deleted, and modified lines, as well as character differences within lines, in the browser.
Open the Text Diff CheckerConclusion: Put Before on the left and After on the right, then review line differences
Enter the source on the left and the comparison target on the right, then run “Compare.” Deletions appear on the left, additions on the right, and replacements at the same position appear as changes. Initially, do not add more ignore settings; only when there are many differences, adjust whitespace, case, and line-break conditions one at a time.
Reversing the left and right sides also reverses the meaning of additions and deletions. Clearly label which side is the before version when sharing the results.
Align the left and right sides and conditions before comparing.
Difference results vary with input order, character encoding, line endings, and whitespace handling. Recording comparison conditions as well as content lets others reproduce the same result.
| Item | Left | Right |
|---|---|---|
| role | Reference / before changes | Comparison target / after change |
| Character encoding | Encoding that reads correctly | Encoding readable by the same standard |
| Ignore settings | Apply to both left and right | Apply to both left and right |
| File name | Check the reference name | Check the name after changes |
Check with the text diff comparison tool
- 1. Paste or load Before on the left and After on the right.
- 2. Check that there is no garbled text and confirm the file names on the left and right.
- 3. Run the comparison and review the counts of differences, additions, deletions, and changes.
- 4. Use "Next difference" to move to each change and check highlighted portions within changed lines.
- 5. Only when necessary, change one ignore setting and compare again.
Meaning of additions, deletions, and changes
| Display | meaning | What to check next |
|---|---|---|
| Add | Lines that exist only on the right side | Is it the intended new content? |
| Delete | Rows that exist only on the left | Whether the content can be deleted |
| Changed | Rows where deletions and additions are matched | Highlighted text and surrounding context |
| No differences | Match in selection conditions | Check whether ignore settings hide important differences. |
Do not determine correctness by count alone; judge it together with surrounding rows and intended use.
Distinguish string differences from semantic differences.
This Tool compares strings. It does not determine whether meanings are the same, such as reordered JSON Keys, equivalent SQL rewrites, or code with the same behavior.
"No differences" means the strings matched under the selected conditions; it does not guarantee the behavior of the program or configuration.
Troubleshooting when the issue is not resolved
- Format JSON and SQL using the same formatter settings before comparing them
- Also check line endings and BOM in an editor or hex view
- Validate final code and settings in tests or the execution environment
Supported scope of the current text diff comparison tool
| Item | Current support | Precautions when checking |
|---|---|---|
| Input | Direct input on the left and right, and loading one or two files | When dropping two items at once, the first goes left and the second goes right. |
| Character encoding | Automatic detection, UTF-8, Shift_JIS, UTF-16LE, UTF-16BE | When no BOM exists, automatic detection reads the input as UTF-8 |
| comparison | Line-level Myers diff and character-level highlighting within changed lines | There is no mode to switch to word units |
| Display | Side-by-Side, line numbers, additions, deletions, changes, and previous/next difference navigation | There is no inline-only display or standard unified diff display |
| Ignore settings | Leading and trailing whitespace, all whitespace, letter case, and line endings | There is no setting to ignore only trailing whitespace, only whitespace amount, or only blank lines individually |
| Line breaks, BOM, and Unicode | Line-break differences can be included in comparison | No feature for displaying determination of LF / CRLF / Mixed, BOM, or Unicode code points |
| Actions | Swap left and right, clear all, copy left/right text and differences, cancel processing, and synchronize scrolling | Downloading standard patches and saving history are not supported. |
| Processing location | Difference calculation uses a Web Worker in the browser | Do not send input content or difference results to analytics. |
The screen's Copy diff arranges changed lines as - line number and + line number for review. It is not standard unified diff with ---/+++ headers and @@ hunks.
Compare primary sources with the implementation
- Git: git-diff Documentation
- Git: diff-options Documentation
- Git: gitattributes Documentation
- GNU Diffutils: Comparing and Merging Files
- Unicode Standard Annex #15: Normalization Forms
- Unicode FAQ: UTF and BOM
- MDN: Web Workers API
Git and GNU diff option names do not map one-to-one to DevelopTools setting names. The article separately explains standard formats and CLI meanings, and what can actually be operated in the current browser tool.
Example: change port=8080 to 8081
If you place port=8080 on the left and port=8081 on the right, the same line is displayed as changed.
Inline highlighting lets you verify that only the final character changed.
- Enter values on the left and right
- Run comparison
- View the number of changes and inline emphasis
- Record the right side as the changed version
Check the reason for value changes and impact scope separately from the diff result.
Frequently asked questions
- Is the input content sent to the Server?
- Difference calculation runs in a Browser Web Worker and does not send input text or results to the Server or Analytics.
- Differences appear even though the content is the same.
- Check trailing whitespace, Tabs, line-break codes, Unicode, BOM, and more in order.