前言
- React-Native-Debugger 是在官方 Remote Debugger 調(diào)試工具的基礎(chǔ)上蜗元，集成了 React Inspector 以及 Redux DevTools 的調(diào)試工具坡倔。
- 可以用來(lái)代替之前一直使用的 Chrome 遠(yuǎn)程調(diào)試，比較方便地查看元素布局府框，和Redux管理的狀態(tài)
- 具體介紹看 GitHub: https://github.com/jhen0409/react-native-debugger
redux devtools
- 可在調(diào)試工具窗口單擊右鍵比规，點(diǎn)擊
toggle XXX來(lái)選擇關(guān)閉或打開(kāi)某項(xiàng)窗口若厚，比如：react devtools、redux devtools蜒什。 - Redux devtools打開(kāi)時(shí)位于窗口左上方测秸，分為左右兩部分。
- 左邊可以觀察
actions執(zhí)行的歷史灾常，回溯到某個(gè)action霎冯、回放action執(zhí)行過(guò)程等等。 - 右邊可以用三種方式:
tree钞瀑、chart沈撞、raw之一來(lái)展示Action或者state的結(jié)構(gòu)，或者通過(guò)diff來(lái)觀察對(duì)比執(zhí)行action后的pre state和next state雕什。 -
還可以將狀態(tài)過(guò)程保存到本地缠俺，或上傳某個(gè)記錄文件(我曹拧廊，查bug時(shí)利器)
image.png
react devtools 和 element inspector
-
react devtools位于窗口左下，顯示頁(yè)面組件結(jié)構(gòu)晋修，以及每個(gè)組件的prop、state凰盔、樣式等屬性墓卦、還有對(duì)應(yīng)代碼所在位置(雙擊即可打開(kāi)對(duì)應(yīng)的js文件)。
image.png -
element inspector位于模擬器/真機(jī)的界面上户敬，選擇Inspect選項(xiàng)后落剪，即可在界面上點(diǎn)擊任意元素，然后在react devtools定位到該元素尿庐，同時(shí)不會(huì)觸發(fā)onPress等點(diǎn)擊事件忠怖。選擇Touchables選項(xiàng)后，可在界面上顯示出可以觸發(fā)點(diǎn)擊事件的元素抄瑟。
image.png
developer tools
-
developer tools就相當(dāng)于react-native自帶的debugger工具凡泣，可在console里查看控制臺(tái)信息。
