react-native 0.73 新增 debugger 工具

在 0.73 的版本中新增了新的 debugger 方式,通过打开一个 Chrome 或 Microsoft Edge 调试工具来查看日志,内存等相关。看 0.73 更新博客 。要想启动新的 debug 方式,只需要在 npx react-native start 或 yarn start 或 npm run start 的时候增加参数 --experimental-debugger 即可。

bash 复制代码
yarn start --experimental-debugger

接下来的画面长这样。

然后按下 j 就能开始调试了(仅 Hermes 可用)。开启后会出现这个界面:

这个工具完全可以替换掉使用终端来看日志,这个看日志更直观和方便,比如对象不会像终端的显示,那么多看起来很不方便。

这是新调试工具打印的日志。

这是终端打印的日志。也许有人会问,之前不是也有这样的方式嘛,的确如此,但之前那个需要开启 debugger ,而有一些库是不支持在这种模式下运行的。

之前会使用这个。在我负责的项目中,不能使用这个方式来调试,但是这个调试的出现就能解决这个问题。我希望能新增网络的查看,目前开发过程中网络查看还不怎么方便,所以我自己开发了一个工具专门用来调试。juejin.cn/post/733602... 这里面有介绍,我会一直更新下去。

可能很多人习惯了在终端中查看日志,其实那个工具查看日志很低效,很多日志而且 json 等数据没有格式导致看起来很吃力,虽然已经习惯了,但如果真的能换成像新调试工具的方式来查看,效果会更好。只不过我觉得启动的时候就是调试工具,而不是 nodejs 服务,也就是启动的 nodejs 服务包含在调试应用中的,这样效果更好。我们之所以会习惯那个调试框框,最大的原因就是这个默认的无需再操作的工具。

相关推荐
传奇开心果编程7 小时前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程1 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
500841 天前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos
传奇开心果编程1 天前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack
500841 天前
React Native for OpenHarmony 实战:三方库 react-native-volume-control 的鸿蒙化适配指南
javascript·react native·react.js·electron·harmonyos
500846 天前
React Native for OpenHarmony 实战:三方库 react-native-crypto-js 的鸿蒙化适配指南
javascript·react native·性能优化·electron·harmonyos
500846 天前
React Native for OpenHarmony 实战:三方库 react-native-device-name 的鸿蒙化适配指南
深度学习·react native·react.js·机器学习·harmonyos
500846 天前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
500847 天前
React Native for OpenHarmony 实战:三方库 react-native-device-uptime 的鸿蒙化适配指南
javascript·分布式·react native·react.js·harmonyos
是你的小橘呀7 天前
React Native 3:useEffect 自动请求接口 + 搜索功能 + 封装 Loading 组件
react native