通常、反応アプリケーションのデバッグには、Chrome のインスペクター機能と、最も一般的に使用される 2 つの拡張機能が使用されます。
1. React Developer Tools (主にコンポーネント構造のデバッグに使用)
2. Redux DevTools (主に Redux ストア データのデバッグに使用)
React ネイティブ アプリケーションの場合、通常、 、react-native-debugger が使用されます。独立したアプリケーションなので、別途インストールする必要があります。Mac では、次のコマンドを使用してインストールするか、公式 Web サイトにアクセスしてインストール パッケージをダウンロードできます。
# mac 终端下使用如下命令安装， cask参数是针对安装有GUI界面的APP
brew install --cask react-native-debugger
RN プロジェクトに依存関係を追加する
次の 2 つのパッケージを RN プロジェクトにインストールする必要があります
yarn add redux-devtools-extension remote-redux-devtools
RN プロジェクトが店舗構成を作成
# 引入 composeWithDevTools方法，利用方法生成composeEnhancers并创建store实例
import {composeWithDevTools} from 'redux-devtools-extension';
一般的な従来の使用法
import {
createStore, applyMiddleware } from 'redux';
import {
composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
エンハンサーを使用する場合
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 デバッグ
1. まず、react-native-debugger アプリケーションを起動します。
2. 次に、通常の手順に従って、RN アプリケーションのデバッグ モードを開きます。
3. 最後に異常がなければ、react-native-debugger インターフェイスでコンポーネントの構造を確認します。 、JSコードのデバッグ、収集と分析ストアデータが変更されました
ネットワークを見る
React-native-debugger のデフォルトのネットワーク監視では、React Native アプリケーションのネットワーク リクエストを確認できません。react-native-debugger の構成を変更する必要があります。ファイルを開いた後、defaultNetworkInspect の値を true に変更し、再起動してください
。効果を発揮します！楽しむ！