55640


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

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

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

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

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

よろしくお願いします


CC BY-SA 4.0
2019-06-07T23:45:08.497
55623
2019-06-09T04:05:05.597
2019-06-08T23:34:16.903
34604
34604
question
javascript
webpackなどで圧縮されたコードを読み解く方法？


javscriptの見た目を改善するツール、beautifierという名前のものがネット上に多数あるので、使ってみてはいかがでしょうか。

例えばhttps://beautifier.io/など。  
「js beautify」で検索してトップに出てきたものです。

圧縮されたjsを貼り付けるときれいな構文・インデントを持ったスタイルに変換してくれなす。


CC BY-SA 4.0
2019-06-09T00:04:20.147
55639
2019-06-09T00:04:20.147
31146
55623
answer


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

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

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

* * *

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

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


CC BY-SA 4.0
2019-06-09T04:05:05.597
55640
2019-06-09T04:05:05.597
32986
55623
answer