webpackなどで圧縮されたコードを読み解く方法？


興味本位でサイト（TwitterやQiitaなど）がどんなふうにそれ（例えばモーダルダイヤログ）を作ってるのかを調べたいと思い、JSファイルを開発者ツールで見てみることがありますが、まったく読めません

これはソースを圧縮してるからだと思いますが、どうすればこれを読み解くことができますでしょうか？一見すると全然それ（モーダルダイヤログなど）に関係ないソースに見えますし、変数や関数がわかりづらく、ソース自体も追いにくいです

マップファイルがあればもう少し楽かもしれませんが、上でかいたTwttterやQiitaはマップファイルを公開していません

ただ、こういった場合にもソースを読み解けるように何かデバッグ？方法があるのではないかと思い質問に至った次第です

こういった事態で有効なデバッグ？方法を教えてください(圧縮はwebpackに限らないのでwebpackタグはつけておりません)

よろしくお願いします




ソースマップを出力していない場合、 **頑張ってどうにかする** しかありません。

  * エラーが発生しており、その原因を特定したい状況の場合、エラーが発生したファイル名、行番号、列番号から、だいたいの位置を把握し、エラー内容と併せて周辺の処理を読みます。

  * エラーは発生しておらず、どのように実装しているのかを知りたい機能がある場合、バインドされているイベントリスナーから、当該処理のおおよその位置を特定し、周辺処理を読みます。

* * *

また、圧縮されたコードには、 **メソッド名やプロパティ名などが残っていることが多い**
ので、メソッドやプロパティの名称に使用されていそうな単語や、コード内で使用されていそうな属性名や属性値などで、コード内検索を行なうことでも、関連する処理の位置が特定可能な場合があります。

ある程度読み慣れれば、圧縮されたコードに頻出するヘルパーも判別出来るようになってくるはずなので、それらから頑張って読んでゆくと良いと思います。




ソースマップを出力していない場合、 **頑張ってどうにかする** しかありません。

  * エラーが発生しており、その原因を特定したい状況の場合、エラーが発生したファイル名、行番号、列番号から、だいたいの位置を把握し、エラー内容と併せて周辺の処理を読みます。

  * エラーは発生しておらず、どのように実装しているのかを知りたい機能がある場合、バインドされているイベントリスナーから、当該処理のおおよその位置を特定し、周辺処理を読みます。

* * *

また、圧縮されたコードには、 **メソッド名やプロパティ名などが残っていることが多い**
ので、メソッドやプロパティの名称に使用されていそうな単語や、コード内で使用されていそうな属性名や属性値などで、コード内検索を行なうことでも、関連する処理の位置が特定可能な場合があります。

ある程度読み慣れれば、圧縮されたコードに頻出するヘルパーも判別出来るようになってくるはずなので、それらから頑張って読んでゆくと良いと思います。

