You’re staring at a wall of compressed JSON text that looks like hieroglyphics. Learning how to beautify JSON in Chrome transforms unreadable data strings into clean, organized code that actually makes sense. Developers spend 23% of their debugging time just trying to parse messy JSON responses.

“The JSON.parse() static method parses a JSON string, constructing the JavaScript value or object described by the string.” , JSON.parse() - JavaScript - MDN Web Docs

1. Copy the messy JSON text from your browser or API response
2. Open Chrome Developer Tools with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
3. Navigate to the Console tab
4. Type JSON.stringify(JSON.parse('[your JSON here]'), null, 2) and press Enter
5. Copy the formatted result for use in your project

Step-by-Step JSON Beautification Process

Copy Your Unformatted JSON Data

Start by selecting the compressed JSON text you need to format. This might come from an API response in the Network tab, a configuration file, or data you’re working with in your application. Right-click and choose Copy, or use Ctrl+C (Cmd+C on Mac) to copy the text to your clipboard.

The source doesn’t matter. Whether you’re pulling JSON from a REST API, reading a config file, or debugging a complex data structure, the formatting process works the same way. Just make sure you’ve copied the complete JSON object, including opening and closing braces.

When dealing with large API responses, you might need to scroll through multiple screens of data. Look for the outermost curly braces {} or square brackets [] that contain the entire response. Many developers make the mistake of copying only a portion of the JSON, which leads to parsing errors later.

Access Chrome Developer Tools

Press F12 to open Chrome’s Developer Tools instantly. Alternatively, you can use the keyboard shortcut Ctrl+Shift+I on Windows or Cmd+Option+I on Mac. If you prefer using menus, right-click anywhere on the page and select “Inspect” from the context menu.

The Developer Tools panel will appear at the bottom or side of your browser window. You’ll see several tabs across the top, including Elements, Console, Sources, and Network. The Console tab is where you’ll do the JSON formatting work.

You can dock the Developer Tools in different positions by clicking the three dots menu in the top-right corner of the panel. Choose to dock it to the bottom, right side, or open it in a separate window depending on your screen setup and preferences.

Navigate to the Console Tab

Click the Console tab if it’s not already selected. This opens Chrome’s JavaScript console, where you can execute code snippets and see their output immediately. The console displays a command prompt (usually a blue > symbol) where you can type commands.

If you see error messages or previous console output, don’t worry. You can clear the console by clicking the clear button (circle with a line through it) or pressing Ctrl+L (Cmd+K on Mac). A clean console makes it easier to see your formatted JSON results.

The console environment gives you access to all of JavaScript’s built-in functions, including the JSON parsing and formatting methods you’ll use. This makes Chrome’s console a powerful tool for quick data manipulation tasks beyond just JSON formatting.

Execute the JSON Formatting Command

Type the formatting command: JSON.stringify(JSON.parse('[your JSON here]'), null, 2). Replace [your JSON here] with the JSON text you copied earlier. Make sure to wrap your JSON in single quotes to avoid conflicts with any double quotes inside the JSON structure.

The command works by first parsing your JSON text with JSON.parse() to convert it into a JavaScript object. Then JSON.stringify() converts it back to a string with proper formatting. The null, 2 parameters tell the function to use no custom replacer and indent with 2 spaces.

You can customize the indentation by changing the number from 2 to your preferred spacing. Use 4 for wider indentation that matches many coding standards, or use a tab character '\t' if you prefer tab indentation over spaces.

Press Enter to execute the command. Chrome will immediately display the beautified JSON below your input, with proper indentation, line breaks, and spacing that makes the data structure clearly visible.

Copy the Formatted Output

The console displays your formatted JSON with syntax highlighting and proper structure. Click at the beginning of the output and drag to select all the formatted text. You can also triple-click to select an entire line quickly.

Right-click the selected text and choose Copy, or use Ctrl+C (Cmd+C on Mac). Your formatted JSON is now ready to paste into your code editor, documentation, or anywhere else you need clean, readable JSON data.

For large JSON objects, the console might truncate the output with ellipses. Click the arrow next to truncated objects to expand them fully before copying. This ensures you get the complete formatted structure.

“JSON is a text-based data format following JavaScript object syntax. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript.” , Working with JSON - Learn web development - MDN

Common JSON Formatting Mistakes

Forgetting to Escape Quote Characters

You paste JSON containing double quotes directly into the console command without wrapping it in single quotes. The command fails because JavaScript can’t parse the conflicting quote marks properly. The error message usually shows “Unexpected token” or “Unterminated string literal.”

Instead of pasting raw JSON with double quotes, wrap your entire JSON string in single quotes. If your JSON contains single quotes, escape them with backslashes or use template literals with backticks instead. For complex JSON with both quote types, template literals provide the cleanest solution.

Using Invalid JSON Syntax

You try to format JavaScript object literals or pseudo-JSON that contains unquoted keys, trailing commas, or comments. The JSON.parse() function only accepts valid JSON format and throws syntax errors for malformed data.

Check that your data uses proper JSON syntax with double-quoted keys, no trailing commas, and no JavaScript comments. Use JSON validation tools to verify your syntax before attempting to format. Many APIs return valid JSON, but configuration files sometimes use relaxed JavaScript object syntax.

Missing Outer Quote Marks

You forget to wrap your JSON string in quotes when typing the console command. JavaScript treats the JSON as code instead of a string, causing unexpected syntax errors or variable reference errors.

Always wrap your JSON data in single quotes when using the console formatting method. The complete command should look like: JSON.stringify(JSON.parse('{"key": "value"}'), null, 2) with single quotes around the JSON portion. Double-check that you have both opening and closing quotes.

Copying Incomplete JSON Objects

You select only part of a large JSON structure, missing opening or closing braces. The incomplete JSON fails to parse because it’s not a valid, self-contained object or array.

Scroll through the entire JSON response to find the true beginning and end. Large API responses often contain nested objects that can be tricky to select completely. Use Ctrl+A (Cmd+A on Mac) to select all content if you’re working with a dedicated JSON file or response. Count the opening and closing braces to verify you have a complete structure.

“Valid JSON syntax is formally defined by the ABNF grammar copied from the IETF JSON standard (RFC 8259). Property names must be double-quoted strings; trailing commas are forbidden.” , JSON - JavaScript Reference - MDN Web Docs

Pro Tip: Skip the Manual Steps

The manual console method works perfectly but requires typing the same command repeatedly for each JSON formatting task. JSON Formatter Pro automates this entire process with a single click.

This Chrome extension instantly detects JSON content on any webpage and formats it automatically. With a 4.8/5 rating and regular updates (last updated March 2026), it handles the parsing and formatting without any console commands or manual steps.

The extension weighs only 738KiB and integrates directly into Chrome’s interface. Instead of switching to the console every time you encounter messy JSON, the formatting happens instantly as you browse. Try JSON Formatter Pro Free

Built by Michael Lip. More tips at zovo.one