How to view JSON in Chrome like Firefox?
chromium - Load json manually in chrome://tracing - Stack Overflow
Chrome extension JSON viewer
How do I turn this off? I prefered my own json viewer....
Videos
Hi webdev, and happy new 2020 for people already there, happy party for the rest of you!
I reeeeeally love Firefox JSON viewer and it's the main thing I miss since I decided to switch to Chrome (as a wannabe frontend dev I find it useful to adhere to industry standards until I have sufficient experience to make my own choices).
Is there any widely used and safe plugin that replicates FF magnificent experience?
Thanks and let's hope 2020 will be a great year for everyone.
JSONView for chrome
- In-browser viewer
- Expand and contract JSON items
- Format validation
- Doesn't require .json ending
Enable:
Chrome wrench button >> Tools >> Extensions >> "Allow access to file URLs"
I got impatient waiting for a new Chrome API and ported JSONView just using simple regex matching.
http://github.com/jamiew/jsonview-chrome
This is a rough draft, but it works! You can install it using "Load unpacked extension" from the chrome://extensions -- working out some kinks but will package it as a real extension soon.
For further prettification checkout the "XML Tree" extension (SuperUser won't let me post 2 links yet)
The Trace-viewer tool currently loads the JSON file in 3 ways:
- When recording a new trace
- When loading the file via the load button after the file has been picked
- When dropping the file into the tab (drag & drop)
All of these do a one-time update to the active trace.
Technical details
Look at the profiling_view and notice
tr.ui.b.readFile(file).then(
...
this.setActiveTrace(file.name, data);
and a few variations on calls to setActiveTrace from beginRecording , onLoadClicked_ and dropHandler_ .
Solution suggestions
Yes, there are a few ways in which you can pass the json data to chrome://tracing (i.e. trace viewer) without manually clicking load data .
Depending on how much effort you want to put into it:
- Don't manually click load but drag and drop the file
- Automate the drag & drop (example with selenium) based on a script which watches for file changes to the JSON
- Automate the load based on file changes
- Contribute to Trace Viewer yourself and add this feature. See the tracing ecosystem explainer and contributing. Note it is now part of the Catapult project in GitHub.
See fswatch - a cross-platform file change monitor.
Here is a solution, if you can relax the requirement that you have to open it with Chrome-Tracing. Speedscope is a nice replacement and can be easily started from the command line.
For offline use, or convenience in the terminal, you can also install speedscope via npm:
npm install -g speedscopeInvoking speedscope /path/to/profile will load speedscope in your default browser. Source
speedscope <my-chrome-tracing.json> opens the file.

Speedscopes offers different views but not sometimes not the same view as Chrome-Tracing. So it might not be the right choice for all use cases.