Laravel Ajax リアルタイムデバッグ

10186 ワード
jQuery Laravel Ajax jQuery テキストリンク

はじめに

私は時間を取り戻したいです。(本当に!!)

最近、案件でLarvelとjQueryを使用し開発を行った際、非同期処理のデバックにとても時間を費やしました。
すぐに忘れてしまう自分自身の為に備忘録としてここに記します。
デバッグにこんなに時間が掛かるとは...(汗)

この記事を読むことにより、私と同じようにデバックで苦しんでいる人が少しでも時間を奪われないことを願っています。(時間...(涙))

デバッグ方法

1、csrf-tokenをhead内に追記。

　・追記しないと500errorになります。(laravelあるあるですね(笑))

blade.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!--下記を追加(csrf-token) -->
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <script src="{{ asset('/js/app.js') }}"></script>
    <title>hogehoge</title>
  </head>
  <body>
  </body>
</html>

2、非同期処理(ajax)

　・headersにcsrf-tokenを追記します。
　・success/errorになった際のデータ・ステータス等を表示します。

hoge.js

$(function () {
  var url = location.href;
  $.ajax({
    url: `${url}/store`,
    type: 'GET',
    dataType: "json",
    headers: {
      "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
    },
    data: {
      "hoge": "hogehoge",
    },
    success: function (data) {
      console.log('success');
      console.log('data');
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      console.log('error');
      console.log(XMLHttpRequest.status);
      console.log(textStatus);
      console.log(errorThrown);
    }
  });
});

3、送られてきたデータの操作(controller)

　・use Logを追記する事によりlaravel.logにデバッグすることができるようになります。
　・use Responseを追記することにより返り値の形式を変更することができます。
　・Log::debugを使用しlaravel.log内にデバッグメッセージを追記します。

HogeController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Log;
use Response;

class HogeController extends Controller
{
    public function store(Request $request)
    {
        Log::debug($request);
        return Response::json($request);
    }
}

4、リアルタイムでデバッグメッセージを表示

　・cdでlogsディレクトに移動します。
　・tail -fにてログをリアルタイムで表示します。

cd laravelアプリケーション名/storage/logs/
tail -f laravel.log

結果

・成功

<!-- ブラウザ(Console) -->
success
{hoge: "hogehoge"}

<!-- ターミナル -->
[2019-11-03 08:55:09] local.DEBUG: array (
  'hoge' => 'hogehoge',
)

・失敗

<!-- ブラウザ(Console) -->
GET http://homestead.test/post/store?hoge=hogehoge 500 (Internal Server Error)
error
500
error
Internal Server Error

<!-- ターミナル -->
[2019-11-03 09:04:50] local.ERROR: Symfony\Component\Debug\Exception\FatalThrowableError: Class 'App\Http\Controllers\Response' not found in /home/vagrant/code/csv/app/Http/Controllers/PostController.php:40
Stack trace:

最後に

今回学んだことは非同期処理ではdd()メソッドを使用することができないということです。

dd()メソッドのデバッグ内容はデベロッパーツール => network => previewで見れました。(インフラのスペシャリストありがとう)

また、Logclassを使用することによりデバッグメッセージでデバッグできることを知りました。(dd()使わなくてもLog
でデバッグできるのね(笑))

もし不備があった場合はコメントをいただけると幸いです。
よろしくおねがいします。

参考

Laravel でAjax をデバッグする方法

Makefileテンプレート(改良)
pythonベース(8):パッケージ、継承、マルチステート