HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > Google Chrome デベロッパーツールのテクニック集
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
ブラウザ

Google Chrome デベロッパーツールのテクニック集

ブラウザ2016.10.24

Google Chromeのデベロッパーツール(=chrome devtools)の使いそうな機能についてまとめました。

デベロッパーツールはWEB制作者にとって役に立つ機能が詰まっているのでぜひマスターしたいところです。

今回の記事ではWindows版のChromeをもとにしているので、Mac版のChromeとはショートカットキーなど誤差があります。

要素の色を調べる

developer-img06

スタイルパネルの右下に出てくるアイコンをクリックすると、

カーソルがスコープっぽくなって色を調べられます。

Hover状態で適用されるCSSを固定する

エレメントパネルで右クリックしてメニューを表示させます。

そして [:hover] を選択するとDOMの左側にオレンジのアイコンが追加され、hover時のCSSが適用されます。

この方法はjQueryなどのjsによるhoverイベントには効きません。

DOMエレメントをHTMLとして編集する

エレメントパネルの要素の上で [F2] を押します。

要素を非表示にする

エレメントパネルの要素の上で [Backspace] や [Delete] を押すと削除ですが、[H] を押すと要素が非表示になります。

キーボードで値を上下させるショートカット

キーを組み合わせることで上下する値を変化させることが出来ます。

キー入力の代わりにスクロールホイールでもOKです。

[↑][↓] 値を1変更
[Alt] + [↑][↓] 値を0.1変更
[Shift] + [↑][↓] 値を10変更
[Ctrl] + [↑][↓] 値を100変更

デベロッパーツールのテーマを黒にする

developer-img07

[F1] で Settingsを表示します。

[Preferences] > [Appearance] > [Theme] を [Dark] に変更します。

developer-img08

デバイスモードで表示

developer-img09

[Ctrl] + [Shift] + [M] でデバイスモードになり、ブラウザがモバイル端末っぽくなります。

画面上部のセレクトボックスをiPhone6にするとiPhone6の幅になります。

デバイスモードで選べる端末を増やす

デベロッパーツール上で [F1] を押します。

設定画面になるので左メニューから [Devices] を選択します。

developer-img10

ここでチェックをつけるとデバイス選択項目に追加されます。

新規追加したい場合は [Add Custom Device…] ボタンからデバイス名とモニターサイズを設定します。

3G回線でエミュレートする

developer-img11

[Network] タブにして、[No throttling]をクリックすると様々なネットワーク環境でテスト出来ます。

カッコの中の数字は左からそれぞれ Latency(待ち時間) Download Upload を表しています。

[Disable Cache] にチェックを入れるとキャッシュを使わない状態でのテストができます。

[Offline] にチェックを入れるとオフラインになります。

左端にあるビデオカメラアイコンをオンにしてページリロードすると、ページ読み込み完了までのスクリーンショットが記録されます。

developer-img20

難読化されたCSSやJSを整形する

developer-img13

CSSやJSファイルを圧縮してて人間が読めないようになっていても、

デベロッパーツールの機能で読みやすく整形できます。

ソースパネルの左下にある {} というアイコンをクリックすると、

インデントや改行が整った人間が読めるコードに整形されます。

クイックオープン

developer-img12

どのタブでもいいので [Ctrl] + [O] 又は [Ctrl] + [P] でクイックオープンウインドウが出ます。

ソース全体から検索

developer-img14

デベロッパーツール上で [Ctrl] + [F] を押すとひとつのファイルを検索しますが、

[Ctrl] + [Shift] + [F] を押すとページが読み込んだソース全体から検索できます。

consoleオブジェクトを使い分ける

console.log() というのは、引数を配列や変数の中身をデベロッパーツールに表示するメソッドです。

デベロッパーツールのconsole上で直接入力しても値を返します。

console.log() は万能に使えるので、それしか使ってないというエンジニアもいるかもしれませんが、

配列をテーブルにして表示するconsole.table() など、場合によってはconsole.log() よりも見やすく表示できるので、うまく使い分けしたいところです。

console.log() と console.table() の表示の違い

var array = [
	{
		a: "aaa",
		i: "iii",
		u: "uuu",
		e: "eee",
	},
	{
		a: "aaa",
		i: "iii",
		u: "uuu",
		e: "eee",
	},
];

