React ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介

React ソース コードをデバッグするにはどうすればよいですか?次の記事では、さまざまなツールで React のソース コードをデバッグする方法について説明し、コントリビューター、create-react-app、vite プロジェクトで React の実際のソース コードをデバッグする方法を紹介します。

React のクローンを作成します

React をローカルにクローンし、依存関係をインストールします。

git clone https://github.com/facebook/react.git

プロジェクトをコンパイルします

単純な yarn ビルド を実行するだけでは、ソースマップは生成されません。これは私たちが望んでいることではありません。最新のエディターに必要な ソースマップ## をコンパイルする必要があります。 #デバッグ用に実際のソース コードにマップします。

現在の反応プロジェクトでは、パラメーターを追加するだけではソースマップを生成できません。

scripts/rollup/build.js でいくつかの構成を変更する必要があります [推奨学習: vscode チュートリアル ,プログラミング指導]

①: ソースマップを true に変更します

②: コメント部分ではソースマップ プラグインを生成できません

ok 、たくさんあるように見えますが、実際にはすべて大まかにつながっています (353-355、387-415)。いくつかのプラグインはコメントアウトされています。現時点では、

yarn build

# をビルドできます。

##注: ビルドに失敗した場合は、jdk のインストールを求められますので、エラーメッセージに従ってインストールしてください。

成功した結果は次のとおりです。

デバッガーを実行します

に従います。公式ドキュメント

基本的な開発ファイルのディレクトリは /fixtures/packaging/babel-standalone/dev.html にあることがわかったので、最初に html に基づいて簡単なデバッグ設定を実行しました。

vscode

1.

launch.json を作成します

2.

launch.json を変更します

Configuration<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 &quot;version&quot;: &quot;0.2.0&quot;, &quot;configurations&quot;: [ { &quot;type&quot;: &quot;chrome&quot;, &quot;request&quot;: &quot;launch&quot;, &quot;name&quot;: &quot;Open dev.html&quot;, // 这里路径可能不一样 做统一调整 修改为如下 &quot;file&quot;: &quot;${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html&quot; } ] }</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、ソース コードにブレークポイントを設定し、クリックしてデバッグを開くと、ソース コードが正常に実行されたことがわかります。

注: すでにこの時点でソースマップを直接

/packages/react-dom

または /packages/react に置くと、コードはブレークポイントが設定されるまで実行されます

webstrom

webstrom は非常にシンプルです。dev.html を右クリックするだけで

dev.html

: をデバッグできます。 上記の例に示すように、ソース コードのデバッグ ニーズのほとんどを満たしており、いくつかのコンポーネントまたはフックを追加してデバッグすることもできます。実際のプロジェクトのソース コードを読みたい場合は、読み続けてください。

create-react-app でのデバッグ

通常、create-react-app または vite に基づいてプロジェクトを実行します。npm リンクを使用してソース コード リンクをデバッグできます。

上記のケースは反応開発者に適しており、ニーズの一部を満たしていますが、私たちのほとんどは通常、create-react-app または vite に基づいてプロジェクトを実行します。npm リンクを通じてリンクできます。 。

①: create-react-app プロジェクトを作成します

②:

react

,

react-dom

を React プロジェクトのグローバルにリンクします。

注: 実際の現在の場所に従って実行する必要があります。つまり、build/node_modules/react および build/node_modules/react-dom に移動します。

npm link

を個別に実行するだけです。

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>cd build/node_modules/react &amp;&amp; npm link</pre><div class="contentsignin">ログイン後にコピー</div></div>以下は成功です:そして、react-dom もリンクします。 ああ、

③: 在create-react-app的项目中link react与react-dom

 npm link react react-dom

大功小成，接下来开始正式的debugger.

vscode如何debugger

官方已经给出部分文档, 参考文档: 文档

• 先启动项目 yarn start
• 增加launch.json配置: 文档

注意:
1、如果你项目端口进行了修改，需要把上方的端口也做修改.
2、官方提供的是edge浏览器，如果你想改谷歌浏览器只需要把type修改为chrome

笔者的配置如下:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "调试creat-react-app源码",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

• 找个位置打上断点进行调试③、④为我打上断点的位置，点击 ⑤ 即可看到进入源码啦(可能要多点几下)

至此：我们已经大功告成，可以进行源码调试。

webstrom如何debugger

webstorm就显得十分简单，参考官方文档: 文档

• 打上断点
• 启动项目 yarn start
• 使用按键打开调试面板, 文档

调试React vite项目

和上方一致，也是通过link

总结：

调试源码的逻辑核心在于sourcemap，但是我们不难发现其中存在一些问题:

1、当前我们跨项目进行调试（源码在react项目中，我们的项目在另外一个文件中），导致类型管理出现问题, 这是基于开发项目的定义管理，不同编辑器表现不同.

• vscode这是因为vscode默认解析ts的，但是不会默认识别flow的语法，所以这种的代码会解析成ts语法，就会报错，我们在项目增加 .vscode/settings.json 增加配置:

{
  "javascript.validate.enable": false
}

即表现正常，不再报错:

• webstorm

webstrom则是无法找到定义

更多关于VSCode的相关知识，请访问：vscode基础教程！

以上がReact ソースコードをデバッグするにはどうすればよいですか?複数のツールを使用したデバッグ方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。