webpackによりバンドルされたJavaScriptをデバッグしたい

前提・実現したいこと

私のよくアクセスするWebサイトがあるのですが、最近JavaScriptのエラーが発生し、本文が表示されないことが頻発していました。
その不具合についてサイトの管理人へ報告したのですが、メール、SNSなどでも返信は得られず...(最近はSNSでも活動していなかった)。

発生している問題・エラーメッセージ

上を受けて、一時的な対策として私が原因をつきとめ、それを修正したJavaScriptを使って記事本文を読めるようにしよう、と考えました。
ソースコードを読むとbodyタグ内には<div id="root"></div>という要素1つしかなかったので、JavaScriptで本文を読み込んでいると考えました。
そこでjsファイルを開くとこのような内容になっており、とても読めるものではありませんでした。

javascript
1(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[function(e,t,n){"use strict";e.exports=n(17)},function(e,t,n){"use strict";(function(e,r){n.d(t,"a",function(){return tt});var 
2// 以下、長大になるので省略します

このソースコードについて調べるとwebpackのバンドルという機能を使っている、というところまではわかりましたが、このバンドルされたファイルをデバッグする方法が、調べてもわかりませんでした。

試したこと

ブレイクポイントを使い、バンドル済みのJavaScriptで原因箇所を突き止める。

⇒前後の関数の呼ばれ方や変数名などが複雑で、原因箇所がわかっても、原因がわからない

補足情報（FW/ツールのバージョンなど）

Google Chrome, Firefoxでデバッグを行いました。

回答よろしくお願いします。

行動規範の内容に同意します

回答2件

私が原因をつきとめ…

リバエンしてサービス作り直すならともかく、
開発者に知らせても無駄です。

UglifyJSっぽいもので難読化も掛けられていますね。
この1文字のよくわからん引数名、関数名、変数名がUglifyの特徴で、まぁ読む気しないですね。
またWebpackで1つのJSファイルに無理やり圧縮しているので末尾の数百行を覗いてライブラリの事しか書いてないでしょう。

Chromeのデベロッパーツールでは難読化をかけられたJSファイルを開いた後、
窓の左下にある{}アイコンをクリックすれば1行にまとめられたコードに対して
インデントを綺麗に整えて読みやすくしてくれますので読み始める事は可能です。

しかし、よしんば不具合を見つけて理解出来ても、どうやって開発者に知らせる事が出来るんでしょうか。
変数名・関数名・引数名も何も分からないのに？
もしかすると、JavaScriptですらない、CoffeeScriptやPureScriptなどの別言語からコンパイルされたものかもしれません。

そんな状態でL.5300の80文字目がエラーの原因だと思うので直してくださいと言われても
「何いってんのこいつ？」みたいになりますし、他の箇所の影響も確認しなければなりませんし、
ぶっちゃけ何の足しにもならないでしょうね。

投稿2019/02/15 02:58

miyabi-sun

総合スコア21158

jhenk

2019/02/16 03:49 編集

> 開発者に知らせても無駄です。 > よしんば不具合を見つけて理解出来ても、どうやって開発者に知らせる事が出来るんでしょうか。「開発者が活動していないから、もしJavaScriptのコードをいじるだけで直せるエラーだったら、どうにか直して早く記事が読みたい!!(わがまま)」というのが今回の質問の経緯ですので、あくまでも個人的にデバッグする範疇で、管理人に不具合の原因箇所などについて連絡する予定はありません(わかりづらい質問文ですみません)。もし開発者に原因箇所を伝えるとしたら、開発者の手元にはソースマップがあるはずなので、それをもとにエラーについて追ってもらえると思っていましたが、さすがに厚かまし過ぎましたね･･･。 --- > UglifyJSっぽいもので難読化も掛けられていますね。はい、webpackのバンドル時のオプションによってはコードの圧縮などが行われるようですので、恐らくそのためかと思っています。質問当初は「minifyしたんなら逆も出来るのだろう」と思っていましたが、冷静に考えれば失われた関数名やクラス名などを元に戻す方法なんて無いですね･･･。考えが甘かったです;。 --- > 末尾の数百行を覗いてライブラリの事しか書いてないでしょう。そうなんですね。webpackがどのようにファイル群を圧縮しているのかくわしく調べられていなかったので、こちらについても調べてみます。貴重な情報ありがとうございます。

jhenk

2019/02/16 08:27

当初の問題が解決しましたので、この質問を閉めさせていただきます！記事本文に含まれる埋め込みCodePenがページ内の何かしらと干渉し、記事本文が描画される前にJavaScriptがエラーを出して止まってしまうのが原因だったようなので、サイトからの記事本文レスポンスを受け取るだけで本文が取れました。意外と簡単に解決することに思ったより遠回りしていたので、次からは原因の切り分けは慎重に行っていこうと思います。ご回答ありがとうございました！

行動規範の内容に同意します

ベストアンサー

このバンドルされたファイルをデバッグする方法が、調べてもわかりませんでした。

他人のコードの場合は、「どうにか頑張る」以外の方法はありません。

自分で作るコードの場合、一緒にソースマップを出力させることで、元のコード上でデバッグできるようになります。

投稿2019/02/14 22:35

maisumakun

総合スコア145184

jhenk

2019/02/15 18:53

> 「どうにか頑張る」以外の方法はありません。やはりソースマップが必要ですか･･･。原因箇所は特定できているので、あとは前後の処理から文脈的に原因を突き止めていくしかない、というところでしょうか･･･。もう少し頑張ってみます。

maisumakun

2019/02/16 00:05

圧縮したコードをある程度見慣れていると、「これはBabelのヘルパーだ」というようにコードの意味が判別できることもありますし、メソッド名はそのまま残ることが多いので、一定程度の推定に役立ちます。ただ、関数主体で組み上げたようなシステムだと、関数名が消し飛んでしまうのでものすごく追いづらいです。

jhenk

2019/02/16 08:25 編集

記事本文に含まれる埋め込みCodePenが高確率でページ内の何かしら(ここまでは把握できなかった)と干渉し、記事本文が描画される前にJavaScriptがエラーを出して止まってしまうのが原因だったようなので、サイトからの記事本文レスポンスを受け取るだけで本文が取れました。 > 関数名が消し飛んでしまうのでものすごく追いづらい確かにとても読みづらかったです。できればあまり読みたくないですね･･･。思ったより遠回りしていたので、次からは原因の切り分けは慎重に行っていこうと思います。ご回答ありがとうございました！

行動規範の内容に同意します

あなたの回答