調(diào)試react應(yīng)用通常利用chrome的inspector的功能和兩個(gè)最常用的擴(kuò)展
1、React Developer Tools （主要用于debug組件結(jié)構(gòu))
2、Redux DevTools （主要用于debug redux store的數(shù)據(jù)）


對于react native應(yīng)用，我們一般就使用react-native-debugger了，它是一個(gè)獨(dú)立的應(yīng)用，需要單獨(dú)安裝，在mac下可以用如下命令安裝或到官網(wǎng)下載安裝包

# mac 終端下使用如下命令安裝， cask參數(shù)是針對安裝有GUI界面的APP
brew install --cask react-native-debugger

RN工程添加依賴

RN工程中需要安裝如下兩個(gè)包

yarn add redux-devtools-extension remote-redux-devtools

RN工程創(chuàng)建store的配置

# 引入 composeWithDevTools方法，利用方法生成composeEnhancers并創(chuàng)建store實(shí)例
import {composeWithDevTools} from 'redux-devtools-extension';

通常的常規(guī)用法

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

使用 Enhancers的情況

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

具體的場景參考官方文檔的指引 https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux

RN調(diào)試

1、先啟動(dòng)react-native-debugger應(yīng)用
2、然后按正常步驟開啟RN應(yīng)用的debug模式
3、最后沒有任何異常的話，就在react-native-debugger界面查看組件結(jié)構(gòu)，以及調(diào)試JS代碼，收集與分析store的數(shù)據(jù)變化了

查看network

默認(rèn)的react-native-debugger的network監(jiān)視，是看不到react native 應(yīng)用的網(wǎng)絡(luò)請求的，需要更改下react-native-debugger的配置

打開文件后，修改defaultNetworkInspect的值為true，然后重啟后生效！enjoy!

查看AsyncStorage的數(shù)據(jù)

直接在consloe輸入如下命令，或直接查看當(dāng)前storage的數(shù)據(jù)庫的內(nèi)容，不用打開AS去看應(yīng)用的sqlite中的數(shù)據(jù)

console.log(showAsyncStorageContentInDev())

注意：showAsyncStorageContentInDev()的信息為兩部份，上面部份是key,value的表格預(yù)覽效果，value的值比較長的時(shí)候是沒有顯示全的；表格下面是一個(gè)Object對象，才是實(shí)際上key,value的真實(shí)值，即要copy value的值時(shí)，需要展開Object對象的
文章來源地址http://www.zghlxwxcb.cn/news/detail-576172.html

參考文檔

• https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux
• https://github.com/jhen0409/react-native-debugger
• How to use Redux devtools with React Native

到了這里，關(guān)于工欲善其事，必先利其器之—react-native-debugger調(diào)試react native應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！