Skip to main content

Diff Tool Guide

The Diff tool helps you compare two pieces of text or files to identify differences between them. Whether you're reviewing code changes, comparing configuration files, or analyzing text modifications, this tool makes it easy to spot and understand the differences.

Features​

Basic Features​

  • Side-by-Side Comparison: View differences in a clear, side-by-side layout
  • Inline View: See changes inline with added and removed content highlighted
  • File Upload: Compare files by uploading them directly
  • Copy/Paste: Quickly compare text by copying and pasting
  • Color-Coded Changes: Easily identify additions, deletions, and unchanged content

Advanced Features​

  • Multiple View Modes: Switch between side-by-side and inline views
  • Syntax Highlighting: Automatic language detection and code highlighting
  • File Support: Upload and compare various file types
  • Error Detection: Identify and highlight potential issues in the comparison

How to Use​

  1. Input Your Text

    • Paste your original text in the left input area
    • Paste the modified text in the right input area
    • Or use the file upload buttons to compare files directly

  2. Choose View Mode

    • Select "Side by Side" for a parallel comparison
    • Select "Inline" to see changes in a single view

  3. Analyze Differences

    • Green highlights indicate added content
    • Red highlights show removed content
    • Unchanged text appears normally

Common Use Cases​

Code Review​

Compare different versions of code to review changes:

- function greet(name) {
-   console.log("Hello " + name);
- }
+ function greet(name) {
+   if (!name) throw new Error("Name is required");
+   console.log(`Hello ${name}!`);
+ }

Configuration Changes​

Track changes in configuration files:

- {
-   "port": 8080,
-   "debug": true
- }
+ {
+   "port": 3000,
+   "debug": false,
+   "timeout": 30
+ }

Tips & Best Practices​

  1. Clean Your Input

    • Remove unnecessary whitespace
    • Ensure consistent formatting
    • Use a formatter if comparing code

  2. Choose the Right View

    • Use side-by-side for longer content
    • Use inline view for quick changes
    • Switch between views as needed

  3. File Comparison

    • Keep file sizes reasonable
    • Ensure file encodings match
    • Use appropriate file types

Keyboard Shortcuts​

  • Ctrl/Cmd + C: Copy selected text
  • Ctrl/Cmd + V: Paste text
  • Tab: Switch between input areas
  • Esc: Clear selection

Troubleshooting​

Common Issues​

  1. Text Not Updating

    • Ensure you've pasted new content
    • Check for hidden characters
    • Try clearing and re-entering text

  2. File Upload Problems

    • Verify file size limits
    • Check file permissions
    • Ensure file is not corrupted

  3. Display Issues

    • Try refreshing the page
    • Switch view modes
    • Clear browser cache

Additional Resources​

Support​

If you encounter any issues or have suggestions for improvement, please visit our support page or contact us directly.