ブラウザ Console で JSON を整形してコピーする方法

2024-06-21

すでにメモリ上にあるオブジェクトなら、HAR 出力より Console ワンライナーの方が速い場面が多くあります。重要なのは有効な JSON として取り出すことです。

copy と stringify

Chrome では copy(obj)、環境依存を避けるなら copy(JSON.stringify(obj, null, 2)) を使います。

copy(JSON.stringify(responseData, null, 2));

console.table

配列オブジェクトの概要確認に便利ですが、深いネストは stringify で扱います。

Network パネル

Response をコピー可能ですが、巨大ボディは途中で切れる場合があります。

循環参照の注意

DOM 参照を含むオブジェクトは stringify 失敗しやすいため、必要なサブセットのみ抽出します。

オンラインツール連携

Console -> ローカル整形ツールで検証、圧縮、fixture 保存まで安全に完了できます。