{"id":194666,"date":"2022-06-21T03:28:52","date_gmt":"2022-06-21T01:28:52","guid":{"rendered":"http:\/\/sftarticles.wpenginepowered.com\/en\/?p=194666"},"modified":"2025-07-01T20:38:21","modified_gmt":"2025-07-02T03:38:21","slug":"how-to-use-json-formatter-chrome","status":"publish","type":"post","link":"https:\/\/cms-articles.softonic.io\/en\/how-to-use-json-formatter-chrome\/","title":{"rendered":"How to use the JSON Formatter extension for Chrome in 4 steps"},"content":{"rendered":"\n

The JSON Formatter extension<\/strong> helps developers debug Javascript code<\/strong> more efficiently while making text strings more readable. JSON files consist of English language-based text strings without line breaks. Programmers use the JSON Formatter to present their code in a way that makes their computer language easier to understand<\/strong>. <\/p>\n\n\n

\r\n
\r\n
\r\n
\r\n \"JSON\r\n <\/div>\r\n
\r\n JSON Formatter<\/span>\r\n DOWNLOAD<\/a>\r\n <\/div>\r\n
\r\n <\/path><\/path><\/text><\/svg>\r\n <\/div>\r\n <\/div>\r\n
\r\n <\/span>\r\n <\/div>\r\n
\r\n \r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n<\/div>\n\n\n\n

To access and use the JSON Formatter extension for Chrome, follow these four easy steps.<\/p>\n\n\n

  1. Install the JSON Formatter Chrome extension<\/h2>\"Access

    Start by accessing the JSON Formatter extension. You\u2019ll need to be on the Chrome browser<\/strong> to install this extension.<\/p>\n<\/div><\/li>

  2. Confirm the JSON extension is valid<\/h2>\"Use

    Once you\u2019ve enabled the JSON Formatter Chrome extension, use the interactive JSON Schema validator<\/strong> to view your source code and ensure that the JSON document<\/strong> you want to format is valid. JSON documents contain text, curly braces, square brackets, double quotes, commas, and potentially single quotes, depending on developer preference<\/strong>. Objects housed within curly braces represent multiple pairs and values.<\/p>\n<\/div><\/li>

  3. Verify the JSON text is readable online<\/h2>\"Use

    Access the Enterprise Explorer view<\/strong> within your Javascript development environment<\/strong>. This custom view displays all your current projects with Java EE extensions. Right-click on your .json file<\/strong> or any other text string that contains valid JSON code and choose Open With > JSON Editor.<\/i> This compresses your JSON strings<\/strong>, displaying them on a single line while removing the white space between JSON elements.<\/p>\n<\/div><\/li>

  4. Test the JSON Formatter application<\/h2>\"Test

    Once you\u2019ve verified the source code<\/strong> is valid and properly formatted, insert the document into the visible text and the web page, and select the Format JSON<\/i> button. The app will display the text in the desired format, making it easier to read. You can opt to reverse your changes and send the code back to its original space-saving form<\/strong> by entering it in the text field and clicking the Un-Format JSON<\/i> button.<\/p>\n

    The extension works with local files as well after your enable it in chrome:\/\/extensions. To inspect the JSON document<\/strong>, simply type in JSON into the console. If you want to view the formatting pane open the view dropdown and select Format current view<\/i>. You\u2019ll notice a simplified View formatting<\/i> that separates List<\/i> and Gallery<\/i> formatting layouts for JSON. The shortcut Ctrl+Shift+I<\/i> lets you format your JSON document from the context menu<\/strong>.<\/p>\n<\/div><\/li><\/ol><\/div>