web-dev-qa-db-ja.com

ブラウザ/プラグインを使用したJSXのデバッグ

JSXファイルをデバッグする方法はありますか？

Safari/Chromeの[リソース]タブをチェックすると、.jsxファイルが表示されません。デバッガを使用できますか？

javascriptreactjsreact-jsx
16
user544079

Chrome Extension をインストールしたら、devTool（f12）を開くと次のように表示されます。

  1. 新しい反応タブ-反応要素の検査に使用します（通常の検査と同様）。

enter image description here

  1. ソースタブ（左側のパネル）に、JSXファイルを表示してコードの横にブレークポイントを設定できる新しいアプリリスト。

enter image description here

注：再起動が必要な場合がありますchromeそれを実行するには

11
Elia Weiss

Webpackを使用している場合は、devtool構成をwebpack.config.js。

module.exports = {
    devtool: 'source-map'
   // rest of the webpack configurations
}

元のソースコードを維持します。このソースコードは、ブラウザ開発者ツールの[ソース]タブで確認できます。 （chrome/firefoxを使用している場合は、ソースタブでCtrl + Pデバッグ/分析するファイルをすばやく検索します。）

Webpack devtoolの詳細 here 。

お役に立てれば ：）

4
Hardik Modha

Chrome拡張機能 があり、デベロッパーツールに別のタブを追加して、デバッグを許可しますReactコンポーネント。プレビューと読み取りを確認できます詳細については、 Reactのドキュメント を参照してください。

他のブラウザはReactデバッガ、まだサポートしていません 。

4
daniula

Browserify＆watchify with -dは、それらを使用してソースを構築している場合にソースマップを生成するのに役立ち、エラーが発生したファイルを追跡できます。

1
zuo