javascript - 如何在控制台中调试我的数据？

Question

我有一些 react 代码，可以在 UI 中呈现各种面板。

我正在尝试调试，但是当我使用控制台语句显示 sportsTopBar.propTypes 时，它会打印 [object Object]。当我使用 JSON.stringify 时，它打印为空。

那么如何在控制台中调试我的结构呢？

下面提供了代码片段。完整的代码可以在fiddle中看到。

代码片段

sportsTopBar.propTypes = {
    sports-layout: React.PropTypes.string.isRequired,
    sportsPanelState: React.PropTypes.object.isRequired,
    sports: React.PropTypes.object.isRequired
};

console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);
console.log("sportsTopBar.propTypes--->" + JSON.stringify(sportsTopBar.propTypes));

输出

sportsTopBar.propTypes--->[object Object]
sportsTopBar.propTypes--->{}

Answer 1

问题 1

语法错误

sports-layout:应该是“sports-layout”:

问题2

您正在隐式转换为字符串

您对此答案的评论让我意识到这一切是怎么回事。您想在控制台中查看该对象的外观，但无法使其按预期输出。所以，这一行:

console.log("sportsTopBar.propTypes--->" + sportsTopBar.propTypes);

使用 + 将前导字符串连接到您想要在控制台中看到的值时遇到问题。此连接导致隐式转换为对象的字符串，因此您希望在其中看到实际对象的 [object Object] 输出。 [object Object] 是对象的 toString 输出。

因此，要将这些记录一起记录在同一输出中，您需要利用 console.log 允许多个参数:

console.log("sportsTopBar.propTypes--->", sportsTopBar.propTypes);

请注意，我所做的是将 + 替换为 ,。现在，每个都将按给定的方式记录，不会对其进行转换。

问题3

JSON 无法表示函数

每JSON.org :

JSON is built on two structures:

• A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.

• An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

我假设 React.PropTypes.string.isRequired 是一个函数。因此，具有引用该函数的属性的任何对象的序列化输出将不包含该属性/方法的表示。此外，您的对象仅包含对该函数的引用，因此生成的序列化(在函数被剥离后)是空对象的表示:{}。