Flutterとかの長いログ « LANCARD.LAB｜ランカードコムのスタッフブログ

Flutterとかの長いログ

2026/04/21
aikawa

TL;DR

長大なログを何とかコンパクトに読みたいよね。
え、全体を隈なく読むのが楽しい？そう・・・。

本題

Flutterのログって起動中ずっと流れっぱなしになってて、分割も出来ないしクリアするしかないんですよね。
お前にはページの概念はないのか、とか思いませんか。
（お前と言うか、Flutter以外も含んだ複数形ですが）

そんな所を何とかしたいなと、コンセプトとして作りました。
https://github.com/lancard-aikawa/FlutterBoard

1. ログを見る

何通りかやり方があって、以下の３通りです。

FlutterBoard内でコマンドを実行する
ログファイルをアップロードする
VM Serviceに接続する

VM Serviceに接続する方法が、リアルタイムで見る方法では安定です。
Flutterのdeveloper.logなんかは出力先が特殊で、通常のプロンプトで取得出来ないため、これを取得するにはVSCodeのコンソールで見るか、対応したターミナルでないと駄目なのでこれを経由させる必要があったんですね。

早速VSCodeで起動させます。


Launching lib\main.dart on Chrome in debug mode...
Debug service listening on ws://127.0.0.1:63552/D8xstpiYxOg=/ws
A Dart VM Service on Chrome is available at: http://127.0.0.1:63552/D8xstpiYxOg=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=ws://127.0.0.1:63552/D8xstpiYxOg=/ws
Connecting to VM Service at ws://127.0.0.1:63552/D8xstpiYxOg=/ws
Connected to the VM Service.
Starting application from main method in: org-dartlang-app:/web_entrypoint.dart.

VSCodeだと起動時にこんな感じでログが出ますので、VM Service atのws:以降をコピーします。
これは毎回値が異なるようなので、都度見る必要があります。

FlutterBoardでフォルダを開いて、プロセス/ログをクリック。
左下のVM Servフォームにペーストして、右にあるAttachを押すと、こんな感じで出力されます。

ちょうどログ構造としては冗長な表示形式です。
ログ表示右上のグループ化にチェックを入れ、入力フォームに┌─を入れると、こんな感じに┌─の有る行をスプリッターにして折り畳まれます。

あるいは、あるフレーズを入れてそこを分岐点として折りたたみたいと言うのも結構あります。
サンプルexample/フォルダのFlutterプロジェクトでは、クリックごとに分割させる事も可能です。
[FB:SCREEN]を今度は入力してエンターを押してみると、今度はその行をヘッダーとして表示し、その間は折り畳まれます。

単純な出力なので一行しか入っていませんが、これがルータでページ遷移ごとに特定フレーズ＋ページ名をログ出力して、特定フレーズで分けるとなれば、ページ単位で見たい要望とマッチします。

ログファイルを折り畳んで見る

ストリームでなくても、ログファイルを見る事も出来ます。
例えばsshで接続したターミナルログを、特定コマンドやフレーズごとに分割表示する事も可能です。
右下のログを開くボタンを押すと、ファイルを選べるので、アップロードして表示します。

後はやり方は同じです。

コマンド結果を見る

コマンドを入力してから見る事も出来ますが、多少不安定でお勧め度は下がります。
以前言った、developer.logなんかはこの方法では表示を取得出来ない等の制約も有ります。

コマンドを入力する時は、VM Serviceへの接続を切って、他のコマンドも出来れば終了させてから行います。
プロセス/ログ下にあるフォームにコマンドを入れ、ラベルに適当に名前を付けて実行を押すと、結果が表示されます。

一応、プロセスが終了していない判定なら、Ctrl+C等や文字を送信する事も出来ます。

何だかんだ言いつつ

ログが長いとグループ化にパワーを使うので、nodejsはやっぱ駄目かなぁとか思ったり。

2. パッケージの更新状態を見たい

もう１つの目玉みたいな機能です。

いきなりアップデートよりも、まずは状態を一覧で見たい事が。
そんな時に依存チェックを押して、直下のpackage.jsonまたはpubspec.yamlを見る事が出来ます。
早速結果。

pubspecもpackageも綺麗に出せました。マイナー、メジャー両方が表示出来ます。

変わり種としては、CDNを利用しているhtml内の表記にも対応しています。こちらは流石に手で修正する必要がありますが。

セキュリティ

ついでに、セキュリティボタンでは、npm auditやOSV.DEVを使った脆弱性チェックなんかも可能です。

依存ツリー

Flutterやnpmの依存ツリーを見る事が出来ます。
Flutterの場合、依存パッケージのバージョンがパッケージごとに異なるというのを避けるために、バージョン競合だけを抜き出して表示確認したりとか。
なお、npmの場合は異なってもそれぞれ依存バージョンを個別に管理するので、問題ないようです。
（またそれがカオスな状況を作り出してるとも）

他は

他はお勧めするほどのものではないですが・・・。

ツールは、コマンドを組み立てて、コマンド入力欄に渡す事が。あとデバイスの取得とかも出来ます。

ドキュメントは、README.mdなどのmdファイルを表示出来ます。

環境変数は、各環境用（本番、テスト、開発等）の.envファイルを適用させる用です。

ポート監視は、起動ポートを追加監視させて、既に起動している他のプロセスがあればkillを試みたり出来ます。
プロセス名とコマンド引数が表示されるので、これで違うのが分かりやすくなっています。

Android設定、Androidリリース

Android設定は、applicationIdやkey.properties, bundle.gradle.ktsの表示と変数機能です。

Androidリリースは、リリースまでの説明を書いたmarkdownをチェック方式で進めて行けるものです。
アップロード前に大まかなチェックポイントをチェックしてくれたり。

Playwrightに対応しWeb経由でスナップショットを取得したり。

大体Flutterで編集でなく、それ以外で困る部分を網羅し（ようとし）たプロジェクトになっています。

まぁでもコンセプト段階ではあるんですが、良さそうなものを適当に放り込んだら膨らむだけ膨らんで収集が付かなくなって来たので、一応動くけど怪しい所はかなりあるなぁと言う段階になり、一旦ここで不完全なまま停止する形になりました。

1だけ単体で作った方が良かったんじゃ・・・？
と言う言葉で終了したいと思います。