在浏览器中查看 JSON 文件答案

【问题标题】：View JSON file in Browser在浏览器中查看 JSON 文件
【发布时间】：2012-04-10 22:39:59
【问题描述】：

这不是编程问题，但需要您的意见。

当我们在 Broswer 中点击 JSON url 时，它会要求我们保存文件。为什么会这样？有没有办法在页面本身上查看它？是否有任何插件可用于在浏览器中查看 JSON 文件？

【问题讨论】：

我猜你使用的是IE，如果你使用Chrome，它会显示在页面上。但是如果你改变 Content-Type: text/html; charset=utf-8 它应该允许您在页面中查看它
@Qpirate 理想 JSON 文件的 Content-Type 始终为 json。它不能是文本/html。你有 Firefox/IE 的解决方案吗？ Vodun 为 chrome 解决了这个问题。
Firefox 相同：jsonview.com
@Umesh 抱歉，我希望看到返回的 json 是为了调试响应，从而更改响应类型。我不尝试查看我在浏览器中返回的 JSON，我只是使用 fiddler 来查看返回的内容。对不起。
因为服务器返回无效的“Content-Type: application/octet-stream”应该是“application/json”

标签： javascript json internet-explorer firefox google-chrome

【解决方案1】：

在 Chrome 中使用 JSONView 或火狐使用JSONView

【讨论】：

@Umesh addons.mozilla.org/en-US/firefox/addon/jsonview for firefox ...添加到答案
如何使用这个插件？我安装了，但是当我点击 json url 时。它保存在浏览器下载中
@Umesh 阅读插件页面的帮助----> 通常遇到 JSON 文档（内容类型为“application/json”）时，Firefox 只会提示您下载文件。使用 JSONView 扩展，JSON 文档在浏览器中的显示方式与 XML 文档的显示方式类似。文档已格式化、突出显示，并且可以折叠数组和对象。即使 JSON 文档包含错误，JSONView 仍然会显示原始文本。
@ManseUK @Umesh 如果有 Content-Disposition: attachment 响应标头，即使使用 JSONView，Firefox 仍会提示您下载文件。我添加了一个答案以在浏览器 stackoverflow.com/questions/9888861/view-json-file-in-browser/… 中查看这些 JSON 文件
@UmeshPatil 在 Chrome 中，您只需在 Chrome 浏览器的“网络”->“XHR”选项卡返回 JSON 数据的方法中用鼠标右键单击并选择“在新选项卡中打开”。跨度>

【解决方案2】：

如果您不想安装扩展程序，您可以简单地在 URL 前面加上 view-source:，例如view-source:http://content.dimestore.com/prod/survey_data/4535/4535.json。这通常适用于 Firefox 和 Chrome（如果存在 Content-Disposition: attachment 标头，仍会提供下载文件）。

【讨论】：

+1。很酷的弗拉基米尔。还有其他前缀，例如 FF 的 view-source 吗？
实际上是一堆，但它们是供内部使用的——手动使用时它们通常不是很有用。
@Umesh：点击“edited ... ago”链接查看更改历史。我更改了标签 - 浏览器称为 Firefox，Mozilla 是一家公司/组织。
+1 表示view-source: 解决方法。但这将不允许您使用 JSONView 插件在浏览器中查看格式化的 JSON 文件。如果你想强制浏览器打开带有Content-Disposition: attachment响应头的文件，你可以使用moz-rewrite Firefox插件stackoverflow.com/questions/9888861/view-json-file-in-browser/…删除它

【解决方案3】：

在 Chrome 中，使用 JSONView 查看格式化的 JSON。

查看“本地”*.json 文件： - 安装后您必须从 Window 菜单中打开 Extensions 选项。 - “允许访问文件 URL”旁边的复选框 - 注意保存是自动的（即不需要显式保存）

重新打开 *.json 文件，它应该被格式化了。

【讨论】：

【解决方案4】：

