JavaScript のデバッグ console.table()

昨日、Chrome デバッグ ツールの簡単なデバッグ方法について学びました。WDCC 中に、Marcus Ross (@zahlenhelfer) が Chrome デバッグ ツールのさまざまなデバッグ方法を紹介しました。これはそのうちの 1 つです。それでは、それをお見せしましょう。

CONSOLE.LOG() を使用して配列を表示します

次の配列を構築したと想像してください

var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];console.log(languages);

console.log() は次のような配列を表示します

この種の表示形式は開発には非常に便利ですが、各オブジェクトを手動でクリックするのは少し面倒だと思います。この時点で、console.table() は少し興味深いと思います。

配列を表示するには CONSOLE.TABLE() を使用します。

次に console.table() を使ってみましょう:

非常に小さくて木製です。持っている？

もちろん、console.table() の方が適しています。データはテーブル形式でフラットにリストされ、より完璧に表示されます。そうでない場合、各配列要素が異なる構造を持つ場合、テーブル内の多くのグリッドが未定義になります。 。

CONSOLE.TABLE() を使用してオブジェクトを表示する

console.table() のもう 1 つの機能は、オブジェクトを表示することです。

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

そのとおりです。

CONSOLE.TABLE() のフィルタリング関数

console.table() で特定の列の表示を制限したい場合は、次のようにパラメータにキーワード リストを渡すことができます。 ##

// Multiple property keys
console.table(languages, ["name", "paradigm"]);

プロパティにアクセスしたい場合は、パラメータが 1 つあれば十分です。

// A single property key
console.table(languages, "name");

私はかつて Chrome デベロッパー ツールの機能をほとんど理解していると思っていましたが、今では明らかに間違っています。Sao Nian 何もすることがない場合は、Chrome DevTools のドキュメントを確認してください。

関連する学習に関する推奨事項:

JavaScript ビデオ チュートリアル

以上がJavaScript のデバッグ console.table()の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。