フォームより入力された値をconsole.log()にて表示させたい

Question

前提・実現したいこと

こちらサイトの自動買取査定フォームの、「重さ(g)」を入力した場合、その値をJSファイルの方で取得していると思うのですが、そこの部分をデベロッパーツールにて、console.log(weight)のような形でデバッグがしたいです。

試したこと

デベロッパーツールにて確認出来た、webpack:// > src > main.jsが該当サイトのJSファイルと思われる為、main.jsにて、console.log(this.weight)として、フォームの種別を選択し、重さ(g)を入力したのですが、コンソールにはweightの値は表示されませんでした。
デバッグツールのコンソール欄に、console.log(this.weight)こちらも試しましたが、結果は「undifined」と表示されました。
自動買取フォームの計算ロジック部分は、下記になります。

maxPriceCalculate:function(){
            if(this.preciousMetal == "gold") {
             console.log(this.weight)
                this.priceTotal = (this.goldMaxPrice * this.weight).toLocaleString();
            }
            else if(this.preciousMetal == "silver") {
                this.priceTotal = (this.silverMaxPrice * this.weight).toLocaleString();
            }
            else if(this.preciousMetal == "platina") {
                this.priceTotal = (this.platinaMaxPrice * this.weight).toLocaleString();
            }
            else if(this.preciousMetal == "none") {
                this.priceTotal = "";
            } else {
                this.priceTotal = "";
            }
        }

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

ブラウザ: google chrome
OS: Mac OS

※該当ファイルの「main.js」は文字数制限がかかってしまい全文載せれませんでした為、お手数をおかけし申し訳ないのですが、該当ページにてご確認の程、頂けましたら幸いです。

Comments

[yambejp]

> maxPriceCalculate:function(){

が何をしたいかわかりません。
最低限動作する（もしくはエラーがわかる）ソースは提示できませんか？

[k-g-11]

恐らく、デベロッパーツールにて確認出来た「webpack:// > src > main.js」こちらのファイルが該当のサイトのJSファイルであると思われるのですが、全てのコードを載せた場合、文字数制限となってしまう状況でして。。
もし、可能でしたら、お手数ですが、該当サイトにて確認頂けましたら幸いです...

[k-g-11]

>maxPriceCalculate:function(){
こちらの関数ですが、恐らく自動計算フォームにて、直近5日間で一番買取価格が高かった日の価格と入力された重さを計算し、査定額を出している部分だと推測しております。

[yambejp]

これって他人のサイトですか？
回答者に他人のサイトを見て答えろは無理がありませんか？

[k-g-11]

いえ、こちらのサイトは自社で運営しているサイトになります。

[hiroo_mokumoku]

自社で運営されているなら自社のエンジニアさんに確認すれば良いかと思いますが。

[k-g-11]

>自社で運営されているなら自社のエンジニアさんに確認すれば良いかと思いますが。
当社、JS,Vue.jsのエンジニアがおらず、自分が調査し、解決するしかないといった状況に陥ってしまいまして、自分で解決するしかない状況にあるのですよね。。

Answer 1

関数実行中の変数の状態を確認したいのなら、まずブレークポイントを貼る必要があります。
残念ながら、このソースはソースマップ側(main.js)のソースにブレークポイントが設置できない（行番号に関するデータが入っていないのか）ので、実ファイル側(app.js)にブレークポイントを貼って確認しましょう。イベントハンドラ名はそのままになっているようなのでmaxpriceなんとかで検索かければ見つかると思います。
※windows10 chromeとfirefoxで確認。
まあ、app.jsにconsole.log書きながら開発環境側で調査するのが一番だと思いますが。

※個人的感想
これ、本当に一人でやる作業ですか？他に誰も頼れないのですか？本当に「元のプロジェクトデータを入手」できないのですか？もっと詳しいエンジニアを雇う選択肢はないのですか？

Comments

[k-g-11]

ご回答ありがとうございます。
回答依頼に応えて下さり、誠に感謝です。
app.js側に、ブレークポイントを貼ってデバッグの方、行って行ければと存じます。

>元のプロジェクトデータを入手
こちらなのですが、自分は新米プログラマーなもので、良くわかっていないのですが、元のデータの「main.js」ファイルは上司に頼めば、恐らく入手できるかと思うのですが、ファイル単体で入手したとしても該当サイトの自動買取査定フォームの重さなどを打ち込み、その部分をスクリプト側でconsole.log()しながら、確認していくというのは、出来ない為、デバッグには使用できないと思い、未だ元データの方の依頼はしていないといった状況です。元データのmain.jsを入手した場合は、もっと効率的なデバッグの方法はあったりしますでしょうか...?
まだまだ、経験が浅いもので、とんちんかんな質問になってしまっていたら申し訳ないのですが、ご助言頂けましたら幸いです。。

[hope_mucci]

元のプロジェクト一式は開発用のデータなので、当たり前ですが現状よりもデバッグは遥かに容易です。しかし、vueやwebpackの仕組みが良くわからない状態で入手してもすぐに役に立たない可能性はあります。開発手法を覚えればよいのですけが、現状のスキルレベルでは長い時間がかかるでしょう。

私が考える現状で最も効果的な次の一手は「状況をありのまま上司に報告、今後の方針を相談する」です。上司が状況を少しもわかっていないはずがないので今後の仕事の進め方を相談すべきです。

[k-g-11]

ご返信ありがとうございます。
上司の方に、一度きちんと相談したいと思います。
ご親切に、ありがとうございました。