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

console.logまとめ 2016年夏

More than 3 years have passed since last update.

console.log関連についてまとめました。
モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。

console.hogehogeのいろいろ

console.log

基本
スクリーンショット 2016-08-16 18.59.32.png

引数を入れることで出力結果をカスタマイズできます
スクリーンショット 2016-08-16 19.00.30.png

console.info、console.warn、console.error

それぞれで見た目を変えることができます。

スクリーンショット 2016-08-16 19.03.55.png

スクリーンショット 2016-08-16 19.04.19.png

スクリーンショット 2016-08-16 19.04.52.png

console.assert

式を評価してfalseの場合にログ出力します。

スクリーンショット 2016-08-16 19.05.49.png

console.count

ログの出力結果が同じ場合にカウント数が自動的に増えていきます。

スクリーンショット 2016-08-16 19.07.22.png

console.dir

オブジェクトのプロパティの中身をログに出力します。

スクリーンショット 2016-08-16 19.08.08.png

console.dirxml

HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。

スクリーンショット 2016-08-16 18.58.01.png

console.group、conosle.groupCollapsed

console.logをグループ化して見やすくします。
console.groupで開始して、console.groupEndで終了。

console.groupCollapsedで開始をするとデフォルトでグループが閉じた状態でログに出力されます。

スクリーンショット 2016-08-16 19.09.14.png

console.profile、console.profileEnd

console.profileから.profileEndまでの、javascriptのCPU profileが見れます。

下記のようにtestを設定すると
スクリーンショット 2016-08-17 19.56.41.png

Profilesパネルにtestが追加されます
スクリーンショット 2016-08-17 19.58.05.png

console.time、console.timeEnd

console.timeからconsole.timeEndまでの時間を測れます。

スクリーンショット 2016-08-16 19.10.32.png

console.timeStamp

chromeの検証 > Timelineに追加することができます。

  function hoge() {
    ret = 0;
    for(var i=0; i<100000; i++) {
      ret = i;
    }
    console.log(ret);
  }
  console.timeStamp("hogeStamp")

スクリーンショット 2016-08-16 18.34.31.png

console.trace

メソッド実行時のスタックトレースが見れます。
どのメソッド経由してきたかが知りたい時に便利。

スクリーンショット 2016-08-16 19.11.26.png

console.table

テーブル表示ができます。

スクリーンショット 2016-08-17 20.08.31.png

文字列の置換とフォーマットの設定

特定の文字列を置換できます。
使いみちあんまりわからないけど、、、

置換文字
%s string型の置換
%i,%d int型の置換
%f float型の置換
%o DOM要素の置換
%O JavascriptObjectの置換
%c スタイルの置換

%s

スクリーンショット 2016-08-17 19.40.33.png

%i,%d

スクリーンショット 2016-08-17 19.41.20.png

%f

スクリーンショット 2016-08-17 19.44.59.png

%o

スクリーンショット 2016-08-17 19.42.16.png

%O

スクリーンショット 2016-08-17 19.42.46.png

%c

%c以降の文字列に設定したスタイルを適用します。

スクリーンショット 2016-08-17 18.41.22.png

・facebookの場合
スクリーンショット 2016-08-17 19.46.29.png

・cookpadの場合
スクリーンショット 2016-08-17 19.46.01.png

本番環境では出力をしないようにしたい

本番環境ではconsole.logを出したくないということがあるかと思います。
参考になる記事がありましたので、紹介します。

console.logのみなので、他の関数でも使いたい場合はそれぞれのラッパーを作る必要がありますね。

console.log()を使うときのおすすめ記述方法

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした