DevTools Tips

Manipulate complex JSON files using DevTools

Categories: Supported by:

I often work with large amount of data that I need to go through and gather interesting information from. Sometimes this data is in JSON format. When that's the case, I like using DevTools to turn it into what I want, using JavaScript!

Take a look at the following video to see my workflow in action:

Note that while the workflow works in every browser, the Snippets pane only exists in Edge and Chrome. In Firefox, you can use the multi-line console to do the same thing.

Screenshot of VSCode with some JSON data and DevTools next to it with the snippets panel containing JS code to manipulate the JSON