react-native 0.73 新增 debugger 工具

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

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

接下来的画面长这样。

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

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

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

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

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

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

相关推荐
wordbaby4 小时前
如何封装一个生产级的 React Native 分页列表 Hook
前端·react native·react.js
沐言人生2 天前
ReactNative 源码分析5——ReactActivity之启动RN应用
android·react native
沐言人生3 天前
ReactNative 源码分析4——ReactActivity之加载JSBundle
android·react native
沐言人生4 天前
ReactNative 源码分析3——ReactActivity之初始化RN应用
android·react native
一个扣子4 天前
Hermes 未来路线图:2025 年起的新特性与 React Native New Architecture 协同
react native·未来发展·路线图·hermes·字节码diffing·性能增强
沐言人生5 天前
React Native 源码分析1——HybridData 机制深度分析
android·react native
空中海5 天前
01 React Native 基础、核心组件与布局体系
javascript·react native·react.js
Yue1685 天前
一文教你五分钟学会Zustand,React状态管理更加方便!
react native
空中海5 天前
03 性能、动画与 React Native 新架构
react native·react.js·架构
空中海5 天前
02 React Native状态、导航、数据流与设备能力
javascript·react native·react.js