在调试 React Native 时如何获得有用的调用堆栈信息？

Question

当我尝试调试 React Native 时，它​​通常看起来像这样。

at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:785)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:811)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:735)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:715)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:634)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:534)
at Object.receiveComponent (ReactReconciler.js:131)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:737)

没有有用的信息，如果我使用debugger命令查看是什么启动了 50 深度的调用堆栈，那么它几乎总是归结为onmessage“debuggerWorker.js”中的方法，而且它的有用性几乎为零。你如何真正调试你的 React Native 应用程序？

onmessage = function(message) {
  var object = message.data;

  var sendReply = function(result) {
    postMessage({replyID: object.id, result: result});
  };

  var handler = messageHandlers[object.method];
  if (handler) {
    // Special cased handlers
    handler(object, sendReply);
  } else {
    // Other methods get called on the bridge
    var returnValue = [[], [], [], 0];
    try {
      if (typeof __fbBatchedBridge === 'object') {
        returnValue = __fbBatchedBridge[object.method].apply(null, object.arguments);
      }
    } finally {
      sendReply(JSON.stringify(returnValue));
    }
  }
};

Answer 1

我倾向于使用堆栈跟踪来找出发生错误的一般区域，然后使用 Web 调试器实际找出错误所在。

https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools

它实际上非常好，您可以在 chrome 开发工具的源选项卡中打开所有 js 文件，然后放入调试点，然后单步执行文件并查看变量。