Help us understand the problem. What is going on with this article?

1分で実現できるjavascriptにおけるconsoleまわりの有用なテクニック4つ

More than 5 years have passed since last update.

jsのconsoleまわりのテクニックはいろいろありますが、個人的に有用だと思ったものにしぼって紹介します。
chromeなら、command + option + jでconsoleを開いて下記のコードを貼りつければ実際に動きを確認できます(1分でできます!!)。

console.logの出力結果をcssで装飾する

出力例

スクリーンショット 2013-12-01 14.54.04.png

サンプルコード

console.log
console.log("%csuccess", "background-color:#5bb75b;color:white");
console.log("%cfail", "background-color:#da4f49;color:white;font-size:30px");

実行時間を計測して出力する

出力例

スクリーンショット 2013-12-01 15.26.41.png

サンプルコード

console.time
console.time("time test1")
console.time("time test2")
console.timeEnd("time test1")
console.timeEnd("time test2")

consoleの出力内容をグルーピングして可読性を向上させる

出力例

スクリーンショット 2013-12-01 15.21.58.png

サンプルコード

console.group.js
console.group("group test1");
console.log("test1");
console.groupEnd("group test1");
console.group("group test2");
console.log("test2");
console.groupEnd("group test2");

条件式によって出力するかしないかを判断する

出力例

スクリーンショット 2013-12-01 14.58.16.png

サンプルコード

console.assert
//console.assertの第一引数がfalseの場合、第二引数が表示されます
//trueの場合は何も表示されません。
console.assert(true,"trueだと何も表示しない")
console.assert(false,"falseだとこの内容を出力する")

あとがき

consoleには他にも色々メソッドがあります。気になった方は、consoleに紐づくメソッドを調べてみるとよいかもしれません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away