JavaScriptコンソールを最大限に活用する方法

JavaScriptの最も基本的なデバッグツールの1つはconsole.log()です。にconsoleは、開発者のデバッグツールキットに追加できる他のいくつかの便利なメソッドが付属しています。

を使用しconsoleて、次のタスクのいくつかを実行できます。

  • 簡単なベンチマークに役立つタイマーを出力する
  • 表を出力して、配列またはオブジェクトを読みやすい形式で表示します
  • CSSを使用して出力に色やその他のスタイルオプションを適用する

コンソールオブジェクト

このconsoleオブジェクトを使用すると、ブラウザのコンソールにアクセスできます。コードのデバッグに役立つ文字列、配列、オブジェクトを出力できます。console一部であるwindowオブジェクト、およびブラウザ・オブジェクト・モデル(BOM)によって供給されます。

consoleの2つの方法のいずれかでにアクセスできます。

  1. window.console.log('This works')
  2. console.log('So does this')

2番目のオプションは基本的に前者への参照であるため、後者を使用してキーストロークを保存します。

BOMに関する簡単な注意:BOMには標準が設定されていないため、各ブラウザーはわずかに異なる方法でBOMを実装します。ChromeとFirefoxの両方ですべての例をテストしましたが、ブラウザによって出力が異なる場合があります。

テキストの出力

consoleオブジェクトの最も一般的な要素はconsole.logです。ほとんどのシナリオでは、これを使用して作業を完了します。

コンソールにメッセージを出力するには、次の4つの方法があります。

  1. log
  2. info
  3. warn
  4. error

4つすべてが同じように機能します。選択したメソッドに1つ以上の引数を渡すだけです。次に、ログレベルを示す別のアイコンが表示されます。以下の例では、情報レベルのログと警告/エラーレベルのログの違いを確認できます。

エラーログメッセージに気づいたかもしれません-それは他のものよりも派手です。これは、赤い背景とスタックトレースの両方を表示し、どこinfowarn ありません。warnChromeでは背景が黄色ですが。

これらの視覚的な違いは、コンソールのエラーや警告を一目で特定する必要がある場合に役立ちます。他の開発者にコードに問題があることを警告するために存在しない限り、本番用アプリでは削除されていることを確認する必要があります。

文字列の置換

この手法では、文字列内のプレースホルダーを使用して、メソッドに渡す他の引数に置き換えます。例えば:

入力console.log('string %s', 'substitutions')

出力string substitutions

%s第二引数のプレースホルダです'substitutions'コンマの後に来ます。文字列、整数、または配列はすべて文字列に変換され、を置き換えます%s。オブジェクトを渡すと、が表示されます[object Object]

オブジェクトを渡したい場合は%o、の%O代わりにまたはを使用する必要があります%s

console.log('this is an object %o', { obj: { obj2: 'hello' }})

数字

文字列置換は、以下を使用して整数および浮動小数点値で使用できます。

  • %iまたは%d整数の場合、
  • %f 浮動小数点用。

入力console.log('int: %d, floating-point: %f', 1, 1.5)

出力int: 1, floating-point: 1.500000

フロートは、を使用して小数点以下1桁のみを表示するようにフォーマットできます%.1f%.nf小数点以下n桁を表示することができます。

If we formatted the above example to display one digit after the decimal point for the floating-point number, it would look like this:

Input: console.log('int: %d, floating-point: %.1f', 1, 1.5)

Output:int: 1, floating-point: 1.5

Formatting specifiers

  1. %s | replaces an element with a string
  2. %(d|i)| replaces an element with an integer
  3. %f | replaces an element with a float
  4. %(o|O) | element is displayed as an object.
  5. %c | Applies the provided CSS

String Templates

With the advent of ES6, template literals are an alternative to substitutions or concatenation. They use backticks (``) instead of quotation marks, and variables go inside ${}:

const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

Objects display as [object Object] in template literals, so you’ll need to use substitution with %o or %O to see the details, or log it separately by itself.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table(superhero);

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table([superhero]); 

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.