毎年恒例のひとりアドベントカレンダーです。

ちなみに去年は npm の話でしたが、相当だめな感じでした。今年は頑張りたい……。

  1. サーバー側やCLIのNode.jsアプリをDevToolsでデバッグする
  2. 別サーバーで動いてるNode.jsアプリもポート転送してDevToolsでデバッグする
  3. USB接続したAndroid端末内のページをPCのDevToolsでデバッグする（なおRemote Devicesパネルはなくなりました）
  4. console.log()が面倒ならDevToolsでログポイントを設置する
  5. console.log()の出力スタイルをCSSで装飾する
  6. コンソールでパーティする、つまり画像を表示する（Chrome以外はアレ）
  7. フォーカスを外す(blur)と消える要素をデバッグする
  8. コンソール出力時に%iで小数点以下を省くとか。あと%oと%Oの違い
  9. ダークモード用CSSの書き方とエミュレートでの確認方法
  10. console.context()の謎を追う（未完）
  11. CSSじゃなくて実際にレンダリングで使われるフォントの調べ方
  12. Elementsパネルで編集したCSSをそのままファイルに保存する
  13. DevToolsのショートカット一覧と変更方法
  14. タブを開きすぎても作業中のやつを一発で見つける
  15. ウェブページの読み込みが遅いときはLighthouseで改善案を見て速度改善する
  16. $0とかcopy()とか、コンソールでだけ使える表現
  17. ファイルが更新されないときのキャッシュの消し方いろいろ
  18. Coverageで使ってないコードを検出
  19. 視覚特性に考慮してアクセシビリティを高めるためのツール
  20. JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする
  21. VS Codeの中でJavaScript/Node.jsのデバッグまでする
  22. VS Codeの中でブラウザーを開いてCSS開発
  23. DevToolsを日本語化するにはMS Edgeを使う
  24. Overridesで本番環境のJavaScriptをデバッグする

無事完走しました！　全日遅刻なしでやり切ったので大変満足です。