意外と知らないかも? Chrome DevTools の機能10選
- UI/UX, 開発ツール Javascript, 小ネタ, 開発
みんな使っている Chrome DevTools。
Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。
ここでは、その中から10個とりあげてみます。
Chrome DevTools の画面の開き方など基本的なことには触れないので 参考情報 を見てください。
1. Cookieの表示・削除、JavaScript・Flashなどの有効・無効の切替
まずは DevTools を使わなくてもできることから。
Cookie を確認したり、noscript タグの表示を確認するのに、いちいち設定画面を開いていませんでしたか?(自分もそうでした…)
URL の隣にある (i) や [保護された通信] をクリックすると出てくるメニューを使うと簡単に確認や設定変更ができます。他にもいろいろと設定は変えられるので、画像を OFF にしてテキストブラウザの気分を味わうこともできますね!
2. 隠し設定の変更・隠し機能の表示
こちらも DevTools ではありませんが、URL に chrome://flags と入力すると隠し設定が変更できるようになっています。
Chromium Projects や WICG/interventions などで議論されている将来の機能追加や仕様変更をいち早く試すことができたりしますが、設定を変更して遊んだ後は [すべてデフォルトに戻す] ボタンを押すのを忘れずに。そうしないと「なぜか自分の Chrome だとサイトがきちんと表示されない」という事態が発生します…
Chrome で使える特別な URL は他にもたくさんあり、URL に chrome://chrome-urls と入力すると一覧を見ることができます。
3. 表示に使われているHTMLを確認する・HTMLの表示場所を確認する
これはよく知られている機能です。
DevTools の [Elements] を開いた状態で左上の矢印をクリックすると、サイトの表示が HTML のどの Element に対応するのか、Element がサイト上のどこに表示されるのか確認できます。
ここで Tips を1つ。右側で選択した Element が左側のページ表示で見切れているときは、右クリックして [Scroll into View] を選ぶと、表示するまでスクロールします。
4. コンソールを使って JavaScript の変数確認
[Console] では JavaScript の変数値を確認することができます。ここではカーソルのある Element 上での実行結果が表示されるため、iframe 内部の変数の確認もできます。
また、コマンドライン API リファレンス にあるように、コンソールにはいろいろと便利な関数が用意されていて、セレクターで要素を選択したり、データを表形式で表示する、といったこともできます。
5. 圧縮されている JavaScript を整形してデバッグ
本番環境でしか起こらない問題を調べようとしたら、JavaScript が圧縮(minify)されていた…ってこと、ありますよね。
[Sources] で {} のボタンを押すと圧縮を解除できます。圧縮を解除した状態で、ブレークポイントを置いてデバッグすることもできます。
6. DOM が変更されたタイミングでブレークポイント
他の人から引き継いだコードだと「HTML のこの部分をどの JavaScript が更新しているかわからない」ことってありますよね。
DOMブレークポイントを使えば見つけられます。[Elements] の画面では変更された部分の色が変わるので、ブレークポイントを置きたい Element にカーソルを置いて右クリックから [Break on…] で表示される [subtree modifications] [attribute modifications] [node removal] のどれかを選択。次に変更されたタイミングでデバッグ画面になります。
7. リダイレクトしてもログが残るようにする
ネットワークの調査をしているときに、リダイレクトやページ移動する前のログを見たいことってありますよね。[Network] で [Preserve log] にチェックを入れるとページ移動する前のネットワークログが残るようになります。
8. ネットワーク帯域幅制御や User Agent の変更
[Network conditions] では、帯域幅やキャッシュの有効・無効、User Agent の変更ができます。User Agent は [device toolbar] でも変更できますが、こちらの方が選択肢が多く Windows の Edge や IE、Opera も選択できるようになっています。
また、完全に表示されるまでの表示途中のスクリーンショットを連続して撮ることもできます。
9. 全ファイルを検索
[Search] では、サイトで使われている全ファイルを検索ができます。正規表現での検索や大文字・小文字の区別もできます。
10. スマホ・タブレットの枠付きでスクリーンショットを撮る
上司から「スライドのここにスマホとタブレットの絵を入れといて!」って言われた人、スマホやタブレットの枠を自分で作っていませんか?
[Show device frame] でデバイスの枠を表示させて [Capture screenshot] で枠付きの画像を保存できます。資料作成が楽になりますね!
参考情報
- 公式リファレンス
- Chrome Devtools for beginners (v1.1)
- Chrome Developer Toolsを使いこなそう!
- Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
- WEB+DB PRESS Vol.89
- 開発者のためのChromeガイドブック (Google Expert Series)
- Google Chrome HACK

関連記事
-
-
【小ネタ】タスク管理ツール移行: Trello から Asana
プロジェクトチームのタスク管理ツールを Trello から Asana に変えることになり、 タスクの移行が意外と簡単にできた、というお話です。 Trello と Asana もともと使っていたのは Trello(トレロ)です。 プロジェクト > タスクグループ > タスク …
-
-
Selenium × PHP でテスト自動化!【環境構築編】
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …
-
-
自社サービスのDocker化(後編)
こんにちは。 インフラ開発部の上田です。 前回、前編としてDockerについて書き、早半年も経ちました。 前編はこちらです 今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動 前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …
-
-
ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編
はじめに Single Page Application (SPA)って知っていますか? Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。 こういったサイトの作り方を Single Page A …
-
-
SafeFrameでリッチ広告をセキュアに実現
アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …
-
-
Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する
はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …
-
-
Charlesを使ってスマホアプリ(iOS)のUAを調べてみた
はじめに ここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …
-
-
Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …
-
-
ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編
前回までのおさらいと今回やること 前々回(はじめてのアプリ編)と前回(デプロイ・公開編)で、作成した Angular のチャットアプリを Web に公開するところまでいきました。 でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。 今回は GitHub でソースコードを管理して、 …
-
-
kubernetes の全ノード上で同じコンテナを動かす
今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。 はじめに 以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …