ブラウザで使うデバッグ技法

 (alan.norbauer.com)
5 ポイント 投稿者 GN⁺ 2023-11-12 | 1件のコメント | WhatsAppで共有

ブラウザデバッガ活用のヒント

  • 高度な条件付きブレークポイント

    • 副作用を持つ式を使って、条件付きブレークポイントの機能を拡張
    • ログポイント/トレースポイントにより、実行を停止せずにコンソールへログを記録可能
    • console.count を使って実行回数をカウント
    • 主要ブラウザはログポイント/トレースポイントをサポート（2020年5月時点）

  • ウォッチウィンドウの活用

    • ウォッチウィンドウで console.log を使用可能
    • DOM 変化時に式を実行するため、DOM 変更ブレークポイントを設定してからウォッチ式を追加

  • コールスタックの追跡

    • 関数のコールスタックを追跡して、不一致の呼び出しを見つける
    • console.trace を条件付きブレークポイントで使い、コールスタックを確認

  • プログラム動作の変更

    • ブラウザ内でその場でプログラムの動作を変更可能
    • 関数パラメータをオーバーライドして動作を調整

  • 簡単なパフォーマンスプロファイリング

    • コンソールのタイミング API を使ってコード実行時間を測定
    • console.time('label') と console.timeEnd('label') を使って時間を測定

  • 関数アリティの活用

    • 特定の数の引数で呼び出されたときだけブレークポイントを有効化
    • 関数呼び出し時の引数数の不一致を見つけるために使用

  • 時間の活用

    • ページ読み込み後、特定の時間が経過してからのみブレークポイントを有効化
    • 一定時間はブレークポイントをスキップし、その後だけ有効化

  • CSS の活用

    • 計算済み CSS 値に基づいてブレークポイントを有効化

  • 偶数回の呼び出しだけ中断

    • 偶数回目の実行時にのみブレークポイントを有効化

  • サンプリングによる中断

    • 実行のランダムなサンプルに対してのみブレークポイントを有効化

  • 特定の行で中断しない

    • "Never Pause Here" オプションを使って、特定の行で中断しないよう設定

  • 自動インスタンス ID 付与

    • クラスインスタンスごとに一意の ID を自動割り当て

  • プログラム的なトグル

    • グローバルなブール値を使って、条件付きブレークポイントをプログラム的に切り替え

  • monitor() によるクラス呼び出し

    • クラスメソッド呼び出しの追跡のために Chrome の monitor コマンドを使用

  • 関数呼び出しとデバッグ

    • コンソールで debugger を呼び出した後、関数を呼んでデバッグ

  • URL 変更時に実行を中断

    • シングルページアプリケーションで URL が変更される前に実行を中断

  • プロパティ読み取りのデバッグ

    • オブジェクトのプロパティが読み取られるたびにブレークポイントを有効化

  • copy() の使用

    • copy() コンソール API を使って、ブラウザから直接クリップボードへ情報をコピー

  • HTML/CSS デバッグ

    • JS コンソールを使って HTML/CSS の問題を診断
    • JS 無効化状態で DOM を検査
    • 条件付きで現れる DOM 要素を検査
    • DOM スナップショットを記録
    • フォーカスされた要素を監視
    • 太字フォントの要素を探す
    • 現在選択されている要素を参照
    • イベントを監視

GN⁺の意見

この記事で最も重要なのは、ブラウザのデバッガを使って、開発者がコードをより効率的にデバッグし、問題を解決できるさまざまな技法とヒントを提供している点だ。こうした情報はソフトウェア開発者にとって非常に有用であり、特に複雑なバグの追跡やパフォーマンス問題の解決で時間を節約できるため興味深い。

関連記事

1件のコメント

 
GN⁺ 2023-11-12
Hacker Newsの意見

  • ブラウザ内蔵デバッグツールの進化

    • ブラウザ内蔵のデバッグツールは、この数十年で大きく進化してきた。
    • JavaScript経験者として、ブラウザで直感的にコードをデバッグできるようにしてくれたすべての人に感謝している。
    • バックエンド開発や他の言語で作業していると、現代のブラウザのデバッグツールのエコシステムが恋しくなる。

  • debugger; 文の活用

    • debugger; 文を使うことは、Chromeデバッガの再帰的なスタックに打ち勝つための唯一の方法だ。
    • サイト訪問者が自分の難読化されたホームページを解析するのを防ぐために、デバッグトラップを使った事例への言及。

  • NodeJSバックエンドのデバッグの難しさ

    • Python/Elixirプログラマとして、pdb.set_trace()/IEx.pry() をよく使っている。
    • 複雑なNodeJSバックエンドを引き継ぎ、適切なデバッグツールなしで作業して苦労している。
    • console.log デバッグに戻らざるを得ず、原始的に感じられた。
    • 適切なデバッグREPLがないことへの驚きと、助けを求める声。

  • Werkzeugの推薦

    • Djangoバックエンド開発ではWerkzeugの使用を勧めている。
    • 例外が発生するたびに、ブラウザで「PDB」シェルを使えるようにしてくれる。

  • IIFEのローカル変数にアクセスする方法

    • 即時実行関数式（IIFE）のローカル変数にアクセスする方法についての質問。
    • デバッガがIIFEスコープ内のコードを停止しなくても、それを実現する方法を探っている。

  • UI文字列を使ったデバッグ方法

    • ネットワークパネルでネットワークリクエストの記録を開始する。
    • 左サイドバーの検索を使い、探したいコード/UI文字列を入力する。
    • バンドルされたjsチャンクファイル内で結果を見つけ、「Sources」で開いて debugger; 文を配置する。

  • 条件付きブレークポイントを使ったデバッグ

    • {configOption: true} を {get configOption() { debugger; return true; }} に変換する方法についての質問。

  • Chrome専用機能の「Monitor Events for Element」

    • 「Monitor Events for Element」機能への言及と、それがChrome専用である点。
    • Firefox向けの代替があるかどうかへの疑問。

  • queryObjects APIの不在

    • 特定のコンストラクタで生成されたすべてのオブジェクトの一覧を返す queryObjects API への言及。
    • たとえば、queryObjects(Function) を使えば、ヒープ上にあるすべての関数の一覧を取得できる。

  • 監視変数の使いづらさ

    • 監視変数を機能させるのに苦労している。
    • グローバル変数しか監視できないのだろうと考えているが、期待どおりに動作しないため、ログに値を埋めることになっている。
    • コンソールが変数や設定値を確認・テストできるようなData.guiスタイルのUIを追加すべきだという意見と、関連するCodePenリンクの提供。