做react-native的人很多都是web端轉(zhuǎn)過來的掏觉，web端習(xí)慣于用chrome 進(jìn)行調(diào)試猿妈，對(duì)于react-navite chrome調(diào)試方式其實(shí)效率很低温峭、而且很容易就卡主攻泼，還是不如直接在代碼里面查看上下文信息來的舒服揖赴。
對(duì)于做原生開發(fā)出身的雪位，能直接在vscode里面直接調(diào)試打個(gè)斷點(diǎn)就能調(diào)試是非常爽的事情竭钝、而且效能也會(huì)高很多，chrome調(diào)試時(shí)長(zhǎng)就會(huì)出現(xiàn)等待半天的情況。
下面進(jìn)入正題
1香罐、創(chuàng)建vscode 調(diào)試腳本文件【launch.json】
添加react-native調(diào)試腳本卧波，創(chuàng)建launch.json文件
create a launch.json file
點(diǎn)擊create a launch.json file
選擇Attach to package
選擇Attach to packager
至于其他的可選，【Debug Android】【Debug iOS】主要是用于啟動(dòng)App庇茫，我習(xí)慣于在xcode和Android 里面直接啟動(dòng)App港粱，因?yàn)橐煲恍?p>
創(chuàng)建好之后的顯示
然后點(diǎn)擊綠色啟動(dòng)按鈕啟動(dòng)
如果在chrome里面開了debug 記得把chrome 的debug關(guān)掉
2、運(yùn)行App
在Android studio或者xcode里面直接把項(xiàng)目跑起來旦签，
App開啟debug模式
image.png
然后可以可以看到vscode調(diào)試控制臺(tái)輸出連接App成功
image.png
之前chrome的console就會(huì)出現(xiàn)到vscode的控制臺(tái)
image.png
3查坪、斷點(diǎn)調(diào)試
添加斷點(diǎn)
調(diào)試信息
把鼠標(biāo)放到斷點(diǎn)處之前變量參數(shù)，就可以看到運(yùn)行時(shí)的參數(shù)了顷霹，
再也不用添加debugger了
