Laravel5.7からの新機能「Telescope」について

2019/07/15 2019/07/15 #Laravel #Telescope #デバッグ

Laravelの新しいデバッグアシスタント「Telescope」

こんにちは。Nonです。Laravelの新デバッグ機能「

」ご存知でしょうか?
バージョンが5.5などのLTSなどではLaravel DebugbarやDebugKitが有名ですが、5.7から公式にデバッグツールが公開されました。

使い勝手的にはCakePHPのDebugToolとどちらが使いやすいでしょうか?
早速紹介していきましょう。

何ができるの?

デバッグに必要なほとんどの機能を使用することができます。
スクリーンショット 2019-07-15 14.15.26.png
上の画像だと、APIのリクエストも表示されていますね。
この画像はどんなリクエストが来たかを表示しています。

インストール

composer require laravel/telescope --dev

Telescopeはデバッグ機能なので、本番には反映したくないでしょう。 --devを記載してそれを避けます。

ただ、インストールするとLaravelがパッケージ登録してしまうので、config/app.phpのパッケージ部分をコメントアウトするなどして置きましょう。

// App\Providers\TelescopeServiceProvider::class,

更に、コメントアウトしたことによって、パッケージ機能が使用できなくなってしまいます。
ローカルで機能を使用したいので、app/Providers/AppServiceProvider.phpに条件を追加します。

public function register()
{
    if ($this->app->isLocal()) {
        $this->app->register(TelescopeServiceProvider::class);
    }
}

環境名を定数でしている場合はなどはこうするのもいいかもしれません。

if (env('APP_ENV') == 'production') {
    $this->app->register(TelescopeServiceProvider::class);
}

Telescope有効化

インストールできたら有効にしましょう。
TelescopeはDBにデバッグ情報を詰め込むパッケージ(Passportと似てる)なので、下記コマンドを順番に実行します。

php artisan telescope:install
php artisan migrate

インストールができたらhttp://localhost/telescopeにアクセスします。

スクリーンショット 2019-07-15 14.49.49.png

機能

Request

サーバーにリクエストされた内容を見ることができます。
スクリーンショット 2019-07-15 14.51.23.png

目玉ボタンをクリックすると詳細を見ることができます。
スクリーンショット 2019-07-15 15.02.01.png
スクリーンショット 2019-07-15 14.52.46.png

ページ中部にあるタブの内容はこちら

タブ名内容
PayloadGETやPOSTなどの送信データ
Headersヘッダー情報
Sessionセッション情報
Response レスポンス(ビューやリダイレクトなど)

ページ下部ではそのリクエストで発行されたログやクエリも見ることができます。
スクリーンショット 2019-07-15 14.54.24.png

Commands

php artisanコマンドの内容を見ることができます。
スクリーンショット 2019-07-15 15.01.31.png

目玉ボタンをクリックすると詳細を見ることができます。
スクリーンショット 2019-07-15 15.02.01.png

どんな操作をしたかがわかりますね。
スクリーンショット 2019-07-15 15.03.11.png

Schedule

Laravelに登録されたScheduleが表示されます。

この実行結果が表示されます。
今回は実装していないので、画面イメージはありませんが、叩かれたコマンドが表示されます。

Jobs

Laravelで設定されたキュー(Queue)の履歴を確認するページです。
処理の重い操作を遅延実行したりすることに使用されますが、これが途中で落ちたりしたら大変ですよね。
今回は実装していないので、画面イメージはありませんが、そのProcessが完了しているか、そのProcessの内容はなにかを閲覧することができます。

Exceptions

例外処理の一覧を見ることができます。
スクリーンショット 2019-07-15 15.11.26.png

View Other Occurrencesをクリックすると同じ種類の例外を見ることができます。
View Requestは詠んで時のごとく、リクエスト内容へ遷移します。

ページ下部にはタブがあり、例外時のメッセージや、StackTraceを閲覧できます。
スクリーンショット 2019-07-15 15.14.25.png
スクリーンショット 2019-07-15 15.13.25.png

Logs

デバッグツールですから当然ログ監視もできます。
スクリーンショット 2019-07-15 14.21.44.png

詳細ではView Requestリンクがあるので、どのリクエストでログが吐かれたかもわかります。

Dumps

僕この機能好きですね。
artisanコマンドにあるDump Serverが実行された履歴になります。
内容を出力したい箇所にdump()を仕込んでおいて、Dump Server起動後にテスト実行などすると、内容が出力されるという感じです。
Dump Serverについては

と思いました。
この機能は割と応用が効くかもしれません。

Queries

サーバーサイドとして一番使用するのが、この機能じゃないでしょうか?
スクリーンショット 2019-07-15 14.17.30.png

目玉ボタンをクリックすると詳細を見ることができます。
スクリーンショット 2019-07-15 15.02.01.png
スクリーンショット 2019-07-15 14.18.42.png
どのログインユーザーがどのModelのどのクエリを発行したか丸わかりですね。これは便利です。

Models

モデルの登録や更新を閲覧することができます。
モデルの更新を検知してくれるのは個人的に嬉しいです。これでdumpとサヨナラですね。
スクリーンショット 2019-07-15 15.23.00.png

詳細の内容は他のページと似たような感じなので割愛。

Events

Eventが実行されたときの履歴情報になります。
実はこの機能の使い方がよくわからない。
イベントを登録するというのはわかるし、それが発火されて表示されるというのもわかるが、昨日の使い道がよくわからないですね。

TelescopeではEvent Dataで中身を見ることができます。

Mail

メール送信の内容も見ることができます。
例の画像ではメール機能を搭載していないので、なにも表示されていませんがメールの内容も見れますね。
スクリーンショット 2019-07-15 14.20.18.png

僕の他の環境ではテキストメールなので、文字列が表示されますが、HTMLメールならどうなるのかは少し気になります。

Notifications

の通知履歴を表示できます。
Slackへの通知機能をLaravelは持っていますので、これも使用することが多いのでは無いでしょうか。
WEB通知もこれでできないかな〜
僕の環境では未実装なので、画面イメージはありません。

Gates

Gate機能を使用されたらここに履歴が表示されます。
これは大規模なWEBシステムで使用することが多いのでは無いのでしょうか。
僕の環境では、Gateをカスタマイズして、独自の権限機能を実装しています。
例を見てみましょう。
スクリーンショット 2019-07-15 15.34.02.png

  • system-only
  • admin-higher
  • user-higher
    の権限を実装していますので、どのユーザーがどの権限でリクエストしてきたがわかります。

詳細の中身はリクエスト内容ですね。

Cache

キャッシュされたデータを確認するページです。

cache(['test' => 'テスト'], 10);

上記のコードでキャッシュ登録された内容を閲覧できます。

僕の環境では認証認可にキャッシュを利用しているので、キーが登録され、hitしていますね。
スクリーンショット 2019-07-15 15.38.45.png

アクション内容
setキャッシュが保存された
hitキャッシュを取得した
missedキャッシュを取得しようとしたが存在してなかった
forgetキャッシュを削除した

Redis

Redisの内容も見ることができます。
僕はRedisよく知らないんですよね。超高速のキャッシュ用DBみたいな感じというのは知っているのですが、それをどのように実装してとかは勉強中です。

情報を集めると、RedisをLaravelに導入し、Redisサーバーを起動してキャッシュを使用するとその内容が表示されるらしいです。

要は・・・

サイドメニューにある項目の内容をすべて監視することができる。これはほとんどの機能といっても差し付けないのではないでしょうか。Laravelのモデル継承さえ守っていればこの画面にログが出力されますね。

応用機能

コマンド

デバッグ情報全削除

php artisan telescope:clear

古いデバッグ情報を削除

php artisan telescope:prune

毎日古いデバッグ情報を削除するには、app/Console/Kernel.phpschedule()でスケジュール登録すればいいでしょう。

protected function schedule(Schedule $schedule)
{
    $schedule->command('telescope:prune')->daily();
}

.env設定

定数名内容
TELESCOPE_DRIVERデバッグを保存するドライバーです。初期値は “database” です。
DB_CONNECTIONデータベースの接続情報です。 初期値は “mysql” です。
TELESCOPE_ENABLEDLaravel Telescopeを有効にするかどうかです。 初期値は、“true”。

ワッチャー

Telescopeにはワッチャーという機能が搭載されています。
これがサイドメニューにある項目の内容を記載するWatcherということですね。このワッチャーがクエリやログの内容をDBに保存し、内容を表示しています。

地味に定数を忘れてしまいがちなのでメモ。

定数名内容
TELESCOPE_CACHE_WATCHERキャッシュ
TELESCOPE_COMMAND_WATCHERコマンド
TELESCOPE_DUMP_WATCHERDUMP
TELESCOPE_EVENT_WATCHERイベント
TELESCOPE_EXCEPTION_WATCHER例外(Exception)
TELESCOPE_JOB_WATCHERジョブ(Queue)
TELESCOPE_LOG_WATCHERログ
TELESCOPE_MAIL_WATCHERメール
TELESCOPE_MODEL_WATCHERモデル
TELESCOPE_NOTIFICATION_WATCHER通知(Notification)
TELESCOPE_QUERY_WATCHERDBクエリー
TELESCOPE_REDIS_WATCHERRedis
TELESCOPE_REQUEST_WATCHERRequest
TELESCOPE_RESPONSE_SIZE_LIMITスケジュール

ワッチャーのカスタマイズ

例えば、スロークエリを収集したいという場合、下記の用にワッチャーをカスタマイズすると実現できます。

'watchers' => [
    Watchers\QueryWatcher::class => [
        'enabled' => env('TELESCOPE_QUERY_WATCHER', true),
        'slow' => 50,
    ],
    ...
],

Telescopeへのアクセス

一部のユーザーしかこの機能にアクセスできないようにしたいという需要もあるかと思います。
これはLaravelの認可機能を使用することで可能です。
app/Providers/TelescopeServiceProvider.phpの中に下記を記載市mす。

/**
 * Telescopeゲートの登録
 *
 * このゲートはlocal以外の環境で、誰がTelescopeへアクセスできるかを決定している。
 *
 * @return void
 */
protected function gate()
{
    Gate::define('viewTelescope', function ($user) {
        return in_array($user->email, [
            'hosaka.non.work@gmail.com,
        ]);
    });
}

このgateメソッドはLaravelの認可機能ですね。gateのほかにはpolicyという機能もあります。

最後に

Telescopeの紹介でした。
いかがでしたでしょうか?
サイドバーのメニューの内容をひたすら説明しただけの記事でしたが、「こんな機能あったんだ!」みたいな発見があるかもしれません。

参考

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道