You’re staring at a massive JSON response wondering how you’ll ever find that one specific field buried somewhere inside. Here’s exactly how to search json data in chrome using Chrome DevTools’ built-in search capabilities and Console tools. This method can save you up to 15 minutes per debugging session when working with large API responses.

1. Open Chrome DevTools with F12 or Ctrl+Shift+I (Cmd+Opt+I on Mac)
2. Navigate to the Network or Console tab where your JSON data appears
3. Use Ctrl+F (Cmd+F on Mac) to open the search box
4. Type your search term and press Enter to find matches
5. Use JavaScript’s JSON methods in Console for advanced filtering

Open Chrome DevTools and Locate Your JSON

First, you need to get to the data. Press F12 to open Chrome DevTools, or use the keyboard shortcut Ctrl+Shift+I on Windows (Cmd+Opt+I on Mac). You’ll see the DevTools panel appear at the bottom or side of your browser.

If you’re working with an API response, click the Network tab and trigger your API call by refreshing the page or performing the action that generates the request. Look for the API endpoint in the list of network requests. Click on it, then select the Response tab to see the raw JSON data.

For JSON files opened directly in Chrome, the data appears in the main browser window. You can search this directly, but DevTools gives you more powerful options.

“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

Use the Built-in Search Function

Once you can see your JSON data, press Ctrl+F (Cmd+F on Mac) to open Chrome’s search box. This appears as a small input field, usually in the top-right corner of the DevTools panel or browser window.

Type your search term into this box. Chrome will highlight all instances of that text in yellow, making them easy to spot even in large JSON files. Use the up and down arrow buttons next to the search box, or press Enter and Shift+Enter to navigate between matches.

This basic search works well for exact string matches, but it won’t help you with complex queries or data transformation.

Access the Console for Advanced JSON Searching

Click the Console tab in DevTools for more powerful search capabilities. Here you can use JavaScript to parse and filter your JSON data in ways that simple text search cannot match.

If your JSON is in a network response, you’ll need to copy it first. Right-click on the response in the Network tab and select “Copy response.” Then paste it into a variable in the Console like this:

let data = /* paste your JSON here */;

For JSON files opened directly in the browser, you can fetch the current page content using:

fetch(window.location.href).then(response => response.json()).then(data => console.log(data));

Filter and Search with JavaScript Methods

Now you can use JavaScript’s array and object methods to search through your data. Here are the most useful techniques:

To find objects containing specific values, use the filter method:

data.filter(item => item.name.includes(“search_term”));

To search for specific property names across all objects:

data.find(item => item.hasOwnProperty(“property_name”));

To search nested objects, combine JSON.stringify with includes:

data.filter(item => JSON.stringify(item).includes(“search_term”));

This last method converts each object to a string and searches within it, catching matches in deeply nested properties that you might otherwise miss.

“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 Mistakes When Searching JSON Data

Forgetting About Case Sensitivity

Most developers search for “Email” when the actual property is “email” with a lowercase ‘e’. JavaScript’s default string methods are case-sensitive, so your search will fail.

Always convert to lowercase first: item.email.toLowerCase().includes("search_term".toLowerCase()) or use regular expressions with the i flag for case-insensitive matching.

Searching in Stringified JSON Without Formatting

When you convert objects to strings with JSON.stringify(), you get a compressed format without spaces. Searching for “name: John” won’t work because the actual string is “name”:”John”.

Either search for the exact stringified format, or use JSON.stringify(item, null, 2) to get readable formatting with proper spacing.

Not Handling Null or Undefined Values

Your search will crash with an error if you try to call .includes() on a null or undefined property. This happens more often than you’d expect with real-world API data.

Always check for the property’s existence first: item.email && item.email.includes("search_term") or use optional chaining: item.email?.includes("search_term").

Ignoring Nested Array Structures

JSON often contains arrays within objects, and simple property searches miss data inside these arrays. You need to flatten or recursively search these structures.

Use Array.flat() for simple nested arrays, or write a recursive function to traverse deeply nested structures.

Pro Tip: Skip the Manual Steps

The manual DevTools approach works perfectly for occasional JSON searching, but it gets tedious when you’re debugging APIs all day. If you regularly work with JSON data, JSON Formatter Pro automates this entire process.

This Chrome extension formats JSON responses automatically, adds syntax highlighting, and includes a built-in search function that works across all your API calls. With a 4.8/5 rating and regular updates, it handles the formatting and searching without any manual DevTools navigation.

The extension stays lightweight at just 738KiB and integrates directly into your existing workflow. Try JSON Formatter Pro Free

“The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified.” , JSON.stringify() - JavaScript - MDN Web Docs

Chrome’s DevTools provides everything you need to search through JSON data effectively. The combination of basic text search and JavaScript Console methods covers most debugging scenarios you’ll encounter. Start with simple Ctrl+F searching for quick lookups, then graduate to Console methods when you need to filter or transform your data.

Remember that practice makes perfect with these techniques. The more you use Chrome’s search capabilities, the faster you’ll become at finding exactly what you need in even the largest JSON responses.

Built by Michael Lip. More tips at zovo.one