細かすぎて伝わらないChrome Developerツール・テクニック集
目次
Frontrend Advent Calendar 2013、20日目の記事でございます。フロントエンド関連の記事として細かすぎて伝わりにくいであろうChrome Developerツールの使い方を紹介してみたいと思います。
console.log以外にも便利なconsoleメソッドがある！
console.log()とかは常識でしょうが、それ以外にも実はconsole系メソッドが多くあります。下記のような感じ。
-
console.error(): コンソールにエラー出力 -
console.warn(): コンソールに警告出力 -
console.assert(): アサーション。第一引数がfalseだった場合に第二引数の文字列を出力。 -
console.time()&console.timeEnd(): タイマー機能。前者でタイマースタート、後者でタイマーストップ。引数の文字列でタイマーIDを識別している。
例えば下記のコード例ではconsole.timeを使ってgetElementByIdとjQueryのセレクターのパフォーマンスの違いを計測しています。結果はChromeConsoleを開いてResultを押してどうぞご自身の目で確認してみてください。
ちなみに私の環境上での結果。
console.assert
簡易的なtrue/falseテストであればconsole.assert()が使えます。例えばこんなコード。
function returnTrue() { return false; }
console.assert(returnTrue(), 'Trueをreturnすべきだよ！')
こんな感じで表示されます。
CSSマッピングでChromeからCSS変更を直接反映！
CSSマッピングの機能を使うことでChrome上のCSS変更を直接反映することができます。簡単な手順はこうです。
- ChromeDevツールの歯車アイコンで開くメニューからWorkspaceを追加
- マッピングしたいファイルを選択し、右クリックして
Map to File System Resource...をクリックする。
(Image from Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ)
これで準備OK！ Chrome上で直接ヴィジュアルを確認しながらいい具合に変更を加えてれば、ローカル上のファイルも変更されます。
ソースマッピングにSASSを使う！
CSSよりもやっぱり時代はLESS,SASSなどのCSSプリプロセッサーですよねー。ということで実はCSSマッピングにSASSも使えるんです。ただし下記の点に注意してください。
- Sass 3.3以上が必要
- Chrome Canaryを使う
- chrome://flags にアクセスしてデベロッパーツールを有効にする
↓Enable Developer Tools experimentsをONにする↓
詳しい手順はこちら（Chrome CanaryでSCSS(Sass)のデバックを試してみました。）で確認してみてください。良きCSSライフを！
AndroidをChromeでリモートデバック可能！
下記動画でPaul Irish氏がリモートデバッギングを簡単に解説してくれてます。この動画でどんなことができるか簡単に把握することができます。
実機をChromeDevツールでデバッグできるのはとても喜ばしいことです。注意点は下記。
- Chrome BetaがAndroidに必要
- USBでAndroidと接続が必要
- アンドロイド上でDeveloperオプションを有効にする必要があります。ONにするためには設定からBuild Numberをゴニョゴニョする必要があります
詳しい解説はこちら（Remote Debugging Chrome on Android）を参照。
FPSを確認してヌルヌル動作を目指そう！
たとえば下記のかなりリッチなパララックスウェブサイト。ちょっと見てみてください。
パララックス効果はサイトをリッチに見せることができる最近良く使われるテクニックではありますが、一方ローエンドPCでの動作も気にしたいところです。上サイトをTimelineからレコーディングしてみます。
上のグレイ線が30FPSのライン、下の線が60FPSのラインです。途中のぶわーって広がるエフェクトのところで30FPSまで落ちているのが確認できます。体感的にも少しガクついている感じです。ローエンドPCだともっとガクつくことでしょう。
（※本機能の使い方もPaul Irish氏がFluent 2013の講演で紹介しています。）
おわりに
ここで紹介した以外にもまだまだ便利な使い方がChromeDeveloperツールにはあります。自分もまだ全然把握できていません。もし「この機能が便利！」ってのがありましたら是非とも教えてくださいまし〜。