console.logまとめ 2016年夏

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

## console.hogehogeのいろいろ

### console.log

基本
![スクリーンショット 2016-08-16 18.59.32.png](https://qiita-image-store.s3.amazonaws.com/0/6808/79345921-149b-ab37-38f5-1b58242f6572.png)

引数を入れることで出力結果をカスタマイズできます
![スクリーンショット 2016-08-16 19.00.30.png](https://qiita-image-store.s3.amazonaws.com/0/6808/68aec1da-a7be-cb60-7d73-666aa5ebcbe3.png)

### console.info、console.warn、console.error

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

![スクリーンショット 2016-08-16 19.03.55.png](https://qiita-image-store.s3.amazonaws.com/0/6808/5c7d8058-a7f3-479e-c3cb-0354051bb79d.png)

![スクリーンショット 2016-08-16 19.04.19.png](https://qiita-image-store.s3.amazonaws.com/0/6808/2b48e8d8-55cc-b062-d3db-d326d70d21e7.png)

![スクリーンショット 2016-08-16 19.04.52.png](https://qiita-image-store.s3.amazonaws.com/0/6808/174f08e9-6611-54d6-b29b-e91e565e73f3.png)

### console.assert

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

![スクリーンショット 2016-08-16 19.05.49.png](https://qiita-image-store.s3.amazonaws.com/0/6808/aa18762d-686d-7e16-d894-00f53eb6bc43.png)

### console.count

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

![スクリーンショット 2016-08-16 19.07.22.png](https://qiita-image-store.s3.amazonaws.com/0/6808/211358d2-8ff3-c1a2-7cca-03f1dda534c8.png)

### console.dir

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

![スクリーンショット 2016-08-16 19.08.08.png](https://qiita-image-store.s3.amazonaws.com/0/6808/4e84a562-afe8-217c-1c05-f9ffef3dbd1f.png)

### console.dirxml

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

![スクリーンショット 2016-08-16 18.58.01.png](https://qiita-image-store.s3.amazonaws.com/0/6808/681b826f-ce8a-1d69-cc4b-aa27d0595f3a.png)

### console.group、conosle.groupCollapsed

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

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

![スクリーンショット 2016-08-16 19.09.14.png](https://qiita-image-store.s3.amazonaws.com/0/6808/2000bd4b-622d-1baa-fbe4-461b8a6fec1e.png)

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

下記のようにtestを設定すると
![スクリーンショット 2016-08-17 19.56.41.png](https://qiita-image-store.s3.amazonaws.com/0/6808/2af5b786-da03-e2cc-e255-a0b2c372daed.png)

Profilesパネルにtestが追加されます
![スクリーンショット 2016-08-17 19.58.05.png](https://qiita-image-store.s3.amazonaws.com/0/6808/7e4d15ca-6e55-5727-9a6a-d68f85217066.png)


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

![スクリーンショット 2016-08-16 19.10.32.png](https://qiita-image-store.s3.amazonaws.com/0/6808/b242ed18-c79e-e5fb-81ea-eb7a4923ad08.png)

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

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


<img width="813" alt="スクリーンショット 2016-08-16 18.34.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/6808/8109b770-e3ee-0acd-ebfe-90f10c350893.png">

### console.trace

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

![スクリーンショット 2016-08-16 19.11.26.png](https://qiita-image-store.s3.amazonaws.com/0/6808/0c7d6584-fc4f-95ad-2ab9-36e8b8ef1d2d.png)


### console.table

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

![スクリーンショット 2016-08-17 20.08.31.png](https://qiita-image-store.s3.amazonaws.com/0/6808/b688905b-d3d7-9fc3-c5db-7a7473f27c6b.png)


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

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

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

**%s**

![スクリーンショット 2016-08-17 19.40.33.png](https://qiita-image-store.s3.amazonaws.com/0/6808/4e03e013-0b65-991f-fce7-10f5d73e9768.png)

**%i,%d**

![スクリーンショット 2016-08-17 19.41.20.png](https://qiita-image-store.s3.amazonaws.com/0/6808/3f96113e-7d82-c25f-157a-3ce5408c7595.png)

**%f**

![スクリーンショット 2016-08-17 19.44.59.png](https://qiita-image-store.s3.amazonaws.com/0/6808/2b4a0858-7fc4-e389-630f-0b6d8cac2e21.png)

**%o**

![スクリーンショット 2016-08-17 19.42.16.png](https://qiita-image-store.s3.amazonaws.com/0/6808/40e705ce-fa97-8df1-a497-022b3a427661.png)

**%O**

![スクリーンショット 2016-08-17 19.42.46.png](https://qiita-image-store.s3.amazonaws.com/0/6808/807c0074-400d-e2d5-c8b9-188743fc739b.png)


**%c**

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

<img width="516" alt="スクリーンショット 2016-08-17 18.41.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/6808/bd110421-6044-718b-0c9d-04c1396b3d50.png">


・facebookの場合
![スクリーンショット 2016-08-17 19.46.29.png](https://qiita-image-store.s3.amazonaws.com/0/6808/f36e08ba-5843-b72e-0533-9a243b5c145a.png)

・cookpadの場合
![スクリーンショット 2016-08-17 19.46.01.png](https://qiita-image-store.s3.amazonaws.com/0/6808/4e3af733-e7b2-5c70-72ce-0a0f9a5ff32c.png)


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

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

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

[console.log()を使うときのおすすめ記述方法](http://qiita.com/tonkotsuboy_com/items/27e20373d4fd16406622)