はじめに
皆さんNuxtで開発していて、このマークを見たことありますよね？
そう。これがNuxtのデベロッパーツールです。
しかし、「よくわからないから触っていない...」や、「どういう機能があるかわからない」などありませんか？
👈それ、非常にもったいないです！
Nuxtのデベロッパーツールは便利な機能が多数あるので使いこなしたらかなり便利です！
なので今回は一緒に使いこなすため、GIF画像と一緒に見ていく形になります。
入門として見ていただけたら幸いです。
最初の画面(アプリ概要画面)
Nuxtマークを押したら、このような画面が開くと思います。
この画面では、現在のVue.jsのバージョンがわかったり、Nuxtのバージョンがわかったりします。
latestなど書いてあると思いますが、更新があると、「update available(更新が利用可能)」と表示されます。
また、アプリの読み込み時間などのアプリの概要を簡単に表示します。
ページ
どのページ(pages)にどのミドルウェアが紐付いているか、また、どのLayout(レイアウト)が紐付いてるかがわかります。
そして、すべてのミドルウェアも表示されます。
コンポーネント
現在、読み込まれているコンポーネントが表示されます。
何個読み込まれているかも、x2のように表示されます。
そして、ここが重要です。
なんと、グラフビューモードでは、各コンポーネントの依存関係も確認できます！
インポート
なにがインポートされているかわかります。
Auto-importされているものが表示されます。
モジュール
どんなモジュールがあるか一覧と詳細が見られます。
さて、ここが面白いところでデベロッパーツールを経由し、アップデートができるというところです。
試しにやってみましょう！
このような画面が表示されると思うので、ターミナルにあるマジックリンクか、認証コードを入力しましょう。
なんとターミナルが表示され、アップデートするか聞かれるので、アップデートと選択したら一旦Nuxtが再起動するので接続が切れてしまいますが、しばらくしたら復帰します。
いいですね！アップデートされています。
アセット
こんな感じにアセットが見られます。
(それだけですが、意外に便利です)
ランタイムコンフィグ
構成と、環境変数が見られます。(プライベート、パブリック両方)
ペイロード
アプリの状態や、データのペイロードが見られます
オープングラフ(OGP)
オープングラフの再現が見られます。
サーバールート
これはよく使います
プロジェクト内のすべてのNitroルート(サーバールート)が表示されます。
エンドポイントにリクエストを送信してテストしたりできます。
超便利
まとめ
今まで画面の下で主張していた「謎のやつ」が、実は開発を強力にサポートしてくれる頼もしいツールであることがお分かりいただけたかと思います。
みなさんもぜひ使ってみてくださいね！