Chrome DevTools: JSON-LD & auto-prettify
Detect & pretty print all the JSON subtypes everywhere.
I’m Jecelyn Yeen, currently working on Chrome Tooling - Chrome DevTools, Puppeteer and more at Google. I tend to talk about web development, debugging & testing.
Prefer video over text? Head to the end for the video version.
Working with JSON data in DevTools was a bit annoying before, but it’s better now! Two paper cuts have been fixed:
Different types of JSON: For example, Google Search uses a special kind of JSON named JSON-LD. DevTools didn't understand it before, but now it does! You can even see it in a nice, clear format.
JSON-LD data is nicely formatted in the Network panel > Response tab Format minified JSON: Sometimes, JSON is hidden inside HTML pages and looks all squished up due to the build (minified) process. Now, the Sources panel automatically makes it look neat and tidy for you.
These changes might seem small, but they'll make a big difference if you work with JSON a lot! Now you can inspect JSON data easier than before.