意外と知らないかも？ Chrome DevTools の機能10選

2017/05/23 - UI/UX, 開発ツール Javascript, 小ネタ, 開発

みんな使っている Chrome DevTools。
Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。

ここでは、その中から10個とりあげてみます。
Chrome DevTools の画面の開き方など基本的なことには触れないので参考情報を見てください。

1. Cookieの表示・削除、JavaScript・Flashなどの有効・無効の切替

まずは DevTools を使わなくてもできることから。
Cookie を確認したり、noscript タグの表示を確認するのに、いちいち設定画面を開いていませんでしたか？（自分もそうでした…）
URL の隣にある (i) や [保護された通信] をクリックすると出てくるメニューを使うと簡単に確認や設定変更ができます。他にもいろいろと設定は変えられるので、画像を OFF にしてテキストブラウザの気分を味わうこともできますね！

Cookie の表示・削除、JavaScript・Flash などの有効・無効の切替

2. 隠し設定の変更・隠し機能の表示

こちらも DevTools ではありませんが、URL に chrome://flags と入力すると隠し設定が変更できるようになっています。
Chromium Projects や WICG/interventions などで議論されている将来の機能追加や仕様変更をいち早く試すことができたりしますが、設定を変更して遊んだ後は [すべてデフォルトに戻す] ボタンを押すのを忘れずに。そうしないと「なぜか自分の Chrome だとサイトがきちんと表示されない」という事態が発生します…

chrome://flags

Chrome で使える特別な URL は他にもたくさんあり、URL に chrome://chrome-urls と入力すると一覧を見ることができます。

chrome://chrome-urls

3. 表示に使われているHTMLを確認する・HTMLの表示場所を確認する

これはよく知られている機能です。
DevTools の [Elements] を開いた状態で左上の矢印をクリックすると、サイトの表示が HTML のどの Element に対応するのか、Element がサイト上のどこに表示されるのか確認できます。
ここで Tips を1つ。右側で選択した Element が左側のページ表示で見切れているときは、右クリックして [Scroll into View] を選ぶと、表示するまでスクロールします。

表示に使われているHTMLを確認する・HTMLの表示場所を確認する

4. コンソールを使って JavaScript の変数確認

[Console] では JavaScript の変数値を確認することができます。ここではカーソルのある Element 上での実行結果が表示されるため、iframe 内部の変数の確認もできます。
また、コマンドライン API リファレンスにあるように、コンソールにはいろいろと便利な関数が用意されていて、セレクターで要素を選択したり、データを表形式で表示する、といったこともできます。

コンソールを使って JavaScript の変数確認

5. 圧縮されている JavaScript を整形してデバッグ

本番環境でしか起こらない問題を調べようとしたら、JavaScript が圧縮（minify）されていた…ってこと、ありますよね。
[Sources] で {} のボタンを押すと圧縮を解除できます。圧縮を解除した状態で、ブレークポイントを置いてデバッグすることもできます。

圧縮されている JavaScript を整形してデバッグ

6. DOM が変更されたタイミングでブレークポイント

他の人から引き継いだコードだと「HTML のこの部分をどの JavaScript が更新しているかわからない」ことってありますよね。
DOMブレークポイントを使えば見つけられます。[Elements] の画面では変更された部分の色が変わるので、ブレークポイントを置きたい Element にカーソルを置いて右クリックから [Break on…] で表示される [subtree modifications] [attribute modifications] [node removal] のどれかを選択。次に変更されたタイミングでデバッグ画面になります。

DOMが変更されたタイミングでブレークポイント

7. リダイレクトしてもログが残るようにする

ネットワークの調査をしているときに、リダイレクトやページ移動する前のログを見たいことってありますよね。[Network] で [Preserve log] にチェックを入れるとページ移動する前のネットワークログが残るようになります。

リダイレクトしてもログが残るようにする

8. ネットワーク帯域幅制御や User Agent の変更

[Network conditions] では、帯域幅やキャッシュの有効・無効、User Agent の変更ができます。User Agent は [device toolbar] でも変更できますが、こちらの方が選択肢が多く Windows の Edge や IE、Opera も選択できるようになっています。
また、完全に表示されるまでの表示途中のスクリーンショットを連続して撮ることもできます。

ネットワーク帯域幅制御や User Agent の変更

9. 全ファイルを検索

[Search] では、サイトで使われている全ファイルを検索ができます。正規表現での検索や大文字・小文字の区別もできます。

全ファイルを検索

10. スマホ・タブレットの枠付きでスクリーンショットを撮る

上司から「スライドのここにスマホとタブレットの絵を入れといて！」って言われた人、スマホやタブレットの枠を自分で作っていませんか？
[Show device frame] でデバイスの枠を表示させて [Capture screenshot] で枠付きの画像を保存できます。資料作成が楽になりますね！

スマホ・タブレットの枠付きでスクリーンショットを撮る

参考情報

: Vagrantの機能を使って開発環境の効率をあげてみた。

プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。保守の仕事に関わると、ユーザからのお問い合わせだったり、監視アラートによる検知からシステムを調査することがあります。ログとソースコードを見て、不具合を特定し改修する。すぐできればカッコいいですが、「本番環境に反映して別のエ …

: x-callback-urlを使ってみた

x-callback-urlとは？ iOSのアプリ間連携の仕様の一つみたいです。簡単に言うと、ディープリンクを行うためにカスタムURLスキームを利用するが、アプリ毎にバラバラな規則でURLスキームを設定するとアプリ間連携をスムーズに行うことができないため、どのような規則でURLスキームを設定するかを …

: ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編

前回のおさらいと今回やること前回（はじめてのアプリ編）では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。（主なディレクトリとファイルのみ抜粋） + dist （ビルド・コンパイル後のファイルのディ …

: kubernetes の全ノード上で同じコンテナを動かす

今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。はじめに以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …

: MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介！

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか？わた …

: いまさらですが… GNU screen チートシート

最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。参照サイト GNU screen [quick_reference] 起動コマンド動作 screen -S &l …

: Scala入門準備編「開発環境構築」 – PHP使いからScala使いへ転身！

はじめにみなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

: クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。そこで問題になるのが、障害などによる深夜対応・・・。データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に電話連絡をもらっていたのですが、クラウド環境では …

: modern.IEを使ってMac上でWindows10を動かす

Microsoftが提供している modern.IE というプロジェクトがある。そこで提供されている仮想環境を使って、MacにWindows10をインストールしてみる。ちなみに、このプロジェクトの本来の目的はInternet Explorerの表示確認やデバッグの支援。 VirtualBoxの準備 …

: ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

はじめに Single Page Application （SPA）って知っていますか？ Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。こういったサイトの作り方を Single Page A …

PREV: fastavroとjqでAVRO形式のファイルからデータを取得しよう
NEXT: AWSにRailsアプリをデプロイする(準備編)