chromeの便利機能を有効的に使ってる？知らない人は、勿体ない！機能紹介
この季節はニーソを履いて寒そうにしているカワイイ子を見ると癒されますね。
ニーソってところが大切です。
みなさんおはこんにちばんは～！
今回はChrome（ちょろめ）のデベロッパーツールについて、ご紹介したいと思います。
Webサイトを作っているときに、ブラウザー確認をしますよね。そんな時に使える便利な機能です。
使い方
サイトを開いている状態で、F12 のキーを押します。
それだけで起動します。
最初に開くと、この状態なのですが、下の方にあるこのアイコン
をクリックすると、分離します。分けて使ったほうが便利です。
左から2番目のアイコンをクリックすると、プログラムの実行ができる画面が出てきます。
コードヒントがあり、わかりやすくなっています。
上にあるConsoleアイコンも同じ効果です。
ただ、Consoleのアイコンをクリックすると、一つの画面でコードが打つことができます。
左から3番目の虫眼鏡のアイコンをクリックすると、そのページ上で選択したい場所がすぐに選ぶことができます。
また、マウスを乗せいているところのコンテンツのサイズが表示されるので、サイズを確かめたりするときにも便利です。
また、隣にあるStylesではCSSの追加などをして、直接確認する事もできます。
Metricsに切り替えれば、位置関係確認もすることができます。
便利機能
1.Resoureces
このアイコンをクリックすると、そのページに表示されいてる画像や、スクリプト、またローカルストレージの中身やCookiesなどを確認する事ができます。
2.Console
このアイコンをクリックすると、上記でも説明しましたが、プログラムが実行する事ができる画面が出てきます。
ここで、console.logを見たり、alertをだしてみたりすると、わざわざJS側を書き直したりせずに確認ができるので便利です。
