Chrome调试器鼠标悬停不显示变量值

Question

我使用 "npx create-react-app my-app --template typescript" 命令创建了一个简单的 React 应用。当我使用 "npm start" 启动应用程序时，没有任何问题，但是如果我在代码中添加断点，我无法在 Chrome 开发工具中看到值。我是否缺少任何依赖项或这是 React 应用程序的预期工作方式？

鼠标悬停在 name 变量上，但没有弹出

- Vahe Mikayelyan

Answer 1

在我的情况下，这是devtools中的一个错误，我通过更改一个不相关的设置来修复它：

1. 打开devtools，然后打开其首选项

2. 切换调试时内联显示变量值

   

3. 关闭devtools

4. 如有必要，请重复步骤 1-2

- wOxxOm

---

谢谢你的回答！不幸的是它没有起作用。 - Vahe Mikayelyan

我切换了它的开关，然后重新打开了开发工具。顺便说一下，我也尝试在Edge中调试这个应用程序，行为是相同的，看起来这不是一个与浏览器相关的问题。此外，我在Chrome中尝试了Angular应用程序，它的工作正常，我很困惑。 - Vahe Mikayelyan

切换它会重新启用内联变量值，在范围内跨越，但不是在鼠标悬停时。我必须将变量名复制/粘贴到控制台中，以查看在评估之前分配了什么。这是什么鬼。 - dubmojo

严肃地说，感觉这个功能每个月都会出问题。我们需要一个永久性的解决方案。Chrome团队不能接受！ - GONeale

我在使用Chrome开发工具调试*.vue文件时遇到了类似的问题，而对于纯粹的*.js文件则没有任何问题。为了查看鼠标悬停时的内联变量值，必须选择整个变量名称（双击变量），然后变量值将被显示出来。 - Maksim Shamihulau

Answer 2

我在调试 TypeScript 时遇到了这个问题。我尝试了这些步骤，但它也没有起作用。

- kaxifa

---

是的，看起来像是 TypeScript 的问题。 - Vahe Mikayelyan

有时候，JavaScript 无法正常工作。 - kaxifa

这并不算是一个答案。最好将它移动到您所提到的建议的评论中。 - Draško Kokić