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

Home » Windows » Firefox’s JSON viewer is not working: Use these 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 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. Press the Add to Firefox button on this page to add this extension to the 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 customization options 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.

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 need. As such, JSON add-ons and web tools are great alternatives for developers who need to open and edit JSON data.