HTML
CSS
JavaScript
GoogleChrome

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

More than 1 year has passed since last update.


logo_length.png



WHO AM I?


  • Nobutaka OSHIRO (@n-oshiro)



  • スキルセット


    • 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

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



:bulb: ワザ2: $0



:bulb: ワザ2: $0

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



:bulb: ワザ2: $0

waza2.gif

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



:bulb: ワザ3: console.table



:bulb: ワザ3: console.table

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



:bulb: ワザ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)



:bulb: ワザ3: console.table

ScreenShot 2016-11-16 10.27.38.png



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



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

ScreenShot 2016-11-16 10.35.09.png



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

ScreenShot 2016-11-16 10.34.02.png



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



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

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

console.time()

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



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

ScreenShot 2016-11-16 10.39.05.png



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



:bulb: 番外編: どこでも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)
}



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

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

ScreenShot 2016-11-16 10.40.00.png



:warning: 注意点


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



:book: まとめ


  • Console API には開発時のデバッグに役立つ機能が満載

  • 道具の使い方を覚えて開発効率アップ :smiley:

  • まだまだ勉強中なので他にもよい使い方があれば教えてください



:link: 参考資料



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