DevToolsコンソールとコンソールAPIの操作

すべてのブラウザーは、WebプラットフォームAPIと対話できるコンソールを公開し、ページで実行されているJavaScriptコードによって生成されたメッセージを出力することでコードの内部を確認することもできます。

すべてのブラウザは、あなたが対話できるコンソールを公開していますWebプラットフォームAPIまた、によって生成されたメッセージを印刷することにより、コードの内部を確認できます。JavaScriptページで実行されているコード。

The browser console

コンソールの概要

コンソールツールバーはシンプルです。コンソールメッセージをクリアするためのボタンがあります。これは、クリックして実行することもできます。cmd-KmacOSで、またはctrl-KWindowsでは、フィルタリングサイドバーをアクティブにする2番目のボタン。テキスト、またはメッセージの種類（エラー、警告、情報、ログ、デバッグメッセージなど）でフィルタリングできます。

ネットワークで生成されたメッセージを非表示にして、JavaScriptログメッセージのみに焦点を当てることもできます。

Filtering console messages

コンソールは、メッセージを表示できる場所であるだけでなく、JavaScriptコード、および多くの場合DOMと対話するための最良の方法でもあります。または、ページから情報を取得するだけです。

最初のメッセージを入力しましょう。 >に注意して、そこをクリックして入力しましょう

console.log('test')

コンソールは、REPL、これはread-eval-printループを意味します。つまり、JavaScriptコードを解釈して、何かを出力します。

console.logフォーマットを使用する

ご覧のとおり、console.log('test')コンソールに「test」を出力します。

使用するconsole.logJavaScriptコードでは、静的な文字列を出力するなどしてデバッグに役立ちますが、JavaScriptのネイティブ型（整数など）またはオブジェクトの変数を渡すこともできます。

複数の変数をに渡すことができますconsole.log、例えば：

console.log('test1', 'test2')

変数とフォーマット指定子を渡すことで、きれいなフレーズをフォーマットすることもできます。

例えば：

console.log('My %s has %d years', 'cat', 2)

%s変数を文字列としてフォーマットします
%dまたは%i変数を整数としてフォーマットします
%f変数を浮動小数点数としてフォーマットします
%oDOM要素の印刷に使用できます
%Oオブジェクト表現を印刷するために使用されます

例：

console.log('%o, %O', document.body, document.body)

Print objects in the console

もう1つの便利なフォーマット指定子は%c、CSSを渡して文字列をフォーマットすることができます。例えば：

console.log(
  '%c My %s has %d years',
  'color: yellow; background:black; font-size: 16pt',
  'cat',
  2
)

Format in the console using CSS

コンソールをクリアします

作業中にコンソールをクリアするには、さまざまな入力方法を使用する3つの方法があります。

最初の方法は、コンソールログのクリアコンソールツールバーのボタン。

2番目の方法はタイプすることですconsole.clear()コンソール内、またはあなたのJavaScript関数それはあなたのアプリ/サイトで実行されます。

入力することもできますclear()。

3番目の方法は、キーボードショートカットを使用することです。cmd-k（mac）またはctrl + l（勝つ）

要素を数える

console.count()便利な方法です。

このコードを取る：

const x = 1
const y = 2
const z = 3
console.count(
  'The value of x is ' + x + ' and has been checked .. how many times?'
)
console.count(
  'The value of x is ' + x + ' and has been checked .. how many times?'
)
console.count(
  'The value of y is ' + y + ' and has been checked .. how many times?'
)

何が起こるかというと、countは文字列が出力された回数をカウントし、その横にカウントを出力します。

Counting the times a string is printed

あなたはただリンゴとオレンジを数えることができます：

const oranges = ['orange', 'orange']
const apples = ['just one apple']
oranges.forEach(fruit => {
  console.count(fruit)
})
apples.forEach(fruit => {
  console.count(fruit)
})

Counting the fruits

より複雑なオブジェクトをログに記録する

console.log変数を検査するのはかなり素晴らしいです。オブジェクトを渡すこともでき、読みやすい方法で印刷するために最善を尽くします。ほとんどの場合、これはオブジェクトの文字列表現を出力することを意味します。

たとえば、試してみてください

console.log([1, 2])

オブジェクトを印刷する別のオプションは、console.dir：

console.dir([1, 2])

ご覧のとおり、このメソッドは変数をJSONのような表現で出力するため、すべてのプロパティを調べることができます。

console.dirが出力するのと同じことは、次のことによって達成できます。

console.log('%O', [1, 2])

Console logging with dir

どちらを使用するかは、もちろんデバッグする必要があるものによって異なり、2つのうちの1つが最適な作業を実行できます。

別の機能はconsole.table()素敵なテーブルを印刷します。

