Firefox’s JSON viewer is not working: Use these add-ons and web tools


Matthew Adams
by Matthew Adams
Author
Loading Comments
Affiliate Disclosure

Fix Firefox's JSON viewer or use add-ons and web tools

JSON, otherwise JavaScript Object Notation, data is a protocol for browser/server communication and one of the primary alternatives to XML.

However, JSON data is not readable by developers without a JSON viewer that structures and displays the data in a clear way. As such, Mozilla has incorporated a JSON viewer in Firefox and is enabled by default in the Developer Channel.

How do I view JSON in Firefox? The quickest way to view and edit JSON data in Firefox is through its integrated JSON viewer. The data viewer is enabled by default only in the Developer Edition and Nighly. If that doesn’t suit you, use some useful add-ons and web tools for Firefox.

For more information about that, check the guide below.

How to enable JSON Viewer in Firefox

If Firefox’s JSON viewer isn’t working for you, that’s probably because it’s not enabled. At the moment, the data viewer is only enabled by default in Developer Edition and Nightly.

This is how you can enable JSON viewer in Firefox Stable:

  • First, enter ‘about:config‘ in Firefox‘s address bar and press the Return key to open the page shown in the snapshot directly below.

  • Next, input ‘devtools.jsonview.enabled‘ into the search bar at the top of the about:config page.
  • Now you can double-click devtools.jsonview.enabled to switch its value to true. That effectively enables the JSON viewer in Firefox browser.

Alternative JSON Viewer add-ons and web tools

However, you don’t really need to enable JSON viewer in Firefox. If the Firefox JSON viewer isn’t working, you can always try alternative add-ons and web tools instead.

For example, you can add JSONView to Firefox by pressing the +Add to Firefox button on this page. When you’ve added that add-on to the browser, open this page to see an example of some formatted JSON data.

The shots below show you the JSON data before and after the add-on is enabled in Firefox.

The JSON-DataView is a better add-on with which you can customize the data display. Find it on this page and add this extension to your browser.

Then, open this page again to check out how it formats and displays the JSON data. The data now includes + and – buttons to expand and collapse tree nodes, syntax highlighting and hyperlinks.

The JSON-DataView also includes customisation options that you can select by clicking the Open menu button at the top right of the browser and Add-ons.

After, press the Options button beside JSON-DataView to open the window shown below. There you can click the Theme drop-down menu to alter the JSON data colors. Click the Displays tab to customize the text font.

There are also JSON viewer web tools you can copy and paste data in. First, you can copy and paste data into this JSON viewer’s Text tab. Try copying and pasting the JSON data below with the Ctrl + C and Ctrl + V hotkeys.

{“hey”: “guy”,”anumber”: 243,”anobject”: {“whoa”: “nuts”,”anarray”: [1,2,”thr
ee”], “more”:”stuff”},”awesome”: true,”bogus”: false,”meaning”: null, “japanese”:”
明日がある。”, “link”: “http://jsonview.com”, “notLink”: “http://jsonview.com is great”}

When you’ve copied that into the Text tab, press the Format button on the JSON viewer’s toolbar. That will then display the data as shown in the shot below, which is much clearer.

You can load other data by pressing the Load JSON data button and entering a URL. The Viewer tab displays data variables with tree structures you can expand or collapse by pressing the + and – buttons.

The JSON Editor Online is another web tool you can display data in from HDD or URL. Click here to open the web tool, and then copy and paste the sample data above into th code editor.

Press the right arrow button to copy the code into the tree editor, and then click the left arrow button to display the JSON data as shown below. There, you can edit the data and save any changes made.

The page also includes a handy search tool for fields and values.

If you need a JSON viewer, the built-in Firefox viewer doesn’t do everything you need. As such, JSON add-ons and web tools are great alternatives for developers who need to open and edit JSON data.

Hope that this was helpful and you’re now aware of the different JSON add-ons and web tools you can use. If you have any more questions, feel free to reach for the comments section below.

Editor’s Note: This post was originally published in April 2017 and has been since completely revamped and updated for freshness, accuracy, and comprehensiveness.