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

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

More than 3 years have passed since last update.

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

by notakaos
1 / 28

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: 参考資料


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

notakaos
東京在住のWeb Developer
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
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
ユーザーは見つかりませんでした