WHO AM I?

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

目次

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

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

ワザ1: $, $$

ワザ1: $, $$

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

ワザ1: $, $$

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

ワザ2: $0

ワザ2: $0

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

ワザ2: $0

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

ワザ3: console.table

ワザ3: console.table

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

ワザ3: console.table

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)

ワザ3: console.table

ワザ4: console.dir, console.dirxml

ワザ4: console.dir, console.dirxml

ワザ4: console.dir, console.dirxml

ワザ5: console.time, console.timeEnd

ワザ5: console.time, console.timeEnd

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

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

ワザ5: console.time, console.timeEnd

番外編: どこでもjQuery

番外編: どこでもjQuery

// 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)
}

番外編: どこでもjQuery

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

注意点

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

まとめ

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

参考資料

• Using the Console | Web | Google Developers
• Console API Reference  |  Web  |  Google Developers
• The Console - developer.apple.com
• console - Web API インターフェイス | MDN
• javascript - Chrome Developer Tools: What is Snippets Support? - Stack Overflow

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