Q&A
> 「どうにか頑張る」以外の方法はありません。
やはりソースマップが必要ですか･･･。
原因箇所は特定できているので、あとは前後の処理から文脈的に原因を突き止めていくしかない、というところでしょうか･･･。もう少し頑張ってみます。
前提・実現したいこと
私のよくアクセスする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件
0
私が原因をつきとめ…
リバエンしてサービス作り直すならともかく、
開発者に知らせても無駄です。
UglifyJSっぽいもので難読化も掛けられていますね。
この1文字のよくわからん引数名、関数名、変数名がUglifyの特徴で、まぁ読む気しないですね。
またWebpackで1つのJSファイルに無理やり圧縮しているので末尾の数百行を覗いてライブラリの事しか書いてないでしょう。
Chromeのデベロッパーツールでは難読化をかけられたJSファイルを開いた後、
窓の左下にある{}アイコンをクリックすれば1行にまとめられたコードに対して
インデントを綺麗に整えて読みやすくしてくれますので読み始める事は可能です。
しかし、よしんば不具合を見つけて理解出来ても、どうやって開発者に知らせる事が出来るんでしょうか。
変数名・関数名・引数名も何も分からないのに？
もしかすると、JavaScriptですらない、CoffeeScriptやPureScriptなどの別言語からコンパイルされたものかもしれません。
そんな状態でL.5300の80文字目がエラーの原因だと思うので直してくださいと言われても
「何いってんのこいつ？」みたいになりますし、他の箇所の影響も確認しなければなりませんし、
ぶっちゃけ何の足しにもならないでしょうね。
投稿2019/02/15 02:58
総合スコア21400
0
ベストアンサー
このバンドルされたファイルをデバッグする方法が、調べてもわかりませんでした。
他人のコードの場合は、「どうにか頑張る」以外の方法はありません。
自分で作るコードの場合、一緒にソースマップを出力させることで、元のコード上でデバッグできるようになります。
投稿2019/02/14 22:35
総合スコア146544
圧縮したコードをある程度見慣れていると、「これはBabelのヘルパーだ」というようにコードの意味が判別できることもありますし、メソッド名はそのまま残ることが多いので、一定程度の推定に役立ちます。
ただ、関数主体で組み上げたようなシステムだと、関数名が消し飛んでしまうのでものすごく追いづらいです。
記事本文に含まれる埋め込みCodePenが高確率でページ内の何かしら(ここまでは把握できなかった)と干渉し、記事本文が描画される前にJavaScriptがエラーを出して止まってしまうのが原因だったようなので、サイトからの記事本文レスポンスを受け取るだけで本文が取れました。
> 関数名が消し飛んでしまうのでものすごく追いづらい
確かにとても読みづらかったです。できればあまり読みたくないですね･･･。
思ったより遠回りしていたので、次からは原因の切り分けは慎重に行っていこうと思います。
ご回答ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/16 03:49 編集
2019/02/16 08:27