Web開発に必携の「Google Chrome デベロッパーツール」の便利ワザ10個まとめ
Chromeのデベロッパーツールの便利技
Google Chromeのデベロッパーツールの便利な使い方を紹介します。
デベロッパーツールはGoogle Chromeに標準搭載されているWebインスペクタです。
JavaScriptのデバッグやCSSでのデザイン調整などをする際に便利！
日頃よく使う機能などを10個にまとめました。
デベロッパーツールはGoogle Chromeに標準搭載されているWebインスペクタです。
JavaScriptのデバッグやCSSでのデザイン調整などをする際に便利！
日頃よく使う機能などを10個にまとめました。
1．デベロッパーツールのウィンドウ位置の変更
まず、デベロッパーツールの起動ですが、Chromeの「ツール」→「デベロッパーツール」から行えます。
Windowsなら「Ctrl + Shift + I」、Macなら「Command + alt + I」のショートカットでもOK。
起動すると、このように画面下部に登場します。
この画面切り替えっぽいアイコンをクリックしてみます。
すると、デベロッパーツールがChromeから切り離されたり、
下記のように右側に配置させることができます。
たとえば、スマートフォン用のページを見るときは、右側に置いている方が使いやすいです。
用途によってデベロッパーツールの配置が変えられるは便利ですね。
Windowsなら「Ctrl + Shift + I」、Macなら「Command + alt + I」のショートカットでもOK。
起動すると、このように画面下部に登場します。
この画面切り替えっぽいアイコンをクリックしてみます。
すると、デベロッパーツールがChromeから切り離されたり、
下記のように右側に配置させることができます。
たとえば、スマートフォン用のページを見るときは、右側に置いている方が使いやすいです。
用途によってデベロッパーツールの配置が変えられるは便利ですね。
2．虫眼鏡で要素の選択
基本的な使い方のひとつですが、ウェブページの一部分を選択して該当するHTMLの要素を見つけられます。
この虫眼鏡マーク。一度クリックすると、虫眼鏡が青色になって有効になります。
その状態で、閲覧しているページの要素を選択しましょう。
すると、選択した要素のHTMLがデベロッパーツール表示されます。
実際のウェブページから目的のHTMLを瞬時に探し出せるのでぜひ使ってみてください。
この虫眼鏡マーク。一度クリックすると、虫眼鏡が青色になって有効になります。
その状態で、閲覧しているページの要素を選択しましょう。
すると、選択した要素のHTMLがデベロッパーツール表示されます。
実際のウェブページから目的のHTMLを瞬時に探し出せるのでぜひ使ってみてください。
3．ファイルの横断検索
ウェブページに読み込まれている、HTML, CSS, JavaScriptを横断検索できます。
横断検索はWindowsなら「Ctrl + Shift + F」、Macなら「Command + alt + F」です。
この技は覚えておくと非常に重宝します。
HTMLのID名やJavaScriptの変数名やfunction名で検索すると捗ります。
横断検索はWindowsなら「Ctrl + Shift + F」、Macなら「Command + alt + F」です。
この技は覚えておくと非常に重宝します。
HTMLのID名やJavaScriptの変数名やfunction名で検索すると捗ります。
4．スタイルシートの有効/無効、追加/編集
デベロッパーツールでは、その場でCSSの編集ができます。
HTMLの要素を選択すると、「Styles」タブにCSSが表示されます。
選択した要素に適用されているスタイルのみ表示されますよ。
その場で色を変更したり、不要なCSSを無効にすることも可能。
CSSの行末「;」の後ろ辺りでポチポチしてると、新しくスタイルを追加できます。
HTMLの要素を選択すると、「Styles」タブにCSSが表示されます。
選択した要素に適用されているスタイルのみ表示されますよ。
その場で色を変更したり、不要なCSSを無効にすることも可能。
CSSの行末「;」の後ろ辺りでポチポチしてると、新しくスタイルを追加できます。
5．スマートフォンページの動作確認
ユーザエージェントを偽装してタッチイベントを有効にすることで、
スマートフォン用ページの動作確認ができます。
トグルマークから設定画面を開きます。
「Overrides」の「Show 'Emulation' view in console drawer」にチェックを入れましょう。
（最近このあたりの仕様ががらっと変わりましたよね。分かりづらい…。）
「>≡」こういうマークをクリックすると、下部からにゅっとメニューが表示されます。
（もしくは、ElementsタブでEscキーを押しても出ます）
「Emulation」タブの「User Agent」からユーザエージェントが変更できます。
「iPhone - iOS6」などスマートフォンを選んでおきます。
「Sensors」の「Emulate touch screen」にチェックを入れておくと、
マウスが●←こういうのになって、タッチイベントが拾えます。
スマートフォンページの確認に便利な設定です。
スマートフォン用ページの動作確認ができます。
トグルマークから設定画面を開きます。
「Overrides」の「Show 'Emulation' view in console drawer」にチェックを入れましょう。
（最近このあたりの仕様ががらっと変わりましたよね。分かりづらい…。）
「>≡」こういうマークをクリックすると、下部からにゅっとメニューが表示されます。
（もしくは、ElementsタブでEscキーを押しても出ます）
「Emulation」タブの「User Agent」からユーザエージェントが変更できます。
「iPhone - iOS6」などスマートフォンを選んでおきます。
「Sensors」の「Emulate touch screen」にチェックを入れておくと、
マウスが●←こういうのになって、タッチイベントが拾えます。
スマートフォンページの確認に便利な設定です。
6．読み込まれている外部ファイルを一覧表示
スタイルシートやJavaScriptなど読み込まれている外部ファイルを一覧で表示できます。
「Resources」タブで一覧表示できます。
「Cookies」の項目から、Cookieを個別に削除することもできますよ。
Cookieによる動作を確認したいときに役立ちます。
「Resources」タブで一覧表示できます。
「Cookies」の項目から、Cookieを個別に削除することもできますよ。
Cookieによる動作を確認したいときに役立ちます。
7．圧縮されたソースコードを整形
JavaScriptのライブラリなどによく見られる圧縮されたコードを整形してくれます。
このように改行が全部なくなって、
変数もa,b,cのような意味のない文字に変換された難読化されたコードを見やすくできます。
「Sources」タブでJavaScriptを開き、下部にある「{ }」を有効にすると整形されます。
改行がある程度復元できるので、ライブラリ内をデバッグする際にぜひ。
このように改行が全部なくなって、
変数もa,b,cのような意味のない文字に変換された難読化されたコードを見やすくできます。
「Sources」タブでJavaScriptを開き、下部にある「{ }」を有効にすると整形されます。
改行がある程度復元できるので、ライブラリ内をデバッグする際にぜひ。
8．JavaScriptをデバッグする
JavaScriptをデバッグできます。
これがとても便利！というかJavaScriptの開発には不可欠な機能です。
大きく分けて3つのパネルに分かれます。
1番が実際のソースコード。
2番がブレークポイントやコールスタック。
3番が監視している変数。
まず1番目。
「Sources」タブを開き、JavaScriptを表示させます。
行番号のところをクリックすると、ブレークポイントの作成ができます。
処理がブレークポイントに辿り着くと、一時的に処理が止まります。
その時点での変数の中身をマウスオーバーで確認できます。
functionの戻り値を知りたい場合は、その部分を選択すると表示されます。
実際の処理を追いかけるときに便利です。
次はこちら。デバッグ中のブレークポイントを一覧で確認できます。
個人的に好きなのが「Call Stack」。
たとえば、デバッグ中にあるfunction内で処理を止めたとします。
「Call Stack」では、今どのfunctionから呼ばれているのかが把握できます。
ソースコードを追うときに非常に役立ちます。
「Watch Expressions」では、監視したい変数を自分で指定できます。
変数名をいれるだけで、現在の変数の中身を表示してくれます。
変数の中身を随時確認したいときに便利です。
いちいちマウスオーバーしてられませんもんね。
これがとても便利！というかJavaScriptの開発には不可欠な機能です。
大きく分けて3つのパネルに分かれます。
1番が実際のソースコード。
2番がブレークポイントやコールスタック。
3番が監視している変数。
まず1番目。
「Sources」タブを開き、JavaScriptを表示させます。
行番号のところをクリックすると、ブレークポイントの作成ができます。
処理がブレークポイントに辿り着くと、一時的に処理が止まります。
その時点での変数の中身をマウスオーバーで確認できます。
functionの戻り値を知りたい場合は、その部分を選択すると表示されます。
実際の処理を追いかけるときに便利です。
次はこちら。デバッグ中のブレークポイントを一覧で確認できます。
個人的に好きなのが「Call Stack」。
たとえば、デバッグ中にあるfunction内で処理を止めたとします。
「Call Stack」では、今どのfunctionから呼ばれているのかが把握できます。
ソースコードを追うときに非常に役立ちます。
「Watch Expressions」では、監視したい変数を自分で指定できます。
変数名をいれるだけで、現在の変数の中身を表示してくれます。
変数の中身を随時確認したいときに便利です。
いちいちマウスオーバーしてられませんもんね。
9．コンソールでJavaScriptを実行
これはご存知の方も多いのでは。
「Console」タブには、JavaScriptの警告やエラーが表示されますが、
JavaScriptを直接書いて実行することもできます。
DOMをJavaScriptで操作する際に使えます。
「Console」タブには、JavaScriptの警告やエラーが表示されますが、
JavaScriptを直接書いて実行することもできます。
DOMをJavaScriptで操作する際に使えます。
10．JavaScriptのパフォーマンスチェック
最後は、あまり使ったことがないですが、知っておくと便利かなと思ったので紹介します。
「Profile」タブ→「Collect JavaScript CPU Profile」からCPUへの負荷を計測できます。
「Start」を押してから「Stop」するまで記録してくれます。
こういう風な結果になりました。
ページ読み込み時に、極端に処理が重たくなるなぁといったときに、
どのJavaScriptが影響しているかを確認できそうですね。
パフォーマンスの確認をしたいときにどうぞ。
他にも便利な機能が盛りだくさんのデベロッパーツール。
昔はFirebug使ってましたが、
Chromeのデベロッパーツールの方がサクサクしてるのでおすすめです。
「Profile」タブ→「Collect JavaScript CPU Profile」からCPUへの負荷を計測できます。
「Start」を押してから「Stop」するまで記録してくれます。
こういう風な結果になりました。
ページ読み込み時に、極端に処理が重たくなるなぁといったときに、
どのJavaScriptが影響しているかを確認できそうですね。
パフォーマンスの確認をしたいときにどうぞ。
他にも便利な機能が盛りだくさんのデベロッパーツール。
昔はFirebug使ってましたが、
Chromeのデベロッパーツールの方がサクサクしてるのでおすすめです。
本記事で紹介したサイト
この記事をみた人はこんな記事も見ています
前後の記事もどうぞ
この記事をブックマーク/共有する
トラックバックURL
このブログを購読しますか？
FeedlyなどのRSSリーダーを使うと、このブログの更新情報をいち早くキャッチできます。このブログのRSS（http://20kaido.com/index.rdf）を登録すれば、更新されるたびに概要（記事タイトル・冒頭）が手に入ります。
また、Twitterによる更新情報の配信もおこなっております。
@20kaido をフォローしていただければ最新の情報をお届けします。
さらに、Facebookでも更新情報を流しています。ファンページがありますので、「いいね！」するだけで購読できますよ！
また、Twitterによる更新情報の配信もおこなっております。
@20kaido をフォローしていただければ最新の情報をお届けします。
さらに、Facebookでも更新情報を流しています。ファンページがありますので、「いいね！」するだけで購読できますよ！
管理人へ連絡する・メール
[email protected]
・Twitter
@kamekiti
・お問い合わせフォーム
http://ws.formzu.net/fgen/S70651833/
何か気になることがありましたら、お気軽にご連絡ください。
[email protected]
@kamekiti
・お問い合わせフォーム
http://ws.formzu.net/fgen/S70651833/
何か気になることがありましたら、お気軽にご連絡ください。
記事公開日：2014年01月31日 コメント（3）
Twitterの声
はてなブックマークの声
Facebookの声
この記事についたコメント
コメントする
完全にオリジナルの記事ですが、どの点が盗用していますか？
教えてください。
最近の子にそれ言っても無駄。