6

私はベテランのC#コーダーですが、JavaScriptの初心者です。現在、純粋なJavaScriptコンポーネントである非常に有能なKendo UIデータソースを取得して、C#MVC3/4コントローラーとうまく通信できるようにしています。特定のJavaScriptオブジェクトを調べて、クライアント側のモデルマッピングコードを微調整できるようにしますが、Chromeデバッグコンソールでのオブジェクトの表示は少し雑然としていて低レベルです。

スクリプトのデバッグ中にJavaScriptオブジェクトを視覚化するために使用できるChromeアドインはありますか?それが失敗すると、オブジェクトの視覚化をHTMLとして出力するために使用できる優れたオブジェクトビジュアライザーがあります。次に、これがアクティブかどうかを切り替え、デバッグセッション用のビジュアルオブジェクトグラフを作成してから、クライアントスクリプトの通常の操作のためにビジュアライザーを再度オフに切り替えます。

**この質問は、他の質問と同じ目標のみを共有する、はるかに広範でターゲットが異なる質問です。MVC4アプリケーションでKendo UIデータソースからのJSONリクエストを受け入れるにはどうすればよいですか?ただし、この質問はテクノロジー固有のものであり、クライアントサーバーラウンドトリップ全体を対象としています。この質問は、クライアント上のJavaScriptオブジェクトの視覚化のみに固有のものです。

編集: 以下の提案に基づいてconsole.log、実行時検査に適切な出力を提供しますが、コンソールは忙しい場所であることが多く、オブジェクトのすべてのプロパティを拡張して、「内部」を使用せずに、他の場所で永続的な視覚化を出力したいと思います。画像に見られるように、__idと__proto。modelsそれぞれがIdプロパティとNameプロパティのみを持つ2つのオブジェクトの配列として表示したいと思います。

ここに画像の説明を入力してください

4

1 に答える 1

0

デバッガー内でオブジェクトを検査するよりも、オブジェクトをコンソールに送信する方が便利だと思います。煩雑さが少なく、コードを検索してブレークポイントを探す必要がありません。を実行してからF12キーを押しconsole.log(object)てコンソールを選択すると、オブジェクトはそこに座って検査できるようになります。

編集

プロパティでを行うとconsole.log、次のように表示されます。models

オブジェクトの配列をconsole.log'した後のChromeコンソール

または、必要に応じて、次のようなものを使用して、矢印をクリックせずに情報を吐き出すことができます。

function logModels(models) {
    for (o in models) for (p in models[o])
            console.log(p +'\t' + models[o][p]);
}

これは次のようになります:

カスタムログ機能を実行した後のChromeコンソール

Logsバーの下部にある適切なボタンをクリックし てのみ表示するようにコンソールをフィルタリングすることもできます。

于 2012-04-22T04:45:57.813 に答える