使用Chrome的开发工具调试JSON

Question

如何使用Google Chrome的控制台访问以下页面中的结果数组？

twitter.com/search.json?q=stackexchange

我一直收到这个错误：

ReferenceError: results is not defined

图片1：https://istack.dev59.com/jBqG7.webp 图片2：https://istack.dev59.com/ySgdG.webp

- Anthony

Answer 1

如果您想以方便的方式浏览此结果集，只需安装Chrome的JSON查看器之一（最好是JSONView）即可。

如果您不想安装任何插件，只需运行此命令：

JSON.parse($('.webkit-line-content').innerHTML);

在页面上的控制台中：

view-source:https://search.twitter.com/search.json?q=stackexchange

- Konrad Dzwinel

---

+1 我已经安装了JSONview。但我也想学习如何使用Chrome的控制台来访问这些对象。例如，我曾经错误地认为可以使用以下命令在控制台中访问数组结果：results.some_sibling。 - Anthony

“results”在全局对象（“window”）上未定义，因为您所看到的只是一堆文本。它从未使用Konrad建议的“JSON.parse()”进行解析。 - Alexander Pavlov

@AlexanderPavlov 是正确的，Chrome 从 https://search.twitter.com/search.json?q=stackexchange 获取结果，并将其显示为普通文本文件 - 它从未被解析过，也没有任何 JSON 对象被创建。 - Konrad Dzwinel

+1 感谢Konrad和Alexander。我现在开始更好地理解JSON了。 - Anthony

Answer 2

你可以在Chrome浏览器控制台中使用console.debug()函数。 例如：

console.debug(results)

- sreng

---

+1 我也遇到了相同的错误，使用console.debug(results)时出现"ReferenceError: results is not defined"。 - Anthony

你只能调试全局变量。尝试这个：console.debug(__screenCapturePageContext__) - sreng

嗯，我以为我可以从Chrome的控制台访问所有变量呢？ - Anthony

是的。您可以键入：console.debug（，然后按Ctrl + Space，您将看到所有可访问的对象和方法。 - sreng

+1 很赞。我非常享受从控制台访问这些变量，但希望我能够访问“results”，因为这对我理解JSON来说更容易。 - Anthony