Help us understand the problem. What is going on with this article?

Laravelのdd()

はじめに

自分の今までのdd()の使い方と最近知った使い方を紹介します。
dd()の詳細

前提

  • DBはposts
  • Laravel + Vue.jsでの開発
  • postsを確認したい
  • Google Chrome

ブラウザで表示する

PostController.php
// 一部抜粋
public function index()
{
    $posts = Post::all();
    dd($posts);

    return response()->json([
        'posts' => $posts
    ]);
}

dd()$posts渡し、indexを呼び出すURLを見ると

posts_dd.PNG

のように見れます。▶をクリックするとより詳しく見れます。

デベロッパーツールで確認

Laravel + Vue.jsでの開発でLaravelが頑なに500しか返してこず困っていた時、インターン先の社員の方に教えていただきました。(状況を忘れてしまったのでデベロッパーツールで確認する方法だけを紹介します。)

PostController.php
// 一部抜粋
public function index()
{
    $posts = Post::all();
    dd($posts);

    return response()->json([
        'posts' => $posts
    ]);
}

これは同じです。
次にVue.jsのAPI呼び出しのURLに行きます。一応コードを。

// 一部抜粋
axios.get('/api/posts')
  .then(response => {
    this.posts = response.data.posts
    console.log(this.posts)
  })
  .catch(error => {
    console.log(error)
  })

F12を押しデベロッパーツールのConsoleタブをクリックしましょう。dd()を書いているのでもちろんthis.postsundefinedです。↓
console.PNG

目的はdd()$postsを確認するでした。それでは赤で記されたNetworkタブをクリックしましょう。↓
network.PNG

Webページでロードされるリソースに関するデータが見れます。さらにpostsをクリックしPreviewを確認すると、、、
posts.PNG
Vue.js側からもdd()に渡した$postsが見れました。

これからの意気込み

Laravel + Vue.jsでの開発は始めたばかりなのでいろいろなことを吸収し頑張っていきたい。

補足

dump()でも同じことができます。
dump()の詳細
また、今回はGETを確認しましたが、POSTPUTDLETEなどもデベロッパーツールで確認することができます。

kyohei121877
IT初心者。Web技術に興味があります。
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