WebブラウザとしてはいつからかGoogle Chromeを愛用しています。確か最初は、他のブラウザと比べて表示が速く動作が軽いとか、そんな理由だったと記憶しています。
今じゃすっかり鈍重になったように思えますが、たまにFirefoxに浮気してみることはあれども、慣れもあるし、表示も規約に忠実だろうしと、こっちに戻って使い続けています。
Chromeは「検証」機能がすっごい便利
このChrome、ページ上で右クリックすると「検証」というメニュー項目があって、そのページのソースコードと、選択した部分の情報を表示してくれる機能を持っています。画像の縦横ピクセルサイズを確認するのに便利なので、ちょいちょい使っている機能ではありました。
こんな感じにウィンドウが分かれて、情報を表示してくれるんですよね。
今回サイトを作り直す際にも、大活躍してくれた機能でした。
ベースはWordPressです。それにCocoonというテーマを使うことにして、この子テーマもしくはスキンファイルを作り、その中で使われているCSSをカスタマイズしてサイトの見た目を変えていくことになります。
そこでChromeのこの機能を使うと、ソースコードを追いかけてクラス情報をたどる必要がないんですよね。一発でクラス名が出てくるし、そのエレメントに適用されているクラスの一覧と順位、何の値が上書きされているか、ついでに記述ミスで適用されてない箇所までがすべてわかるようになっています。
実はChromeは総合テストツールだった
もうすっごい便利。
すっごい便利で、ここまでは自分でもわかっていたんです。Chromeさん便利だなー重宝するわーって。
このサイトを公開し終わって、その段階でもすでに「今ってすごく便利な開発ツールそろってるなあ、俺の時にも欲しかったわー」などと思ってですね、そういえば動作を追っかけるのがウザかったJavaScriptの開発って今はどうなっているんだろうかと。動作をトレースできるデバッガなんかも、今は使えるようになってたりするんだろうかと、ふと気になったのです。それがあったらほんとにWeb開発楽しすぎるやんと。
そしたら、ググってみて出てくるのがそれもChromeを使うのだと。
先ほどの検証ウインドウには自分がいつも使っている以外にも様々なタブがあって、それを切り替えることでもっと色んな機能が使えるのだというじゃないですか。
確かにあらためて見てみれば、ぱっとわかるものだけでも次のようなタブが並んでます。
1のエレメントの検証がさっきまで使っていたやつ。2の標準入出力的なのが、実行したプログラムの出力とエラー出力を見せてくれるやつ。3がデバッガ。ここでJavaScriptのソースにブレークポイントをセットして、その挙動を逐一追いかけていけるみたい。4はページを表示する際に使うリソースを、ネットワークのどこにアクセスしてどう持ってきてるか(もしくはどう持ってこれなかったか)を確認できるやつ。サーバからの応答ステータスを確認できるので重宝しそう。
で、間をとばして最後にあるのがWebページの監査。作ったサイトがどの程度の出来映えか、各種指標値に照らし合わせてチェックしてくれます。
何これ。Chromeのこんな姿なんて、かれこれ数年以上使ってきてますけど、まったく知りもしませんでした。
エレメントの検証も、ただ見るだけじゃなかった
そのあたりを調べていてついでに驚いたのが、自分が「便利だ」と思っていた検証機能ですら、全然使いこなせていなかったことです。
どうも「見る」だけじゃなくて、書き換えることもできたらしい。
たとえばサイドバーにある「カテゴリー」という見出しを選択して検証画面を開いていたとします。そこで、「カテゴリーってちょっとイケてないよね、日本語の方がミーのサイトにはマッチしてベリグーだと思うのよね」なんて考えたとします。
じゃあ実際に書き換えて確認してみようと思ったら、そのままその画面で文言の部分をダブルクリックしてやればいい。
「ミーは分類がいいと思うのよね－」と思ったら、その通り書き換えてリターンキーを押すなどして確定すると…
実際のページの方もそれが反映されて、本当にマッチするのかどうか確認できるというわけです。
これがテキストだけじゃなくて、今は<h3>だけど<h1>の見出しにしてみたらどうだろうと思えばタグ部分を書き換えればいいし、CSS情報の方でデザイン指定している値を直に書き換えて変化を確認することもできる。
いちいちソースコードを別アプリで開いて、書き換えてはChromeの画面をリロードして…なんて操作は必要なかったのです。すげえ。
ちなみにうちのサイトの監査結果はというと…
最後にAuditsタブを開いて、うちのサイトのトップページを監査にかけてみました。結果、次のような成績でした。
パフォーマンスの値が低い！！
サイト公開直後に試した時は、70弱ぐらいのスコアだったはずなんですが、記事が増えるに従って画像も増えてかなりスコアを落としてしまっているようです。
サイトの中身が充実してきたら、おいおいそのへんも詰めていかないと駄目かなあ。
