web-dev-qa-db-ja.com

react.jsライブラリをデバッグする方法

私は約1年間reactを使用していて、最近、 react-beautiful-dnd について詳しく調べたいと思いました。私は過去にVanillajsとjQueryのプラグインを作成しましたが、react.jsプラグインを作成する方法や、デバッグする方法がわかりません。私はこのプラグインをデバッグし、それが何よりもどのように機能するかを確認することに興味があります。

通常、JSプラグインでは、ほとんどが1つのファイルであるため、各関数内のconsole.logを使用すると、特定の関数がトリガーされる理由とタイミングを十分に明確に理解できます。react.jsプラグインで同じことを行うにはどうすればよいですか。 ？

node.jsreactjsnode-modules
9
Alexander Solonik

デバッグする方法は複数あります。

まあ、私はよく場所をたくさん使いますconsole.log、console.dirおよびutil.inspectコード全体でステートメントを作成し、そのロジックに従います。

react-beautiful-dnd

残念ながら、特定のトピックに関するドキュメントや実行方法はあまりありません。しかし、これが私が役に立ったと思ったものです。 クイックスタートガイドのこのリンクをたどることができます： https://github.com/atlassian/react-beautiful-dnd/issues/ 36

すべての例

基本的な使用例

直接操作できるように、codesandboxにいくつかの基本的な例を作成しました。

  1. 単純な垂直リスト
  2. 単純な水平リスト
  3. 2つのリスト間の単純なDnD

ライブラリをデバッグするには：

そのライブラリをデバッグする方法は次のとおりです。これが最も基本的な方法です。

  • インストールします。
  • 使用しているものとデバッグする必要があるものを確認してください。
  • Node_modulesでそのメソッドを見つけます。
  • そのメソッドのコードに宣言があるかどうかを確認してください。
  • はいの場合は、コンソールログをいくつか入れて、コンソールに出力されるかどうかを確認します。
  • 次に、コンソールでログを確認します。
  • 探しているものが得られるまで、コンソールログのプロセスを続けます。
5
Harshal

Node.jsアプリケーションをデバッグするにはどうすればよいですか？ 。

これには、reactアプリケーションのデバッグを行う方法についてかなりの数の回答があります。

3
Raj Kumar

そこからnode_moduleとconsole.logでデバッグしたいライブラリの関数を見つける必要があります。 console.logのnode_module/plugin/libファイルではなく、通常node_module/plugin/distまたは.jsxにある解析済みファイルをnode_module/plugin/srcする必要がある場合があります。

3
Matthew Barbara