Webサイト開発効率を高めるWeb Inspector Consoleで使える5つのワザ(for Chrome)

## ![logo_length.png](https://qiita-image-store.s3.amazonaws.com/0/24450/d7804499-9c46-d981-c821-f79ec3c63973.png)

----
# WHO AM I?

* Nobutaka OSHIRO (@n-oshiro)
    * [株式会社ゆめみ](https://www.yumemi.co.jp/ja)
    * マーケティングソリューション事業部
* スキルセット
    * JavaScript, ES2015, Meteor, jQuery, etc.
    * PHP, Laravel
    * Ruby, Ruby on Rails
    * Docker

----

# :bookmark: 目次

- ワザ1: \$, \$$
- ワザ2: $0
- ワザ3: console.table
- ワザ4: console.dir, console.dirxml
- ワザ5: console.time / console.timeEnd
- 番外編: どこでもjQuery

----

## 注: これから紹介するワザは Google Chrome の Web Inspector 向けです。ブラウザによっては使えないワザもあります。

----
# :bulb: ワザ1: $, $$

----
## :bulb: ワザ1: $, $$

`document.querySelector()`, `document.querySelectorAll()` のショートハンド

----
## :bulb: ワザ1: $, $$

![ScreenShot 2016-11-16 10.21.53.png](https://qiita-image-store.s3.amazonaws.com/0/24450/03ab05fd-568a-4567-dc62-fcd0b4a4c923.png)

NOTE： jQueryが入って無くても`$`が使える

----
# :bulb: ワザ2: $0

----
## :bulb: ワザ2: $0

Elementsタブで最後に選択した要素を取得

----
## :bulb: ワザ2: $0

![waza2.gif](https://qiita-image-store.s3.amazonaws.com/0/24450/4316197a-5fd7-b44b-8eca-cf0acbf19e2f.gif)

NOTE: \$1, \$2, \$3... と順に、選択した要素をさかのぼる

----
# :bulb: ワザ3: console.table

----
## :bulb: ワザ3: console.table

オブジェクトのArrayを見やすく表示する

----
## :bulb: ワザ3: console.table

```js
var arr = [
  {id: 1, name: 'foo', email: 'foo@example.com'},
  {id: 2, name: 'bar', email: 'bar@example.com'},
  {id: 3, name: 'hoge', email: 'hoge@example.com'},
  {id: 4, name: 'fuga', email: 'fuga@example.com'},
  {id: 5, name: 'piyo', email: 'piyo@example.com'},
]

console.table(arr)
```
----
## :bulb: ワザ3: console.table

![ScreenShot 2016-11-16 10.27.38.png](https://qiita-image-store.s3.amazonaws.com/0/24450/79c45c81-2e7a-350f-7a62-4d3f15b0c393.png)

----
# :bulb: ワザ4: console.dir, console.dirxml

----
## :bulb: ワザ4: console.dir, console.dirxml

<img width="639" alt="ScreenShot 2016-11-16 10.35.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/24450/9a1fd55e-1d89-d366-9624-4da15762b340.png">


----
## :bulb: ワザ4: console.dir, console.dirxml

![ScreenShot 2016-11-16 10.34.02.png](https://qiita-image-store.s3.amazonaws.com/0/24450/6ed43401-c6f3-6da6-ede5-5f68667a0a2c.png)

----
# :bulb: ワザ5: console.time, console.timeEnd

----
## :bulb: ワザ5: console.time, console.timeEnd

time 〜 timeEnd の間の時間を計測する

```js
console.time()
setTimeout(function() {
  console.log("Hello!")
  console.timeEnd()
}, 3000)
```

----
## :bulb: ワザ5: console.time, console.timeEnd

![ScreenShot 2016-11-16 10.39.05.png](https://qiita-image-store.s3.amazonaws.com/0/24450/62f8054f-8925-45c5-6d06-b17b2265e964.png)

----
# :bulb: 番外編: どこでもjQuery

----
## :bulb: 番外編: どこでもjQuery

```js
// from https://jquery.com/
if (!this.jQuery) { 
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = "//code.jquery.com/jquery-3.1.1.min.js" 
  document.body.appendChild(script)
}
```

----
## :bulb: 番外編: どこでもjQuery

[Web Console] -> [Sources] Tab -> [Snippets]

![ScreenShot 2016-11-16 10.40.00.png](https://qiita-image-store.s3.amazonaws.com/0/24450/1ce80818-c713-f8f8-dc2d-43e4d44463e5.png)


----
# :warning: 注意点

* これらのワザは基本的には開発時のデバッグ用なので、本番コードに含めないように気をつけましょう

----
# :book: まとめ

* Console API には開発時のデバッグに役立つ機能が満載
* 道具の使い方を覚えて開発効率アップ :smiley: 
* まだまだ勉強中なので他にもよい使い方があれば教えてください

----

# :link: 参考資料
* [Using the Console | Web | Google Developers](https://developers.google.com/web/tools/chrome-devtools/console/)
* [Console API Reference  |  Web  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/console/console-reference#consoleerrorobject--object-)
* [The Console - developer.apple.com](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
* [console - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/console)
* [javascript - Chrome Developer Tools: What is Snippets Support? - Stack Overflow](http://stackoverflow.com/questions/10470711/chrome-developer-tools-what-is-snippets-support)

----

# ご清聴ありがとうございました！