标签: react-devtools

我目前正在使用React Developer Tools chrome扩展来调试基于React Virtualized的组件.

正如您在屏幕截图中看到的,我能够突出显示所有单元格,但我无法弄清楚如何才能找到具有特定键值的Cell.似乎搜索输入支持Regex.

我正在尝试从 devtool 扩展中为 React 的渲染方法创建一个猴子补丁，因为我正在尝试为我的扩展中的一个功能重新创建类似于 react_devtool 的 api 的东西。我用这两行代码欺骗了被检查窗口的虚拟 DOM

var reactRoot = document.querySelector("[data-reactroot]")
var dom = reactRoot[Object.getOwnPropertyNames(reactRoot)[0]]

我还听说通过访问窗口的__REACT_DEVTOOLS_GLOBAL_HOOK__. 我需要能够在页面更新时从 React 的 internalInstance 访问一组新数据（setState/rerender）。

这是我对 React 的渲染方法进行猴子修补的尝试。此代码从通过 my 注入的单独文件运行，该文件content-scripts.js能够在检查的窗口中访问 React 应用程序的 dom。

const reactInstances = window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers
const instance = reactInstances[Object.keys(reactInstances)[0]]
console.log('current windows React INSTANCE: ', instance)
var reactRender = instance.Mount.render
console.log('reacts render method: ', reactRender)
reactRender = (function (original) {
  return function (nextElement, container, callback) {
    var result = original.apply(this, arguments)
    console.log(original, result)
    return result
  } …

我在React Docs中读到：

React DevTools现在支持React Hooks。React的最新Flow和TypeScript定义也支持它们。我们强烈建议启用一个称为eslint-plugin-react-hooks的新皮棉规则，以强制使用Hooks的最佳做法。默认情况下，它将很快包含在Create React App中。

然后我将React更新到16.8并开始使用钩子。但这样做后useState()，并useContext()在我的第一个组成部分，我无法正常使用反应开发工具检查他们（见下图）。

有没有解决的办法？

  const [loading, setLoading] = useState(false);
  const [error,setError] = useState(null);
  const [productDetails,setProductDetails] = useState(null);

  const firebase = useContext(FirebaseContext);

我开始学习 React 的优化。并查看一些学习资源，在这些资源上，我可以在 Profiler 中看到组件道具。但是在我的 Profiler 中，我没有看到任何道具。为什么？

以及如何在 Profiler 中查看当前的渲染组件道具？

制作屏幕截图来显示这一点：

最近我开始使用react-native进行开发。当尝试在浏览器（Chrome）上使用react-devtools扩展进行调试时，我只能访问控制台，因为所有组件和元素都是在devtools网页（http://localhost:8081/debugger）中显示的-ui/) 所以现在我正在尝试使用react-native独立版本，但它正在“等待React连接..”，我在底部收到一条消息说“服务器正在侦听端口8097”。

我对端口了解不多，但在我看来，应用程序位于一个端口（8081）上，而react-devtools正在监听另一个端口（8097）。

我adb reverse tcp:8097 tcp:8097在运行react-devtools之前尝试使用，但没有什么区别。

如何检查我的应用程序正在侦听哪个端口？

如何让独立的开发工具运行？

如果有人可以将我链接到有关没有背景的人的端口的良好文档，那也将非常好。

状态定义：

我确实需要知道哪个状态导致了我的代码中的错误，但魔杖工具似乎不起作用。请帮忙。

好奇（且难以诊断）的问题。我在我的网站上添加了一个 CSP，它工作得很好，有 1 个错误似乎只出现在 Firefox 上（猜测它是 Mozilla CSP 实现异常）。但是，我不太确定此时如何更深入地进行诊断。它似乎没有妨碍任何功能 - 一切似乎都在工作，但我看到 Firefox 上弹出错误（并且它的报告非常垃圾，我可以用其他方式处理，但更愿意根本原因和处理）。

这是错误（几乎出现在网站的每个页面上）：

Content Security Policy: The page’s settings blocked the loading of a resource 
at self (“script-src https://code.jquery.com/”). Source: ;(function 
installGlobalHook(window) { ....

我通常通过 CDN 加载 jQuery，并且加载和运行它没有问题，尽管我也尝试下载 jQuery 并在内部加载它（这也工作正常）。

完整的 CSP 是：

Content-Security-Policy: 
default-src 'self'; 
base-uri 'self';
script-src 'self' https://code.jquery.com/;
form-action 'self'; 
font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/;
style-src 'self' https://fonts.googleapis.com/ 
    https://code.jquery.com/
    'sha256N90MKmRow2DpYEVeqcc3uc8pOUsS4Rg4sNmkau1k0xQ=' 
    'sha256-i1EfB2+xYUUG32uDRMNI/DN/F9YIrGWOYdHENz9GKME='
    'sha256-75seZ0liXI7HbegtdV/WH+/9QQJ0CrDacBOViVFXckc='
    'sha256-2KAnfZnKiF2um1+UfXP14UfR93HoXmam2Y1ipeMWRUI='; 
frame-ancestors 'self';
report-uri /csp/csp-report

刚刚重新验证，只在 Firefox 上看到错误。我已经查看了其他相关问题，但似乎没有直接解决此问题（例如：在 Firefox OS 验证器中检测到 CSP 违规）。 …

我的 kotlin 应用程序中有一个端点，如下所示：

    either.eager<String, Unit> {
      val sessionAndCookieUser = commonAuth.decryptCookieGetUser(getCookie(context), ::userTransform).bind()
      val user = sessionAndCookieUser.session.user
      val ctx = Ctx(ds, SystemSession, conf)
      val dbUser = getUserEither(ctx, user.id).bind()

      val signatureAlgorithm = SignatureAlgorithm.HS256
      val signingKey = SecretKeySpec(conf.get(ZendeskJWTSecret).toByteArray(), signatureAlgorithm.jcaName)

      val iat = Date(System.currentTimeMillis())
      val exp = Date(System.currentTimeMillis() + 7 * 24 * 60 * 60 * 1000)

      val token = Jwts.builder()
          .claim("name", dbUser.name)
          .claim("email", dbUser.email)
          .setIssuer(conf.get(StreamAppName))
          .setIssuedAt(iat)
          .setExpiration(exp)
          .signWith(signingKey, signatureAlgorithm)
          .compact()

      context.setResponseCode(StatusCode.OK)
          .setResponseType("application/json")
          .send(jsonObject("token" to token).toString())
    }.mapLeft {
      context.setResponseCode(StatusCode.UNAUTHORIZED)
    }

我正在设置一个响应，jsonObject如果用户已通过身份验证或UNAUTHORIZED …

有人知道为什么我的反应组件开发工具看起来像这样吗？在最近的 React 开发工具主要更新之前，我可以看到所有组件的名称，但现在它看起来像这样。 开发工具视图组件名称都被缩小了！

我试图找出聊天中的消息数量，我查找的每份指南都说我需要MessengerDetailView在搜索栏中输入内容，但我没有得到任何结果。是因为我用的是Mac吗？