electron-logo

結構前から当たり前のように Electron で作られたデスクトップアプリがありますよね
有名なものだとテキストエディタの VSCode です
ウェブ系の技術が使われるので、もともとブラウザ上で動くようなものに多いです

それ以外にも、
Windows に標準で入ってる Skype や Spotify
Walkman に曲を転送するソニーの公式アプリ
DMM ゲームプレイヤー
みたいなところにまで使われてます

Electron は開発する側が便利になるのもありますが、使う側にもメリットがあったりします
中身が HTML/CSS で作られているので、ウェブページみたいに使う側が簡単にカスタムできます
ウェブアプリだと使いづらいとか見づらいとかあれば拡張機能や開発者ツールで自分好みにカスタムできるのに、デスクトップアプリだとそれができず不満に思うこともありましたが、それが解消しつつあります

ところで VSCode など一部アプリは機能のひとつとして、開発者ツールを出すことができます
VSCode だと、メニューの「Help」の中にある「Toggle Developer Tools」を選択すればいいです
でもその他アプリだとメニューの中に用意してくれていないです
VSCode は主に開発者が使うツールなので開発者ツールを使うことはありえそうですが、チャットやゲームみたいなアプリでは通常利用はしないですからね
開発者側が調査する用途に残しても、メニューにあるとユーザーが間違って出してしまって問い合わせが来ると面倒ですし隠してるのでしょう

それでも出すことはできます
デバッグ用ポートを指定して起動してから Chrome/Edge の開発者ツールから接続します
Android の Chrome や Node.js で開発者ツールを使うのと同じ方法です

ダブルクリックで起動せずコマンドラインから起動します
そのときに --remote-debugging-port=9222 というオプションを追加します
Chrome で chrome://inspect を開いて下の Remote Target のところから接続したいアプリを探して inspect ボタンを押します
これで開発者ツールが出てくるので好きに CSS を書き換えたりできます
Remote Target のところのリストには出てくるまで数秒かかる場合があります
標準 (9222, 9229) 以外のポートを選んだ場合は上の Configure... のボタンからそのポートを追加する必要があります

不便なところは一時的な変更なので永続化できないところです
常駐させるアプリならともかく、こまめに閉じて再起動するアプリだとすごく面倒です
開発者ツールが使えるので CDP を使って起動時に自動で書き換えるようなものを作るのもありかもしれませんね

ちなみにこの方法、裏技っぽさがあるので個人的には好きですが、 Electron でアプリを作ってる人からすればデバッグするときに使うのでたぶん当たり前なことなのだと思います