Javascript 如何在conosle中调试数据？

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

我正在尝试调试，但当我使用控制台语句显示

sportsTopBar.propTypes

时，例如，它会打印

[object]

。当我使用

JSON.stringify

时，它打印为空

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

下面提供了代码片段。代码可以在小提琴中完整地看到

代码片段

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--->{}

输出

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--->{}

问题1 语法错误

体育版面：

应该是

体育版面：

问题2 您正在隐式转换为字符串 你对这个答案的评论让我意识到这一切都是为了什么。您希望在控制台中查看此对象的外观，但无法按预期将其输出。因此，这一行：

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

使用

+

将前导字符串连接到希望在控制台中看到的值时出现问题。此凹入导致对对象的字符串进行隐式转换，从而输出您希望看到实际对象的

[object object]

[object object]

是对象的

toString

输出

因此，要将这些记录在同一输出中，您需要利用

console.log

对多个参数的允许：

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

请注意，我所做的是将

+

替换为

，

。现在，每一个都将按照给定的方式记录，并且不会对其进行任何铸造

问题3 JSON不能表示函数 Per:

JSON构建在两种结构上：

• 名称/值对的集合。在各种语言中，这是作为对象、记录、结构、字典、哈希表、键控列表或关联数组实现的

• 值的有序列表。在大多数语言中，这是以数组、向量、列表或序列的形式实现的

我假设

React.PropTypes.string.isRequired

是一个函数。因此，具有引用该函数的属性的任何对象的序列化输出将不包含该属性/方法的表示形式。此外，您的对象只包含对该函数的引用，因此产生的序列化（在剥离函数之后）是空对象的表示：

{}

问题1 语法错误

体育版面：

应该是

体育版面：

问题2 您正在隐式转换为字符串 你对这个答案的评论让我意识到这一切都是为了什么。您希望在控制台中查看此对象的外观，但无法按预期将其输出。因此，这一行：

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

使用

+

将前导字符串连接到希望在控制台中看到的值时出现问题。此凹入导致对对象的字符串进行隐式转换，从而输出您希望看到实际对象的

[object object]

[object object]

是对象的

toString

输出

因此，要将这些记录在同一输出中，您需要利用

console.log

对多个参数的允许：

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

请注意，我所做的是将

+

替换为

，

。现在，每一个都将按照给定的方式记录，并且不会对其进行任何铸造

问题3 JSON不能表示函数 Per:

JSON构建在两种结构上：

• 名称/值对的集合。在各种语言中，这是作为对象、记录、结构、字典、哈希表、键控列表或关联数组实现的

• 值的有序列表。在大多数语言中，这是以数组、向量、列表或序列的形式实现的

---

我假设

React.PropTypes.string.isRequired

是一个函数。因此，具有引用该函数的属性的任何对象的序列化输出将不包含该属性/方法的表示形式。此外，您的对象只包含对该函数的引用，因此产生的序列化（在剥离函数之后）是一个空对象的表示：

{}

，而JSFIDLE离工作状态的距离是可以想象的。请提供一个独立的工作示例我希望

isRequired

是一个函数，在后面添加

（）

。@scniro感谢您的回复…问题是我的应用程序太大了…很难包含在小提琴中…我想代码片段将帮助我们解决

控制台.log（“sportsTopBar.propTypes-->”+sportsTopBar.propTypes）；log（“sportsTopBar.propTypes-->”+JSON.stringify（sportsTopBar.propTypes））这应该是什么方言？在这里，您可以定义一个函数，如
render（）{…}
一个包含破折号的对象属性，而不使用引号将其括起来？@dtanders您可以在我的代码中更新它令人困惑的：（那JSFIDLE离我们所能想象的工作距离很远。请提供一个单独的工作示例我希望
isRequired
是一个函数，添加
（）
behind…@scniro感谢您的回复…问题是我的应用程序太大了…很难包含在小提琴中…我想代码片段会帮助我们解决
console.log（“sportsTopBar.propTypes-->”+sportsTopBar.propTypes）；console.log（“sportsTopBar.propTypes-->”+JSON.stringify（sportsTopBar.propTypes））
这应该是什么方言，在这里你可以定义一个函数，比如
render（）{…}
一个包含破折号的对象属性，而不使用引号将其括起来？@dtanders你能在我的代码中更新它的困惑吗：（那么如何查看值…如果我用引号将它打印成这样
sporttopbar.propTypes-->{“sports layout:“React.PropTypes.string.isRequired”，“sportsPanelState:“React.PropTypes.object.isRequired”，“sports:“React.PropTypes.object.isRequired”}
非常感谢…我从你那里学到了很多…你能做我的导师吗