1. ?用 Chrome 斷點(diǎn)調(diào)試RN
不用安裝 React Develper Tools 谷歌瀏覽器插件睛挚,也能斷點(diǎn)調(diào)試
搖晃手機(jī),在菜單中選擇 Debug JS Remotely ,自動(dòng)調(diào)用 Chrome
inspect? -->? Sources? --> 找到 debuggerWorker.js ,點(diǎn)開看到源代碼,就能斷點(diǎn)調(diào)試了
2. ?用webstorm斷點(diǎn)調(diào)試 ?expo ?
https://www.jetbrains.com/help/webstorm/react-native.html
先用 expo 打開工程,運(yùn)行app在android或ios
配置webstorm智蝠,注意要去掉這里的 Start React Native Bundler,bundler由expo運(yùn)行
點(diǎn)擊webstorm小蟲子監(jiān)聽奈梳,搖晃手機(jī)開發(fā)者菜單寻咒,點(diǎn)擊debug,就可以調(diào)試了
3. ?用webstorm斷點(diǎn)調(diào)試 react-native 颈嚼,非 expo
用 react-native run-android 運(yùn)行app
不用 webstorm 安裝app,所以不選 Build and launch application
Bundler 已經(jīng)運(yùn)行饭寺,所以刪除 Start React Native Bundler?
(1)先在命令行運(yùn)行:react-native run-android
(2)然后點(diǎn)擊 webstorm 工具欄上的 debug阻课,彈出 Chrome 窗口 React Native Debugger
(3)搖晃手機(jī)叫挟,選中 Debug JS Remotely
(4)搖晃手機(jī),選中 Reload
在 webstorm 內(nèi)限煞,經(jīng)常不停在斷點(diǎn)處抹恳,在 Chrome 內(nèi)設(shè)置斷點(diǎn),webstorm 就能停在斷點(diǎn)處署驻,大坑奋献。
4. ?看組件層次的調(diào)試器,React Developer Tools
https://facebook.github.io/react-native/docs/debugging.html
安裝??
npm install -g react-devtools
運(yùn)行
react-devtools
搖晃手機(jī)旺上,在菜單中選擇 Toggle Inspector