1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:
フロントエンドエンジニアの谷です。

本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。

すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう!

基本的な使い方

Chrome DevTools Overview

基本はやはり公式ドキュメント。基本機能や各パネルの使い方 + ちょっとした小技なども紹介されています。ショートカットの説明もあるので合わせて覚えたいですね。

Discover DevTools

Code Schoolというオンライン学習のWebサービスのいちコンテンツ。Google監修で、より詳しく正しいです。この後でも紹介する、デバッグ、パフォーマンス分析といったところの方法も解説しながら、実際に簡単なトレーニングもおこなうことができます。なんと無料。

JavaScript開発、パフォーマンス・チューニング

JavaScriptデバッグ

JavaScriptまたはHTML/CSSのデバッグの基本について解説しているページ。Chrome DevToolsに限らず、Firefox+Firebugなど他のブラウザの開発者ツールでも使える方法も含まれます。 貴重な日本語リソースでは、吉川さんのこちらのスライドが秀逸。このスライドでは主にSources、Timeline、Profilesパネルについて解説しています。 Canvasのデバッグについての紹介も。 CoffeeScriptやTypeScriptや、Sassといったプリプロセッサによる開発、またはClosure CompilerやYUI Compressorなどのコードの圧縮によって、開発上の触るコードとの差が生まれ、デバッグが難しいということがあります。

それを解決するためのSourceMapという機能(オリジナルのコードと、コンパイル・圧縮後のファイルとひもづけるファイル)があり、それを介してDevToolsでもデバッグを容易にすることができます。下記はDevToolsで使うための方法について。

パフォーマンス・チューニング

DevToolsによるパフォーマンス・チューニング、主にネットワーク系のチューニングについては、Ilya Grigorik氏のこちらのスライド。 中に登場するHARについては彼のブログでも解説されている。ページ内で紹介されている動画もチェックしよう。 AirBnBという自宅や余った部屋を他人・旅行者に貸出するのを仲介するという世界的に人気のあるサービスがあり、その開発者によるパフォーマンス・チューニングの話。どのように最適化していったかというプロセスなどが見られるので必見。 メモリについての解析、チューニングについて。 ネットワークだけでなく、ペイント(描画)のチューニングについても今はフォーカスされています。そのための手法など。

リモートデバッグ

Chrome for Androidでデバッグ

Google Playで配布されているChrome for Androidを通じてデバッグすることができます。利用するためには、Chrome for Androidの他にAndroid SDKのインストールも必要です。あとは実機にUSB接続、設定を進めれば可能になります。 [追記:2013/10/10]
@agektmrさんより、後述のCanaryバージョンであればSDK不要で、接続してchrome://inspectを開けばデバッグできるようです。安定版でも可能になるのが楽しみですね。情報ありがとうございます!

また安定版でもChrome ExtensionのADBを使えば、安定版でもSDK無しでデバッグ可能です。@t32kさんありがとうございます!

iOS Mobile Safariでデバッグ

GoogleがGithubで公開しているiOS WebKit Debug Proxyを使えば、iOSシミュレータやUSB接続した実機端末でのデバッグができます。iOS WebKit Debug ProxyはHomebrewを使ってインストールができます。

試験的な機能を使う

Google Chrome Canary

Google Chrome Canaryは安定版として提供される前に、開発者向けの機能が試験的に実装されるバージョンのGoogle Chromeです。ほぼ毎日更新され、新しい機能やUIをいち早く試すことができるのですが、不安定でもあるため、バグによって操作できなくなるということもあります。ただ安定版のものとは別でインストール、起動できるので、Canaryの影響で安定版が動かなくなるということは基本的にありません。

開発者としては新しい機能に触れられるのは興味深いことですし、インストールして置いて損はないかとおもいます。

なんと今回紹介したGoogle Chrome + DevToolsに関わる開発者がサイバーエージェントにやってくる!

2013年10月30日(水)当社主催の技術セミナー「Frontrend(フロントレンド)」にて、Google本社からゲストスピーカー(Paul Irish、Addy Osmani、Jake Archibald)を招き、Chromeをテーマにしたイベント「Frontrend x Chrome Tech Talk Night Extended」を開催します!

DevToolsや周辺ツールを使っていかに開発効率をあげるか、ウェブ開発におけるパフォーマンス最適化などのトピックについて、世界を代表する開発者である彼らから聞けるのは本当に貴重ですので、ぜひ皆さんご参加ください!


※残席残り僅かです。

あなたの欲しい機能が実装されるかも?

イベントのあとには懇親会もあるので、すでにDevToolsを使いこなしている人も、今回の記事をみて使い始めた人も、彼らに欲しい機能を要望すれば、それが実装されるかもしれません。当日までにDevToolsをどんどん使いましょう。

最後まで記事をお読みいただきありがとうございました、またイベントに参加される方は会場でお会いしましょう。
いいね!(0)  |  リブログ(0)
ページトップへ戻る