Laravel vue.js axios 500 (Internal Server Error) の解決方法

1 min read読了の目安(約1200字

はじめに

この記事では

Laravel vue.js axiosを使って開発しているときに

500 (Internal Server Error)

のエラーに遭遇してどこで処理が止まっているのかを調べるデバック方法をまとめました。

デバック方法

① command + option + I キーで もしくは 右クリックで「検証」ツールを開く

② consoleタブを押し,500 (Internal Server Error) が出ていることを確認する
スクリーンショット 2021-01-10 17.23.10.png

③ Networkタブを押し, 「all」の項目を押すと現在そのページで使われているファイルを確認することができます
スクリーンショット 2021-01-10 17.23.53.png

④ ファイル名を選択すると 「message」のところにエラーメッセージが出力されています。
スクリーンショット 2021-01-10 17.24.25.png

今回はidが渡っていなかったので修正したら処理が通るようになりました。

【補足】
【Vue.js】Vuejsをchromeブラウザでデバッグする方法
(https://qiita.com/nonkapibara/items/8b587013b6b817d6dfc4)

chromeでVue.js Devtoolsをインストールします。

スクリーンショット 2021-01-10 18.27.41.png

データの受け渡し、処理の流れを確認することができます。

おわりに

エラーが出て分からなくなることがありますが、
どこまで処理が走っているのか
どこで処理が止まっているのか
デバックをすることで、処理の流れを把握することができます。