11
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

はじめに

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

最近、案件で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 をデバッグする方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
11
Help us understand the problem. What are the problem?