一、使用Chrome調(diào)試
1. 打開方式
模擬器調(diào)試：
Ctrl+m(Windows or Linux)/Command+m(Mac)調(diào)出菜單，選擇Debug JS Remotely，Chrome瀏覽器自動(dòng)彈出，并在http://localhost:8081/debugger-ui下，打開Developer Tools，選擇Sources項(xiàng)，找到自己的工程目錄，即可打斷點(diǎn)了。
真機(jī)調(diào)試：
(1) react-native run-android或者react-native run-ios（打包到手機(jī)）
(2) 搖一搖->Dev Settings（菜單找到開發(fā)設(shè)置）
(3) Debug server host & port for device(ip+port，端口默認(rèn)的是8081)
2. 優(yōu)點(diǎn)
(1) 在運(yùn)行執(zhí)行到斷點(diǎn)時(shí)：
- 可以查看執(zhí)行到斷點(diǎn)變量的值
- 可以按照斷點(diǎn)來走
- 可以到斷點(diǎn)里的具體實(shí)現(xiàn)方法，從而查看完整處理的過程和數(shù)據(jù)變化。
(2) log更清晰
Chrome上顯示的log比直接在終端上通過命令react-native log-android或react-native log-ios打出的log更方便觀察
二、VS code(React Native Tools)
1. 前言
若是采用vscode作為開發(fā)工具，可以通過集成React Native Tools，直接在Vscode中打斷點(diǎn)
2. 使用步驟
(1)在Vscode的擴(kuò)展中，安裝React Native Tools
(2)點(diǎn)擊調(diào)試圖標(biāo)，選擇Attach to packer，點(diǎn)擊啟動(dòng)
(3)在模擬器或者真機(jī)上，選擇Debug JS Remotely，即可在Vscode中直接打斷點(diǎn)了。
坑：如果修改了代碼，直接reload會(huì)出現(xiàn)問題，報(bào)錯(cuò)，并且服務(wù)停掉。
解決方法：在reload之前，先關(guān)掉Vscode中的所有斷點(diǎn)，再reload