要素の配列を渡すだけで、各配列アイテムが新しい行に出力されます。

例えば

console.table([[1, 2], ['x', 'y']])

または、配列の代わりにObject Literalを渡すことで列名を設定して、オブジェクトプロパティを列名として使用することもできます。

console.table([
  { x: 1, y: 2, z: 3 },
  { x: 'First column', y: 'Second column', z: null }
])

Console logging with table

console.tableより強力な場合もあり、オブジェクトを含むオブジェクトリテラルを渡して、列名を含む配列を渡すと、オブジェクトリテラルから取得した行インデックスを含むテーブルが出力されます。例えば：

const shoppingCart = {}
shoppingCart.firstItem = { color: 'black', size: 'L' }
shoppingCart.secondItem = { color: 'red', size: 'L' }
shoppingCart.thirdItem = { color: 'white', size: 'M' }
console.table(shoppingCart, ['color', 'size'])

Filtering console logging

さまざまなエラーレベルのログ

ご覧のとおり、console.logはコンソールでメッセージを印刷するのに最適です。

ここで、さまざまなレベルのエラーを暗黙的に示すため、デバッグに役立つ3つの便利なメソッドを見つけます。

最初、console.info（）

ご覧のとおり、横に小さな「i」が印刷されているので、ログメッセージが単なる情報であることを明確にしています。

第二に、console.warn（）

黄色の感嘆符を印刷します。

コンソールフィルタリングツールバーをアクティブにすると、コンソールでタイプに基づいてメッセージをフィルタリングできることがわかります。たとえば、[警告]をクリックすると、警告ではないすべての印刷メッセージが表示されるため、メッセージを区別するのに非常に便利です。非表示になります。

3番目の機能はconsole.error（）

これは他のものとは少し異なります。エラーがあることを明確に示す赤いXを出力することに加えて、エラーを生成した関数の完全なスタックトレースがあるため、修正を試みることができます。

Logging stack trace

コンソールメッセージは、チェックしない限り、すべてのページナビゲーションでクリアされます。ログを保存するコンソール設定：

Preserve log during navigation

コンソールメッセージのグループ化

コンソールメッセージのサイズが大きくなる可能性があり、エラーをデバッグしようとしているときのノイズが圧倒される可能性があります。

この問題を制限するために、コンソールAPIは便利な機能を提供します：コンソールメッセージをグループ化します。

最初に例を見てみましょう。

console.group('Testing the location')
console.log('Location hash', location.hash)
console.log('Location hostname', location.hostname)
console.log('Location protocol', location.protocol)
console.groupEnd()

Logging groups

ご覧のとおり、コンソールはグループを作成し、そこにログメッセージがあります。

同じことを行うことができますが、ノイズをさらに制限するために、オンデマンドで開くことができる折りたたまれたメッセージを出力します。

console.groupCollapsed('Testing the location')
console.log('Location hash', location.hash)
console.log('Location hostname', location.hostname)
console.log('Location protocol', location.protocol)
console.groupEnd()

Another example of logging in groups

良い点は、これらのグループをネストできるので、最終的には

console.group('Main')
console.log('Test')
console.group('1')
console.log('1 text')
console.group('1a')
console.log('1a text')
console.groupEnd()
console.groupCollapsed('1b')
console.log('1b text')
console.groupEnd()
console.groupEnd()

Nesting groups

スタックトレースを印刷する

関数のコールスタックトレースを印刷すると、質問に答えるのに役立つ場合があります。どのようにしてコードのその部分に到達しましたか？

あなたはを使用してそうすることができますconsole.trace()：

const function2 = () => console.trace()
const function1 = () => function2()
function1()

Print stack trace

費やした時間を計算する

関数の実行にかかる時間を簡単に計算できます。time()そしてtimeEnd()

const doSomething = () => console.log('test')
const measureDoingSomething = () => {
  console.time('doSomething()')
  //do something, and measure the time it takes
  doSomething()
  console.timeEnd('doSomething()')
}
measureDoingSomething()

Use console time

CPUプロファイルを生成する

DevToolsを使用すると、任意の機能のCPUプロファイルパフォーマンスを分析できます。

手動で開始することもできますが、最も正確な方法は、監視する対象をprofile()そしてprofileEnd()コマンド。彼らはに似ていますtime()そしてtimeEnd()ただし、時間を測定するだけでなく、より詳細なレポートを作成します。

const doSomething = () => console.log('test')
const measureDoingSomething = () => {
  console.profile('doSomething()')
  //do something, and measure its performance
  doSomething()
  console.profileEnd()
}
measureDoingSomething()

私の無料ダウンロードJavaScriptビギナーズハンドブック