ブラウザ開発者ツールの秘密

1. Console には log() 以上に多くの機能がある

• フィルタリングオプション

• {} : 変数の値/名前を一緒に表示

• warn/info/error() : ログレベル

• assert(): 特定の条件のときだけ出力

• trace(): 誰が呼び出したか

• group(): メッセージをグループ化して展開/折りたたみ可能

• table(): 情報をテーブルで出力

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

   return {url: a.href, text: a.innerText}

  })

2. ソースコードに触れずにログを残す

• Live Expressions : リアルタイムで変化する変数の値を確認

• logpoints : 特別な形のブレークポイントで、その行の実行時にログを出力。技術的には console.log をウェブページのどこにでも追加できるもの

3. ブラウザの外にログを残す

• VS Code Debugger

4. どんなサイトにもコードをインジェクションする（Chromium 系ブラウザ: Edge、Chrome、Brave..）

• Snippets : 現在のウェブサイトに対してスクリプトを実行

• Overrides : リモートスクリプトのコピーを保存して修正し、その後ページ読み込み時にオーバーライド

5. さらに多くの場所で Inspect & Debug が可能（Chromium 系ブラウザ）

• Electron 系はすべて対応 : GitHub Desktop、VS Code、ブラウザの Developer Tools 自体も Developer Tools でデバッグ可能

• MS Edge Tools for VS Code

6. 厄介な秘密たち

• 人々は開発者ツールの一部しか使っていない。おそらく説明ドキュメントが不足しているためだと思われ、多くの時間をかけてドキュメントを作ったが、それが解決策ではないようだ

• 開発者ツールはますます複雑になり、数多くの機能に圧倒されるようになる。改善する方法はないだろうか？

 → Edge は Focus Mode の導入を進めている。すべての機能を見せる代わりに、ユースケースごとに必要なツールだけを表示するもの

 → Informational Overlays も作業中。開発者ツール内ですぐ見られるヘルプを提供するもの

• コードを書くことと完成物をデバッグすることの間には、まだ断絶がある

 → ブラウザ開発者ツールで変更した内容を、どうやってコードに反映させるか？

 → 1つは開発者ツールを VS Code で置き換え、ツール使用時にハードドライブ上のファイルを直接変更すること

 → もう1つは VS Code 拡張の一部として、開発者ツールを使って変更してもディスク上のファイルを変更できるよう選択可能にすること

7. あなたは開発者ツールの Audience であり Client でもある

 → Report a Bug / Request a Feature などでフィードバックを送る

[galadbran]

少し違う観点では、ユーザーと開発者が同じツールを持っているという点です。そのため、Webアプリは抜け道的で悪意のあるユーザーへの対処にかなり気を配る必要がありそうです。

[laeyoung]

console.log() に関する記事

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

良い機能があっても、ドキュメントに良い例があるかどうかが大きな決め手になるようです。