json formatter

JSON フォーマッタ - オリジナル

ブラウザーのタブで表示するときに JSON を自動フォーマットする Chrome 拡張機能。

特徴

• 非常に長い JSON ページでも高速
• ダークモード
• 構文の強調表示
• 折りたたみ可能なツリー、インデントガイド付き
• クリック可能な URL
• 非 JSON ページに対するパフォーマンスへの影響はごくわずかです (1 ミリ秒未満)
• 有効な JSON ページで動作します – URL は関係ありません
• 未加工の JSON と解析された JSON を切り替えるボタン
• 解析された JSON はグローバル変数jsonとしてエクスポートされるため、コンソールで検査できます*

*マニフェスト v3 以降、コンソールでのjsonの入力は機能しません。回避策が必要な場合は、次のスニペットをコンソールに貼り付けます。

 json = JSON . parse ( document . getElementById ( "jsonFormatterRaw" ) . querySelector ( "pre" ) . innerText )

テスト用の JSON ドキュメント: https://callumlocke.github.io/json-formatter/

インストール

オプション 1 (推奨) – Chrome ウェブストアからインストールします。

オプション 2 – ソースからインストールします (下記を参照)。

発達

要件: Deno (および今のところ Node)。

初期設定:

• リポジトリのクローンを作成する
• pnpm i実行して、Chrome の TypeScript タイピングを取得します (または、必要に応じてnpm iを使用します)
• オプション: VSCode を使用していて、Deno ビルド スクリプトをいじる必要がある場合は、公式の Deno プラグインをインストールし、 "deno.enablePaths": ["tasks"]を設定します。

構築するには:

• deno task buildを実行する

ファイルが変更されるたびにビルドおよびリビルドするには:

• deno task devを実行する

ローカル ビルドを Chrome にインストールするには

• Chrome を開き、 chrome://extensionsに移動します。
• 「開発者モード」を有効にし、
• 「解凍してロード」をクリックします。
• 上記で構築したdistフォルダーを選択します。

よくある質問

大きな数値が正確に表示されないのはなぜですか?

これは JavaScript の制限であり、したがって Web ブラウザによって解釈される JSON の制限でもあります。

• Number.MAX_SAFE_INTEGER ( 2^53 - 1または9007199254740991 ) を超える値は、その数値まで調整されます。
• Number.MIN_SAFE_INTEGER ( -2^53 + 1または-9007199254740991 ) 未満の値は、その数値まで調整されます。
• 非常に正確な浮動小数点数は 16 桁に丸められます。

これを行うのは JSON Formatter ではなく、V8 のネイティブJSON.parseです。 JSON Formatter は、JavaScript で JSON をロードした後に表示されるものとまったく同じ、解析された値を表示します。

API エンドポイントが JavaScript の安全範囲外の数値を表現する必要がある場合は、それらを string として引用する必要があります。

オブジェクト キーの順序が時々間違っているのはなぜですか?

JSON Formatter に表示されるのは、解析されたオブジェクト/配列の表現です。これは、JavaScript のObject.keys( JSON.parse(json) )で取得する順序と同じです。

歴史的に、JavaScript 標準では、オブジェクト キーは任意の順序で反復できると明示的に規定されており、V8 ではこれを利用して、数値文字列キー ( "1"や"99999"など) を先頭に移動して、小規模なパフォーマンスの最適化を容易にしました。この V8 実装の詳細はその後標準化されました。

しかし、サーバーが何を吐き出すのかを正確に確認したいだけです

現時点では、「Raw」ボタンを使用して生の JSON を表示するのが最善の方法です。これはサーバーが送信したものです。 「解析済み」ボタンは、 JSON.parseから取得する内容を表します。

将来的には、JSON Formatter は、解析によって値が「変更」されたことを検出し、適切な警告を表示するために、(パフォーマンスが許せば) JSON.parseの使用からカスタム パーサーに切り替える可能性があります。