1

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

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

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

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

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

よろしくお願いします

2 件の回答 2

1

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

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

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


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

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

1
  • やっぱりそうなんですかねぇ・・・。
    – zumiyami
    Commented 2019年6月9日 10:00
0

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

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

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

1
  • 開発者ツールにも整形機能があるためそれを使っていますが、それでも圧縮後のソースは読みづらく、処理も追いづらいですが、やっぱりやる気で読むしかないでしょうか..。それともbeautifierには変数名等も解決してくれるツールがあるんでしょうか?
    – zumiyami
    Commented 2019年6月9日 1:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。