という配列をconsoleで表示します。

developer-img15

使いそうなconsoleメソッド

メソッド 説明
console.assert() 第1引数がfalseなら第2引数を表示
console.count() このオブジェクトが呼び出された回数を記録
console.dir() DOM要素などをリスト形式で表示
console.error() エラー文っぽく表示
console.table() 配列をテーブル形式で表示
console.warn() 警告文っぽく表示

参照:console – Web API インターフェイス | MDN

console.log() を独自のスタイルで表示する

console.log("%cテキストテキスト",'font-weight: bold; color: red');

第1引数の先頭に”%c”をつけます。%cよりも後の文字列にスタイルが適用されます。

第2引数にスタイルを指定します。

developer-img19

CSSのanimateプロパティのデバッグ

スタイルパネルのAnimationsアイコンをクリックするか、Consoleパネルのメニューから [Animations] タブを表示します。

developer-img21

developer-img16

Animationsパネルではページで読み込まれたCSSのanimateプロパティをタイムライン形式で保存します。

検出されたanimateは個別に挙動を確認できます。

試験運用版機能を使う

※試験運用版機能は正式にリリースされていないテスト機能です。扱いは自己責任でお願いします。

まずChromeの試験運用機能一覧ページ(chrome://flags/)を表示します。

developer-img17

どこかに『デベロッパー ツールの試験運用版機能』という項目があるので、[有効にする] をクリックします。

するとデベロッパーツールの [Settings] の左メニューに [Experiments] が追加されています。

developer-img18

試験運用版機能を使うにはここで個別に設定します。

例えば、上から2番めの [Allow custom UI themes] を有効にすると、デベロッパーツールのテーマを変更する拡張機能が使えるようになります。

HTTPレスポンスヘッダを確認

[Network]タブのソース一覧からどれか適当に選ぶと右側にパネルが表示されます。

[Headers] > [Response Headers] がHTTPレスポンスヘッダの詳細です。

PHPのバージョンやサーバーの種類などが含まれています。

これらの情報はサーバーの設定で隠蔽することが出来ます。 参照サイト

スニペットを登録

[Sources]タブの [Snipets] ではユーザーが独自にそのページで実行するJSを置いておけます。

実行する場合はファイル右クリックから [Run] を選択します。

DevTools Snippets

このサイトではSnipetsとして登録できるコードを載せています。

developer-img01

画像のData URIを取得する

画像のソース上で右クリックし、[Open link in Resources panel] をクリックし、

[Applications]タブ上で画像を表示します。

その画像上でまた右クリックし、[Copy image as Data URI] でクリップボードにData URIがコピーされます。

developer-img22

Chromeが独自に定義した要素を選択可能にする

developer-img23

developer-img02

例えばinputのレンジ入力の要素は、レンジのつまみが選択できません。

[F1] でSettingsを開き、[Preferences] > [Elements] > [Show user agent shadow DOM]にチェックを入れると、レンジのつまみが選択できるようになります。

developer-img24

developer-img03

この場合、

::-webkit-slider-thumb {
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
}

などでレンジのスタイルを変更できます。

スタイルをコピペしたときのインデントの種類を変える

デベロッパーツールからスタイルをコピペしたときにインデントの種類を揃えるのは手間なので、

[Settings] > [Preferences] > [Sources] の『Default indentation』からインデントの種類を設定します。

2spaces スペース x 2
4spaces スペース x 4
8spaces スペース x 8
Tab character タブ

デベロッパーツールを開いている間はキャッシュを無効化する

[Settings] > [Preferences] > [Network] の『Disable cache (while DevTools is open)』

デベロッパーツールを開いている間はキャッシュが無効になります。

ショートカットを見る

developer-img04

[Settings] > [Shortcuts] からショートカット一覧を確認できます。(クリックで大きい画像)

まとめ

今回の記事ではGoogle Chromeのデベロッパーツールの機能についてまとめました。

ちなみにChromeの最新機能が先行して使えるブラウザ『Google Chrome Canary』は、デベロッパーツールが通常のGoogle Chromeと違っています。

Settingsの項目が違ったりしていて、未来をちょっと先取りできます。

動作確認は通常のChromeでやったほうがいいですけど。

この記事は公開から 415 日経っているため、情報が古くなっている可能性があります。

PAGE TOP