ツール・サイト紹介
ニュース/2ちゃんねる

今週の人気記事

Web開発に必携の「Google Chrome デベロッパーツール」の便利ワザ10個まとめ

あとで読む Clip to Evernote このエントリーをはてなブックマークに追加
Google Chrome
Google Chrome

Chromeのデベロッパーツールの便利技


Google Chromeデベロッパーツールの便利な使い方を紹介します。

デベロッパーツールはGoogle Chromeに標準搭載されているWebインスペクタです。
JavaScriptのデバッグやCSSでのデザイン調整などをする際に便利!

日頃よく使う機能などを10個にまとめました。


1.デベロッパーツールのウィンドウ位置の変更


まず、デベロッパーツールの起動ですが、Chromeの「ツール」→「デベロッパーツール」から行えます。
Windowsなら「Ctrl + Shift + I」、Macなら「Command + alt + I」のショートカットでもOK。


Google Chrome

起動すると、このように画面下部に登場します。


Google Chrome

この画面切り替えっぽいアイコンをクリックしてみます。
すると、デベロッパーツールがChromeから切り離されたり、
下記のように右側に配置させることができます。



Google Chrome

たとえば、スマートフォン用のページを見るときは、右側に置いている方が使いやすいです。
用途によってデベロッパーツールの配置が変えられるは便利ですね。


2.虫眼鏡で要素の選択


基本的な使い方のひとつですが、ウェブページの一部分を選択して該当するHTMLの要素を見つけられます。


Google Chrome

この虫眼鏡マーク。一度クリックすると、虫眼鏡が青色になって有効になります。
その状態で、閲覧しているページの要素を選択しましょう。

すると、選択した要素のHTMLがデベロッパーツール表示されます。

実際のウェブページから目的のHTMLを瞬時に探し出せるのでぜひ使ってみてください。


3.ファイルの横断検索


ウェブページに読み込まれている、HTML, CSS, JavaScriptを横断検索できます。
横断検索はWindowsなら「Ctrl + Shift + F」、Macなら「Command + alt + F」です。


Google Chrome

この技は覚えておくと非常に重宝します。
HTMLのID名やJavaScriptの変数名やfunction名で検索すると捗ります。


4.スタイルシートの有効/無効、追加/編集


デベロッパーツールでは、その場でCSSの編集ができます。


Google Chrome

HTMLの要素を選択すると、「Styles」タブにCSSが表示されます。
選択した要素に適用されているスタイルのみ表示されますよ。

その場で色を変更したり、不要なCSSを無効にすることも可能。
CSSの行末「;」の後ろ辺りでポチポチしてると、新しくスタイルを追加できます。


5.スマートフォンページの動作確認


ユーザエージェントを偽装してタッチイベントを有効にすることで、
スマートフォン用ページの動作確認ができます。



Google Chrome

トグルマークから設定画面を開きます。


Google Chrome

Overrides」の「Show 'Emulation' view in console drawer」にチェックを入れましょう。
(最近このあたりの仕様ががらっと変わりましたよね。分かりづらい…。)


Google Chrome

>≡」こういうマークをクリックすると、下部からにゅっとメニューが表示されます。
(もしくは、ElementsタブでEscキーを押しても出ます)

Emulation」タブの「User Agent」からユーザエージェントが変更できます。
「iPhone - iOS6」などスマートフォンを選んでおきます。


Google Chrome

Sensors」の「Emulate touch screen」にチェックを入れておくと、
マウスが●←こういうのになって、タッチイベントが拾えます。

スマートフォンページの確認に便利な設定です。


6.読み込まれている外部ファイルを一覧表示


スタイルシートやJavaScriptなど読み込まれている外部ファイルを一覧で表示できます。


Google Chrome

Resources」タブで一覧表示できます。

Cookies」の項目から、Cookieを個別に削除することもできますよ。
Cookieによる動作を確認したいときに役立ちます。


7.圧縮されたソースコードを整形


JavaScriptのライブラリなどによく見られる圧縮されたコードを整形してくれます。


Google Chrome

このように改行が全部なくなって、
変数もa,b,cのような意味のない文字に変換された難読化されたコードを見やすくできます。


Google Chrome

Sources」タブでJavaScriptを開き、下部にある「{ }」を有効にすると整形されます。
改行がある程度復元できるので、ライブラリ内をデバッグする際にぜひ。


8.JavaScriptをデバッグする


JavaScriptをデバッグできます。
これがとても便利!というかJavaScriptの開発には不可欠な機能です。


Google Chrome

大きく分けて3つのパネルに分かれます。

1番が実際のソースコード。
2番がブレークポイントやコールスタック。
3番が監視している変数。


Google Chrome

まず1番目。
Sources」タブを開き、JavaScriptを表示させます。

行番号のところをクリックすると、ブレークポイントの作成ができます。
処理がブレークポイントに辿り着くと、一時的に処理が止まります。

その時点での変数の中身をマウスオーバーで確認できます。
functionの戻り値を知りたい場合は、その部分を選択すると表示されます。

実際の処理を追いかけるときに便利です。


Google Chrome

次はこちら。デバッグ中のブレークポイントを一覧で確認できます。

個人的に好きなのが「Call Stack」。
たとえば、デバッグ中にあるfunction内で処理を止めたとします。
「Call Stack」では、今どのfunctionから呼ばれているのかが把握できます。

ソースコードを追うときに非常に役立ちます。


Google Chrome

Watch Expressions」では、監視したい変数を自分で指定できます。
変数名をいれるだけで、現在の変数の中身を表示してくれます。

変数の中身を随時確認したいときに便利です。
いちいちマウスオーバーしてられませんもんね。


9.コンソールでJavaScriptを実行


これはご存知の方も多いのでは。


Google Chrome

Console」タブには、JavaScriptの警告やエラーが表示されますが、
JavaScriptを直接書いて実行することもできます。

DOMをJavaScriptで操作する際に使えます。


10.JavaScriptのパフォーマンスチェック


最後は、あまり使ったことがないですが、知っておくと便利かなと思ったので紹介します。


Google Chrome

Profile」タブ→「Collect JavaScript CPU Profile」からCPUへの負荷を計測できます。
Start」を押してから「Stop」するまで記録してくれます。


Google Chrome

こういう風な結果になりました。
ページ読み込み時に、極端に処理が重たくなるなぁといったときに、
どのJavaScriptが影響しているかを確認できそうですね。


パフォーマンスの確認をしたいときにどうぞ。


他にも便利な機能が盛りだくさんのデベロッパーツール。
昔はFirebug使ってましたが、
Chromeのデベロッパーツールの方がサクサクしてるのでおすすめです。
 本記事で紹介したサイト
Google Chrome
http://www.google.co.jp/intl/ja/chrome/browser/
あとで読む Clip to Evernote このエントリーをはてなブックマークに追加
Related Posts Plugin for WordPress, Blogger...

 この記事をみた人はこんな記事も見ています

 前後の記事もどうぞ

 この記事をブックマーク/共有する

 トラックバックURL

http://trackback.blogsys.jp/livedoor/kamekiti1115/7524821
Twitterの声
はてなブックマークの声
Facebookの声
この記事についたコメント
1.通りすがりさん2014年02月01日 14:35
記事ぱくってんじゃねーよ
2.カメきち@管理人2014年02月01日 16:18
1さん
完全にオリジナルの記事ですが、どの点が盗用していますか?
教えてください。
3.通りすがりさん2014年04月16日 18:52
>1
最近の子にそれ言っても無駄。

コメントする
お名前
二十歳街道まっしぐら 2nd @カメきち 2010.10.01-