2018.8.7

Chromeの開発ツールを使おう

どうも、kuroro0319です。

他の人が作ったサイトのちょっとした修正などがあった時に、
いちいちサイトをダウンロードしてローカルで環境を整えてから作業するのはとても面倒です。

環境を整えるだけで一日終わっちゃったりして、
キングオブ無駄な一日を過ごしたような気分になりませんか？

今回はそんな無駄な一日を過ごさないためにGoogle Chromeの開発ツールを使ってみましょう！

Chromeの開発ツールって何？

ブラウザ上で右クリックするとメニューの下の方に「検証」と出てきます。
こちらをクリックするとソースコードなどが書いてあるダイアログが出てきます。
こちらが開発ツールになります。

Chromeの開発ツールでよく使う機能

機能はたくさんありますが、私がよく使う機能としては以下になります。

・デバイス確認ツール
・コンソール
・Search
・CSSの書き換え

それではそれぞれの使い方を見ていきましょう。

Chromeのデバイス確認ツールの使い方

これは普通に使ってる人が多いかもしれません。
赤枠の部分をクリックすると色々なデバイスでの見え方を試すことができます。
また、Setting画面から色々なデバイスを追加できたり、
通信速度などを変更することもできます。
ただ、あくまで実機ではないということを
頭に置いておいた方がいいと思います。

Chromeのコンソールの使い方

これも使ってる人が多いと思いますが、
主にjsのデバッグで使用します。
jsなどにエラーが出ると黄色（警告）や赤色（エラー）が出るので、
サイトのエラーチェックに重宝します。
また、js内のconsole.log関数内に書いたことがこちらに出力されます。
どのような値が出力されるかが、気になる時に使います。
それから、ここに直接jsも書くことができますので、
気になる変数などを直接調べることも可能です。

ChromeのSearchの使い方

これは個人的には結構気に入ってます。
要するに検索ツールなんですが、見ているページに
紐づくファイルを全部検索してくれるので、結構助かります。
普通のエディタでも検索ツールはあるので、
特に使う必要がないと感じる人もいるかもしれません。
しかし、これの優れている点は検索機能そのものではなく、
ブラウザで表示されているページを検索するという点です。
何故、それが優れているのかというと、
外部読み込みのスクリプトなどはエディタ上では確認ができないからです。
エラーが発生しているのに原因がよくわからないという時は
外部ファイルが原因ということもあります。
そんな時に外部ファイルも含めて検索してくれるこの機能は真価を発揮します。
動的なファイルも検索できるので素晴らしいです。

CSSの書き換え

ここが本題です。
CSSをブラウザ上で操作できちゃいます！
しかも矢印ボタンで制御できるので、とても便利です。
HTMLも修正できるので、簡単な修正ならここでやって、
差分だけを送ったらもう出来上がりです！
とても簡単で、間違いも起こりにくいです

他にもSublimetextの「LiveStyle」パッケージと
Chrome拡張機能の「LiveStyle」を合わせて、
ライブコーディングができたりととても素晴らしいです。