如何用360查看返回的json数据

360浏览器怎么查看接口返回的JSON数据？详细教程助你轻松调试 **

在Web开发或日常浏览网页时，我们常常需要查看网页通过API接口返回的JSON数据，以便调试接口、分析数据结构或理解前端与后端的交互，360浏览器作为国内广泛使用的浏览器之一，提供了便捷的开发者工具，可以帮助我们轻松实现这一需求,本文将详细介绍如何使用360浏览器查看返回的JSON数据。

准备工作：确保开启开发者工具

你需要确保你的360浏览器开启了开发者工具，几乎所有现代浏览器都内置了类似的功能,360浏览器也不例外。

打开目标网页：打开你想要查看其JSON返回数据的网页，这可能是一个包含动态数据的网页，或者是你正在调试的本地/远程Web应用。
打开开发者工具：你可以通过以下几种方式打开360浏览器的开发者工具：
- 快捷键：按下键盘上的 F12 键（在Mac上可能是 Command + Option + I）。
- 右键菜单：在页面上任意位置点击鼠标右键，在弹出的菜单中选择“检查”或“审查元素”。
- 浏览器菜单：点击浏览器右上角的“三”形菜单按钮（更多工具），选择“更多工具” -> “开发者工具”。

打开后，浏览器窗口会分割或弹出一个新的面板,这就是开发者工具的主界面。

定位并查看JSON数据

JSON数据通常是通过AJAX/Fetch请求从服务器异步获取的,我们需要在开发者工具中找到这些网络请求。

切换到“网络”面板：在开发者工具的顶部，你会看到多个标签页，如“元素”、“控制台”、“源”、“网络”、“性能”等，点击“网络”（Network）标签。
触发或刷新请求：
- 如果页面加载时就会发送你想要查看的JSON请求，请直接刷新页面（按 F5 或 Ctrl + R）。
- 如果JSON请求是由用户操作触发的（如点击按钮、提交表单等）,那么请执行相应的操作来触发该请求。
筛选请求：页面加载或操作后，“网络”面板会列出大量的请求，为了快速找到我们需要的JSON请求,可以：
- 查看请求类型：在请求列表中，找到请求类型为 XHR (XMLHttpRequest) 或 Fetch 的请求，这些通常是AJAX或Fetch请求,返回的数据格式多为JSON。
- 使用筛选器：在“网络”面板的搜索框中，可以输入关键词（如API的URL路径、接口名称等）来筛选请求。
- 查看响应大小/类型：JSON响应通常会显示其大小（如 2 KB），并且MIME类型可能是 application/json。
查看JSON响应内容：找到目标请求后，点击该请求，下方会展开该请求的详细信息，在详细信息区域，找到并点击“响应”（Response）或“预览”（Preview）标签页。
- 预览（Preview）标签：这个标签会以更易读的格式（通常带有折叠/展开的层级结构）来显示JSON数据,非常适合快速浏览数据结构和内容。
- 响应（Response）标签：这个标签会显示原始的、未经格式化的JSON字符串数据，如果你需要复制原始数据或进行精确的文本查找,这个标签很有用。
如果数据格式正确，你应该能看到清晰的JSON结构，包括对象（大括号）和数组（方括号 []）。

美化JSON（如果显示混乱）

直接在“响应”标签中看到的JSON数据可能是一行显示的，没有缩进和换行，可读性较差，虽然“预览”标签已经做了美化，但如果你想在“响应”标签中也查看美化后的数据,可以：

在“响应”标签中，选中所有的JSON字符串（可以按 Ctrl + A 全选）。
复制选中的内容（Ctrl + C）。
将复制的内容粘贴到一个支持JSON美化的在线工具或代码编辑器中（如 VS Code、Sublime Text，或一些在线JSON Formatter网站）。
这些工具通常会自动帮你格式化JSON,使其具有清晰的缩进和层级。

通常情况下，360浏览器开发者工具的“预览”标签已经足够好用了。

实际操作示例（简要）

假设你正在调试一个用户列表页面,该页面通过AJAX获取用户数据。

打开用户列表页面。
按 F12 打开开发者工具，切换到“网络”标签。
刷新页面，或点击“加载更多用户”按钮（如果有的话）。
在“网络”面板中，找到类型为 XHR，URL中可能包含 users 或 api/users 的请求。
点击该请求，然后点击下方的“预览”标签,你就能看到类似下面这样的美化后的JSON数据：

{
  "code": 200,
  "message": "success",
  "data": [
    {
      "id": 1,
      "username": "zhangsan",
      "email": "zhangsan@example.com",
      "age": 25
    },
    {
      "id": 2,
      "username": "lisi",
      "email": "lisi@example.com",
      "age": 30
    }
  ]
}