Vue3 javascript 関数の途中で変数の中身を確認したい。

Question

[やりたいこと]
FormをsubmitをしたときのVue3で書いた関数の中身を確認したいです

[問題点]
preventDefault();を使えばsubmitの処理を止めてconsole.log()で関数の中身が確認できると思い試しているのですが、submitの処理がそのまま走ってしまいいます。

    //////////Canvasのデータをblob化/title/commentをaxiosでPOST//////////
    let saveCanvas = (canvas_id) => {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      //new FormData() を作成
      const data = new FormData();
      data.append('canvas', blob, 'image/png');

    　　console.log(data);
     preventDefault();
//ここで処理を止めてconsole.log(data);でconst dataの中身を確認したい。

      axios
        .post("/api/images/",data)
        .then((res) => {
          console.log('success');
          console.log(data.get('canvas'));
        })
        .catch((error) => {
          new Error(error);
        });
    return false;
    };

上記コード内の const data の中身を確認するにはどうすればいいでしょうか?

Comments

[maisumakun]

> 上記コード内の const data の中身を確認するにはどうすればいいでしょうか?

直前にconsole.log(data)としていますが、それでは値が取れない状況でしょうか。

[Fukusuke0604]

返信ありがとうございます。
google devツールのコンソールに一瞬だけ表字されてすぐに別画面に切り替わってしまいます。

subitした際のpostの処理を止めてconsol.log(data)の中身を見る方法を知りたいです。

Answer 1

「preventDefault()」は「Event.preventDefault()」ではないでしょうか？
記載いただいたコードがクリックイベントによって呼ばれるのであれば、クリックイベント指定時に「$event」で渡すことができます。

<button @click="saveCanvas($event, 1) >save</button>"

let saveCanvas = (event, canvas_id) => {
    event.preventDefault();
    ・
    ・
    ・
}

Answer 2

Developer Toolsからブレークポイントを仕掛ける、あるいはdebuggerと書いて（MDN）同様の操作を行う事ができます。

Comments

[Fukusuke0604]

「Developer Toolsからブレークポイントを仕掛ける。」こちらの方法で変数の中身確認できる様になりました!!

Developer Toolsからできたんですね。今後も多用していきます!!
ありがとうございます。