Firefox 44 包含一个内置的 JSON 查看器（无需附加组件）。该功能默认关闭，所以开启devtools.jsonview.enabled： How can you disable the new JSON Viewer/Reader in Firefox Developer Edition?

【讨论】：

【解决方案5】：

json-ie.reg. for IE

试试这个网址

http://www.jsonviewer.com/

【讨论】：

【解决方案6】：

好吧，我在我的桌面应用程序的 WebBrowser 中搜索查看 json 文件，当我在 IE 中尝试时仍然存在同样的问题，IE 也提示下载文件。幸运的是，经过大量搜索，我找到了解决方案。

您需要：打开记事本并粘贴以下内容：

[HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/json] "CLSID"="{25336920-03F9-11cf-8FD0-00AA00686F13}" “编码”=十六进制：08,00,00,00 将文档另存为 Json.reg，然后右键单击文件并以管理员身份运行。

在此之后您可以在 IE 中查看 json 文件并享受桌面 WebBrowser :)

【讨论】：

【解决方案7】：

我将 JSON 打印 CGI 的 Content-Type 设置为 text/javascript。

适用于在浏览器（例如 Firefox）中显示和在脚本中处理。

当然，在这种情况下没有语法高亮。

【讨论】：

【解决方案8】：

对于 Firefox 的 Bookmarks JSON 文件，使用这个优秀的 Bookmarklet：

javascript:(function(){var E=document.getElementsByTagName('PRE')[0],T=E.innerHTML,i=0,r1,r2;t=new Array();while(/("uri":"([^"]*)")/g.exec(T)){r1=RegExp.$1;r2=RegExp.$2;if(/^https?:/.exec(r2)){t[i++]='['+(i)+']:<a href='+r2+'>'+r2+'<\/a>';}}with(window.open().document){for(i=0;t[i];i++)write(t[i]+'<br>');close();}})();

来源：来自 forums.Mozillazine.org 的“alterna”： http://forums.mozillazine.org/viewtopic.php?p=5551705#p5551705

【讨论】：

【解决方案9】：

如果有Content-Disposition: attachment 响应头，Firefox 会要求你保存文件，即使你安装了 JSONView 来格式化 JSON。

为了绕过这个问题，我使用 moz-rewrite Firefox 插件删除了标头（“Content-Disposition”：null），该插件允许您修改请求和响应标头https://addons.mozilla.org/en-US/firefox/addon/moz-rewrite-js/

使用此标头提供的 JSON 文件的一个示例是 Twitter API（看起来他们最近添加了它）。如果你想试试这个 JSON 文件，我有一个脚本可以在浏览器中访问 Twitter API：https://gist.github.com/baptx/ffb268758cd4731784e3

【讨论】：

【解决方案10】：

我还建议使用带有 json-view 扩展名的 Notepad++。你在这里得到扩展：https://sourceforge.net/projects/nppjsonviewer/ 安装并重新启动记事本++。然后在记事本中打开 json-file 并转到“extensions -> Json-Viewer -> Format JSON。然后你就得到了 json 的分层视图。

您也可以使用其中一个看起来不错的在线查看器（http://jsonviewer.stack.hu/、https://jsoneditoronline.org/），但如果您的数据在隐私方面很敏感，我不建议这样做。

【讨论】：

【解决方案11】：

对于 Safari 12 及更高版本，您可以尝试使用 JSONBeautifier 小书签。也适用于其他浏览器。

我创建这个是因为JSON Formatter for Safari 停止在 Safari 12 中工作。Safari 12 有一些新选项，但我在 App Store 中没有找到开源选项，而且我不信任闭源浏览器扩展.

这可以用作书签或源代码json-beautifier.js，可以复制并粘贴到浏览器控制台中。该代码可免费查看，包括 cmets 在内的代码不到 100 行。完全在您的设备上运行，绝不会通过网络发送您的数据。

也适用于本地文件。 ?

【讨论】：

【解决方案12】：

右键单击 JSON 文件，选择打开，导航到您想要打开的程序（记事本）。连续打开自动使用记事本。

【讨论】：