search

工作流

hashtag
Debugging

hashtag
In-App Developer Menu

打开应用内的调试菜单：

  • 在真机上，摇一摇手机；

  • 在模拟器上，使用快捷键 ⌘D 或 ⌃⌘Z 。

React-Native-In-APP-Dev-Menu.png

注意：在模拟器上使用时，要确保 I/O → Keyboard → Connect Hardware Keyboard 已勾选 ☑️ 。

hashtag
Chrome Developer Tools

在开发者菜单选择了 Debug JS Remotely 后，就能在 Chrome 内调试 JavaScript 代码了。地址：http://localhost:8081/debugger-uiarrow-up-right 。

在 Chrome 的 Menu 中选择 More Tools → Developer Tools 即可打开 Developer Toolsarrow-up-right，也可以使用快捷键 ⌘⌥I 或 F12 。另外，打开 Pause On Caught Exceptions 可以提高 deubg 的体验。

React Developer Tools Chrome 插件在 React Native 项目中无法使用，需要使用 react-devtools ，后面会详细介绍。

hashtag
Safari Developer Tools

在 Safari 上调试 iOS 模拟器上的应用时，不需要打开 Debug JS Remotely 。

详细步骤：

hashtag
React Developer Tools

  • React DevTools is available as a built-in extension for Chrome and Firefox browsers.

  • This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).

  • It works both with React DOM and React Native.

  • 文档：react-devtoolsarrow-up-right

安装：

运行：

如果你不想全局安装 react-devtools ， 可以把 react-devtools 设置为项目依赖。步骤：

  • 执行 npm install --save-dev react-devtools 以添加 react-devtools 包到你的项目中；

  • 然后添加 "react-devtools": "react-devtools" 到你的 package.json 的 scripts section ；

  • 最后在你的项目的目录下执行 npm run react-devtools 来打开 DevTools 。

hashtag
符号解析

在 React Native template project 中， metro-symbolicate 包是默认安装的。

Release build 的报错堆栈需要进行符号解析后才能看到原始内容。将生成的 source map 和stack trace 传给 metro-symbolicate 即可进行符号解析。

hashtag
Testing

https://reactnative.dev/docs/testing-overviewarrow-up-right

diagram_testing.svg
Previous基础Next设计

Last updated