SPAのデバッグってたいへんだぁぁ🐱💦

 

Laravel側で絶対必要ログの３種

• Laravelログ
• リクエストログ
• クエリログ

ないと死ぬ

⓪. それは憂鬱の始まり…

アプリで表示がおかしいという不具合が報告され

チケット化される…

それで誰も泣かずにすむのなら。

 

 

①. リクエスト、クエリログを見る

• 表示に必要なデータがあるテーブルを全件検索でテーブルを見つけて探す
• 該当ページにアクセスして、APIサーバへのリクエストログを見る。

１ページ表示させるのに、20リクエストぐらいされる。

 

②. リクエストログからAPIを叩く

 

これかな？っていうのをPostmanで叩く

 

どのリクエストもフロント表示に期待するJSONが出力されない

→
サーバ側のAPIがおかしい

 

フロントの表示に必要なJSONが出力された！

うまくJSONをフロントが料理できていない
→
フロント側の不具合

 

リクエストのルートを探る

 

• VS Codeの検索
• ag(シルバーサーチャーを利用しよう)

 

ag シルバーサーチャー Mac

 

Laravelのデバッグ

 

\Log::debug('$data@yuu');
\Log::debug(json_encode($data));

 

dd($var)

 

Laravelで

• リクエストログで怪しいAPIのルートを確認する

 

Vue.jsのデバッグ

console.logでの出力

console.log('$var@yuu');
console.log($var);

怪しい変数後に仕込んでいく

 

マスタッシュ！

{{ data }}

 

Chrome のデベロッパーツール + Vue Debug toolの利用

 

Vue.js

• 画面を表示させているVueファイルを確認する
• 叩いているAPIを確認