DevToolsを活用しよう！
この記事は下記のバージョンの下に書かれています。
$ flutter --version
Flutter 3.27.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8495dee1fd (4 days ago) • 2024-12-10 14:23:39 -0800
Engine • revision 83bacfc525
Tools • Dart 3.6.0 • DevTools 2.40.2
はじめに
こんにちは！！！
フリーランスでモバイルアプリ周り触らせて頂いています @airy-swiftです🙌
12月後半にも入り、そろそろ"年の瀬"と表現してもいい頃合いになって参りました。
年の瀬とは下記のように説明されることがあるそうです。
掛け売りの支払いをちゃんと精算して、無事に年を越せるかどうかが問題になる年末のこと[1]
皆さんはいかがでしょうか？
私は今年も元気に黒歴史をいくつか"生産"しました！💪
無事に致命傷で年を越すことになりそうです。
若干おちょけた記事ですがよければお付き合いください。
この記事は初心者〜中級者前半くらいのレベルを想定しています。
ストレスフルな現代社会に
さて、皆さん色々なストレスを抱えつつ、何とか生命活動を維持されていると思います。
- 営業先の関係者が横着
- 役割を忘れて取り敢えず体力で解決しようとする関係者
- 片思い相手に振られて涙を流す
- 想定を超えたクソパスタコードを引き継ぐ
- 複数箇所で同じ使い方をしてるwidgetが一箇所でのみ謎のスペースを生む(伏線じゃないです)
まぁこれは全部私なんですが。
俺がう○ちエンジニアだから？
DevToolsが温もりをくれる
冬にも入りしっかり肌寒く、温もりが欲しい季節です。
Flutterのリリースノートを確認すると、毎度DevToolsのアップデートが入っています。
数日前にも Flutter 3.27.0 がリリースされ、ホットなトピックです。って言わせて。
DevTools: 「自己紹介ダヨ！」
DevToolsとはそもそも何なのでしょう？
いや、devのtoolだし開発に役立つんでしょ？あんま舐めないでよw
という気持ちを飲み干したコーヒーカップに吐き出して、DevToolsさんの言葉を聞いてみましょう。[2]
Dashちゃん
- Flutterアプリの (一部、Dartアプリの)
- UIレイアウトと状態を検査する。
- UIジャンクパフォーマンスの問題を診断する。
- CPUプロファイリング
- ネットワークプロファイリング
- ソースレベルデバッグ
- メモリ問題のデバッグ
- 一般的なログと診断情報の表示
- コードとアプリのサイズを分析
- Androidアプリのディープリンクの検証
どうやら活用すればそれなりの恩恵を受けられそうです。
力が欲しいか？
IDEでアプリを起動した後、下記画像の Open DevTools よりwebページを起動します。
Android Studio DevTools起動[3]
これがそのwebページ。今回の力の源だ！！！💪
便利な機能3つご紹介
※タイトルの通り、活用しようという内容なのですごい内容は期待しないでね😉
Network: 「ｺﾝﾆﾁﾊ!!」
個人的に一番便利で使いやすいなと思っているのはNetworkタブです。
叩いたweb apiについて
- 概要
- ヘッダ
- リクエスト
- レスポンス
これらをサクッと確認することができるので、(なんかおかしいな、？)なんてときに、都度printデバッグなどしなくても助かります。
活用されてる方々はそんなことないだろと感じるかもしれませんが、意外も意外と活用してない方も多いのかなという個人的な体感・印象です。
Networkタブの全体感: gooラボ ひらがな化API
助かりポイント
DevTools:Networkが優れている・痒いところに手が届くなと思うのは下記です。
- ReponseがModelに変換される前の生のjsonを確認できる
- めちゃくちゃ長いレスポンスでもちゃんと表示してくれる
- ログを遡りやすい
- 検索がかけやすい
といったところです。
swagger_code_generatorを利用した際など、apiリクエスト周りをあんまり触りたくないなってときはままあると思います。(あるよね？？)
| Overview | Response |
|---|---|
 |
 |
こちらでは
- Model(Entity)に変換される前の生のデータが簡単に確認できる上に、
- dart:developer.logでないと表示しきれないほどのレスポンスも見やすくなっている
- そもそもapiを本当に叩けてんの？から概要による結果まで一目で確認しやすい
といったところで、とてもよいです。
ふと思い出したときぜひ使ってみてください🎄
Debugger: 「ｺﾝﾆﾁﾊ!!!」
個人開発アプリで無理矢理エラー起こした場面
Debuggerはstacktraceやスコープ内の変数の情報を見やすくしてくれます。
昔は、(いや別にコンソールのログでいいよ)と思っていたのですが、意外とちゃんと強力です。
まぁぶっちゃけIDEにも同様の機能は提供されているのですがちょっと見辛いかなと個人的には思います。
助かりポイント
DevTools:Debuggerが個人的に便利だな・悪くないな、と思ってるのは下記です。
- エラー発生時やbreakpoint周りのstacktraceや変数が確認しやすい
- stacktraceのリンクをクリックしたときIDEで開かれない(IDE内にタブが量産されない)
- Debug consoleを利用することで、デバッグコード挿入してrestartなどしなくて済む(ことがある)
Debuggerに限ったことでないですが、IDEって綜合開発環境というだけあって沢山機能が提供されています。が、IDE内がごちゃつくこともままあると思います。(あるよね？？)
DevToolsのおかげで一部機能を外に出すことによって割と快適になるのもよいポイントです。
Debuggerタブの下部にあるconsoleはDartの対話モードになっており、ちょっとしたデータ操作の検証などはここでクイックに行うことができます。一々restartなどする必要はない(かも)ってことですね🙌
ちょっとエラーの解決に詰まりそうな気配を感じたら、Debuggerを開いてみるといいことがあるかもしれません🎅
DevTools Extension: 「ﾊﾛ-😉」
最後にちょっとだけ毛色の違った機能をご紹介します。
なんとなんと、DevToolsはExtensionとして機能を追加することができます！
個人的に作ることもできるのですが、流石Flutterさん、パッケージとして作成したExtensionを公開することができます🙏
リリースされている中でパッと使いやすいのはこちらだと思います。
shared_preferences_toolsを利用するとDevToolsのタブに新しく追加されます。
shared_preferences_toolsを追加した図
正直使い勝手はもうちょっと向上できそうですが、手軽に直接shared_preferencesのデータを編集・削除ができるのでこれまたひとつ、デバッグに役立ちます。
是非、便利なExtensionを作ってください🙌
そして教えて、私を楽させて...😌✨
終わりに
いかがでしたでしょうか？DevToolsを活用することで、ちょっとFlutter開発が楽しくなること請け合いです👉
興味を持った場合は公式ドキュメントをご確認ください[4]
不幸自慢と寒中見舞い
私は11月末頃から熱に浮かされ、1週間強寝込みました。
その後今現在も、目に菌が入り瞼を開き続けることすら苦痛な状況です。
妹はインフルに罹り、受験に落ち、寝込み、12月の我が家はカオスです。
皆さん体調にはくれぐれもお気をつけください。🥲 本当に。🥲
ご挨拶
お読み頂きありがとうございました！🎄✨
アドベントカレンダーも2024年も最後まで元気に走っていきましょう！🎅
コーヒーカップはちゃんと洗ってね。☕️
Discussion