Code Diff Viewer

Diff

Code Changes

Review code changes with a unified diff view. Additions in green, deletions in red.

src/components/UserList.tsx
import { useState } from "react";
−import { fetchUsers } from "../api";
+import { fetchUsers } from "@/lib/api";
+import { useCache } from "@/hooks/useCache";
 
export function UserList() {
− const [users, setUsers] = useState([]);
+ const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
 
− useEffect(() => {
− fetchUsers().then(setUsers);
− }, []);
+ const { data } = useCache("users", fetchUsers);
 
return (
src/lib/api.ts
const BASE_URL = process.env.API_URL ?? "";
 
−export async function fetchUsers() {
+export async function fetchUsers(): Promise<User[]> {
const res = await fetch(`${BASE_URL}/api/users`);
− return res.json();
+ if (!res.ok) throw new Error(res.statusText);
+ return res.json() as Promise<User[]>;
}
About this block

Code Diff ViewerPRO

Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.

More DevTools blocks

View all DevTools
PRO

devtools6

Application Log Viewer

Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.

FREE

devtools3

Multi-Language Code Tabs

Code block with language tabs (JavaScript, Python, cURL, Go) and Shiki syntax highlighting. Dark theme with copy-to-clipboard and active tab indicator.

PRO

devtools7

API Response Examples

API documentation cards showing response examples with color-coded status badges. Headers section, JSON body with copy button, success/error variants.

PRO

devtools52

Bundle Size Analyzer

JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets.

PRO

devtools13

Environment Config Viewer

Tabbed environment variable viewer for comparing configuration across production, staging, and development environments.

PRO

devtools49

Code Coverage Report

Test coverage dashboard with expandable file tree. Coverage metrics for statements, branches, functions, and lines with color-coded progress bars.