デベロッパーツール。 Chromeのデベロッパーツール(検証機能)の使い方!開発者モードで編集!

Chrome デベロッパーツールの Console を使いこなす

デベロッパーツール

「思い通りにコードが動かない。 みんなどう解決しているの? 」 「思い通りのデザインにならず、時間だけが過ぎていく。 」 誰もが一度はこう思ったことがあるはずです。 思い通りの挙動にならないことが当たり前の世界とは知りつつも、エラーの原因解明と解決に必要以上に時間がかかり、イライラしてしまうこともあるでしょう。 そんな時に、知っておけば問題解決の時間を短縮できる「ディベロッパーツール」はフロントエンドのエンジニアにとって必要不可欠なものです。 今回は、特に、HTMLのコーディングに特化して説明します。 フロントエンジニアとして一歩を踏み出した人が知っておくと便利な機能を中心に紹介します。 もちろん経験者は必要に応じて読み飛ばしてください。 この記事の内容• Chromeの検証 デベロッパーツール とは? では、「Chrome DevTools は、Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです」とあります。 「デバッグ」とは、「プログラムの誤り(バグ)を見つけ、それを直すこと」です。 バグは必ずといっていいほど発生するため、これに対処するかを知ることは初学者にとっての基礎知識の一つです。 予期せぬ挙動は常に起きる エディタで想定したデザインと実際に表示されたデザインが違っていることは日常茶飯事です。 これに慌てたり、自分に才能がないと諦めるよりも、むしろこれに慣れ、積極的に問題解決法に取り組むことが上達の近道です。 経験あるエンジニアは、自分なりに解決方法を記録したり、参考URLをリスト化したりなどして、いち早く解決に結び付ける問題解決能力を持っています。 このような自己サポートスキルも同時に養っていきましょう。 QAサイトやgoogleに解決を求めることも手段ですが、それはまず独力での解決を試してみてからの次善策です。 この検証ツールをいつ使うか? 問題が起きた時、あるいは、正式にコーディングする前にアイデアベースでコードを試す時など、検証ツールは威力を発揮します。 従って、「常に使う」ということになるでしょう。 問題のある、なしにかかわらず、コードを試したい、挙動を確認したい、という時でさえ、使います。 とるべき幾つかの選択肢があれば、それを試してその中から一つを選ぶというのは当然です。 その際、わざわざエディタに書いたり消したりするは非常に手間です。 どの手間を最大限省き、簡単にコードの挙動確認ができるのが大きな特徴です。 経験者でさえデベロッパーツールなしにコードはかけません。 コードを書き始めたばかりの人であれば、なおさら常に確認する癖をつけてください。 Chromeの検証 デベロッパツール でできること ディベロッパーツールでできることは多岐にわたると言いましたが、代表的なツールを幾つか紹介します。 表示のテスト エディタの表記を変えずに、ディベロッパーツールの中で表記を変えることができます。 もしそれが良いと判断すれば実際にエディタの表記を変えれば良いのです。 例えば、以下の画像があります。 タイトルの「【HTML】google chrome ディベロッパーツールの使い方」を「【HTML】タグの使い方」に変更したいとします。 その場合は、ディベロッパーツールを開き、その中の該当コードを選択します。 そのコードを直接「【HTML】タグの使い方」に変えてみましょう。 結果、表示が変わります。 「更新」を押すと元に戻ります。 このように、表示をテストできる機能が備わっています。 問題コードの確認 問題となった箇所にカーソルを当て、そこでディベロッパーツールを使うことで、該当コードのHTMLとCSSが一気に表示されます。 表示で言えば、CSSをテストすることが多いでしょうし、HTMLを新たに追加してみたい時にも使います。 Webサイトのコード確認 Webサイトを制作していると、気に入ったサイトのコードをみたい時があります。 特に、学習を始めたばかりの人は、経験者のコードから学ぶことは多いはずです。 そんな時に、そのコードをコピーすることもできます。 エラー発生原因の確認 「console」機能を使えば、どこで、どのようなエラーが発生しているのかを表示してくれます。 この「console」機能は、Jsを試したりする際にもよく使います。 便利なショートカット では、早速上記の実行方法を見ていきたいところですが、その前に、ディベロッパーツールの表示方法を確認しましょう。 これは是非とも覚えてもらいたい操作です。 慣れれば作業効率がアップします。 以下の表はMacユーザー向けのショートカットとなっています。 その中から「検証」の文字を見つけ、クリックしてください。 それで「ディベロッパーツール」が現れます。 しかし、色の変更は可能です。 例えば、背景色を黒にしたい時は「Dark」をクリックします。 結果、背景色が変化しました。 次に、現在パネルの表示はブラウザを上下に2分割しています。 これが使いづらい時があります。 その場合は、表示を左右2分割にします。 変えたい方向を選択し、表示の向きを変更します。 以下のように変更ができました。 CSSのデザイン変更 これは学習を始めたばかりの人も最も使う機能です。 デベロッパーツール上部のパネルの中から「elements」を選択してください。 すると、HTMLエリアとCSSエリアに別れたパネルが表示されます。 これが初期表示です。 デザインを変更する場合は、 デザインを変更する場合は、該当するHTMLコードをクリックします。 この時、要素は閉じています。 構造は何階層にもなっていることが一般的ですので、これをクリックしながら一つ一つ開いていくのは面倒です。 すると中の子要素が全て展開されます。 では、次に、任意にコードを選択してください。 その箇所は青くなり、右側にそれに影響を与えているCSSコードが表示されます。 特にCSSを制御する右側のパネルは知っておいた機能が多数ありますので、絞って説明します。 番号 説明 1 「Style」には、該当HTMLに対応するCSSコードが表示されます。 隣の「computed」は指定したCSSの一覧が表示されます。 2 「element. style」がありますが、そこに適用したいCSSコードを書いてください。 そのコードは試験的にデザインとして表示されます。 それを消したければ、「更新」を押せばリセットできます。 3 これは、既に適用されているCSSコードです。 もしこのデザインを変えたいのであれば、直接コードを変更してください。 「element. style」と同様、HTMLのデザインが変更されます。 ちなみに、時々、取り消し線を見る時があるかもしれません。 それは、そのCSSが「適用されていない」ということです。 これは、同じプロパティに対する指定が複数あるということです。 その場合、指定の優先順位が低いとコードが打ち消し線で消されます。 例えば、上記の画像の「font-family」プロパティは打ち消されていますがこれがその例です。 4 CSSコードがどのファイルから来ているのかを示しています。 上位に表示されているCSSコードが優先順位の高いコードですので、どのファイルの、どのCSSが効いているのかが分かれば、どこを修正すれば良いかがわかります。 5 「:hov」をクリックすると、要素がマウスオーバーされた状態になりますし、。 cls」をクリックすると、試験的にclassを追加することが出来ます。 実際に試してみましょう。 タイトルの色を変更しましょう。 「color: 3E3E3E;」を別の色である「color: F5A9BC;」に変更してみましょう。 確認すると、タイトルの色は「body」への指定から来ている事がわかりました。 style」で「color: F5A9BC;」に変更します。 この時には、HTMLパネルの該当する「h1」タグにカーソルを当てている状態です。 すると、表示が変わります。 もし、それを何度も切り替える時は、青のチェックボックを使ってください。 更に便利なデザイン変更機能があります。 colorの追加 色の選択がこのパネル上でできます。 text-shadowの追加 background-colorの追加 box-shadowの追加 マウスオーバー状態での変更機能 「:hov」を押してください。 すると、「擬似クラス」が表示されます。 一つを選択すると、擬似クラスが適用された状態を作れます。 新たなクラスを追加 「. cls」を押すと、新しくクラスを追加できます。 「Add new class」と書かれた箇所に、「sample-title」と入れてみます。 すると、自動的に「h1」タグのclassの中に「sample-title」が加わっている事がわかります。 問題コードの確認 問題コードが出てきた時、「問題箇所の特定」と「対処」が問題になります。 この場合の対応も基本的には上記のデザイン変更と変わりません。 問題箇所にカーソルを当て、ディベロッパーツールを開き、どのファイルのCSSコードがデザイン表示に影響しているのかを調べます。 よくあるケースとしては、「width」「padding」「margin」などの幅や距離の指定の調整、あるいは、一つのプロパティに複数の指定をしており、優先順位の問題で指示が効いていないことです。 幾つかの選択肢を試し、最終的には正式にCSSファイルにそれを反映させます。 ディベロッパーツールにもこの機能が備わっています。 この機能を使うには、左端から2つ目のマークをクリックします。 すると、以下のようにモバイルやタブレットに合わせた表示確認ができるようになります。 これが優れている点は、ディバイスごとの切り替えができることです。 つまり、適用するCSSをブレークポイントごとに切り替え表示で確認できます。 必要に応じて「ズーム」も使ってください。 最後に、ディバイスの種類を増やす事ができます。 「setting」をクリックし、以下の画面に行って操作します。 エラー発生原因の確認 「console」では、どこで、どんなエラーが発生しているのかを表示してくれます。 実務上は、これを元に原因のコードを確認したり、エラーの種類をgoogleで検索し、解決に結びつけることも多々あります。 このエラーですが、もちろんない事に越した事はありませんが、他のサイトを確認するとわかるように、出ている場合があります。 挙動に明らかに影響するのであれば原因を追求し、解決する必要があります。 しかし、できるだけ10個以内で収まるように正しいコードを書いてください。 まとめ この記事を読めば、いかにディベロッパーツールがサイトの制作に不可欠かが分かったと思います。 現実的には、使い方を最初に頭で理解するよりも、何度も制作を繰り返す中で自然と覚えていくものです。 ですが、最初にできる事の範囲と内容を押さえておくことで、作業効率が変わるはずです。 やみくもに検索し、解決を求めるよりも、ある程度ディベロッパーツールを使って、原因を特定してから、確認したほうが解決の速度が早まります。 ぜひ、積極的にディベロッパーツールを使うようにしてください。

次の

パソコンからインスタに投稿する簡単な方法【アプリ不要】

デベロッパーツール

そのIEにも、と同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。 そこで本稿では、強化された新機能を中心に、最新のF12開発者ツールの主要機能(具体的には下記の機能)を一通り解説する。 なお上記のアップデートでは、それぞれのアップデートのタイミングで、F12開発者ツールも更新されているが、本稿では、執筆時点の最新である2014年8月の更新(August Update)を使って紹介していく。 大幅に変更されたユーザーインターフェース F12開発者ツールは、その名の通り F12キーを押すか、メニューバーの[ツール]または右上にあるギアアイコンから[F12 開発者ツール]をクリックすることで起動できる(図1. 3 F12開発者ツールのウィンドウ• 1 [ドキュメント モード]ボタン: クリックすると、バージョンが表示されるので、ここでドキュメントモードを切り替える。 2 [コンソールの表示]ボタン: F12開発者ツールのウィンドウ下部にコンソールを表示する。 3 ツールの切り替えボタン(以下を参照) 1でドキュメントモードを切り替えられる。 ドキュメントモードとは、ブラウザーの描画エンジンのことで、最新を表す「Edge」や旧バージョンの「10」「9」「8」「7」「5」などから選択できる(詳細後述)。 互換性を重視するIE特有の機能だといえる。 2のボタンを押すことで、現在利用しているツールの下部に[コンソール]ツール(後述)を表示できる。 [コンソール]ツールは、よく使う機能なので、どのツールを使っているときでも組み合わせて表示できるようになっているというわけだ。 この下部表示だけでなく、F12開発者ツールの左端にある[コンソール]ボタンをクリックすることでウィンドウ全体に表示することもできる(図1. 左端に並んでいる 3のボタン群は、ツールを切り替えるためのものだ。 各ボタンの表記には、アイコンだけで名前がないので、最初は分かりにくいかもしれないが、上から順に[DOM Explorer]/[コンソール]/[デバッガー]/[ネットワーク]/[UI の応答]/[プロファイラー]/[メモリ]/[エミュレーション]ツールを表示するためのボタンになっている。 1 [DOM Explorer]ツール• A [要素の選択]ボタン。 B [DOM 要素の強調表示のオン/オフ]ボタン。 このボタンはトグルでオン/オフが切り替わる。 D 階層リンク(いわゆる「パンくず」)。 E 要素ウィンドウ。 F スタイルウィンドウ。 A要素の選択 [要素の選択]ボタンを押すと、IEのブラウザー上で要素を選択するモードになる。 そこでマウスカーソルを当てた箇所がハイライトされて選択できる(図2. この機能を使うと、HTMLソースの要素から掘り下げて探す必要がなくなり、調べたい箇所の要素にすぐに移動できる。 F12開発者ツールの中でもよく使う機能の1つで、例えば、想定外に表示が崩れてしまっている原因の調査や、どうやって実現しているのかを調べたい場合などに便利な機能である。 6 階層リンク(パンくず) 階層リンクには、タグが階層で表示されていて、選択されている要素の階層を確認できる。 このように選択されている要素が階層で表示されるため、「ある要素にスタイルを記述したい」と考えたときの階層の確認や、タグの閉じ忘れにより階層がずれたときに、ブラウザーでどのように解釈されているかを調べられる。 E要素ウィンドウ 要素ウィンドウには、現在表示しているページのHTMLソースがリアルタイムに表示されている。 例えばJavaScriptでスライダーをアニメーションさせているようなページでは、そのHTMLソースを見ることで座標が変わっていく様子を確認できる。 また、要素ウィンドウの便利な点は、HTMLソースを編集して(図2. 7)、その内容が反映されたWebページの表示内容をブラウザーで即座に確認できる点だ。 7 要素ウィンドウでテキストや属性を変更できる ここで変更した内容は即座にブラウザーで確認できる。 上の画像ではお勧め記事のタイトル部分(=HTMLのタグの外にあるテキスト部分)を直接「尾崎参上!」に変更し、下の画像ではそのclass属性(=HTMLのタグの中身)を変更しようとしている。 このようにテキストやHTMLタグ内のテキストや属性を変更して、それが反映されたページ表示内容を確認できる。 また、上の画像のように属性の変更時にはIntelliSense(=入力候補の一覧)が表示されて候補から選択することもできる。 これを使うことによって、例えば作成したHTMLページ上に長い文字列が入力されてもデザインが崩れないかを確認したり、他のCSSクラスを指定してみたらデザインがどのように変わるかを確認したり、ブラウザーで直接、変更内容を確認しながらデザインを決められる。 Fスタイルウィンドウ スタイルウィンドウも要素ウィンドウと同様に、現在表示されているページ上で選択されているタグに適用されているCSSスタイルを確認・編集できる。 ここには[スタイル]タブに加えて、いくつかのタブが表示されている。 まずは[スタイル]タブから順に、各タブの機能について見ていこう。 [スタイル]タブ 図2. 10 [属性]タブには要素に適用されているスタイルのみが表示される デフォルトでは明示的に指定された「ユーザースタイル」のみが表示されており、人型のアイコンをオフにすることで全てのスタイルを確認できる。 [属性]タブをアクティブにすると、要素に適用されているスタイルが表示される。 ここで、人型のアイコン(=ユーザースタイルのみを表示する機能)をクリックしてオフにすると、Webページ制作者が明示的に適用しているスタイルの他に、ブラウザーがデフォルトで持っており暗黙的に要素に適用されているスタイルも表示されるので、つまり全ての適用中のCSSスタイルを確認できる。 これにより、なぜ要素がそのスタイルで表示されているのか、その原因を見つけ出せるようになっている。 [レイアウト]タブ [レイアウト]タブは、選択されている要素の幅や高さ、要素の余白を確認できる機能である。 14 [スタイル]タブで変更内容を確認できる スタイルを変更した箇所の左端のバーに色分けして表示される。 このように[スタイル]タブでは、変更前の内容を見ることはできないが、追加されたスタイルは緑、変更されたスタイルはオレンジ、削除されたスタイルは赤のバーで、タブの左端に示される。 [コンソール]ツール [コンソール]は、エラーや情報などのログを表示、オブジェクトや要素の状態の確認と操作、JavaScriptコードを試しに実行してみるなど、さまざまなことができるツールである。 コンソールは非常に多くの機能を持っているため、ここではよく使う便利な機能に絞って説明していく。 まずは、ウィンドウ全体を見ていこう。 15 [コンソール]ツール• A F12開発者ツールの左端にある[コンソール]アイコンにはエラー数が表示される。 B 表示するメッセージのレベルを「エラー」「警告」「情報」の中から絞り込める。 C ページ遷移してもメッセージを残すかどうかを指定できる。 D 表示されているログをクリアする。 E ログのターゲットフレームを絞り込む。 例えばFacebookの[いいね]ボタンは、タグ(=インラインフレーム。 以下、IFrame)で実装されているので、ドロップダウンで絞り込み対象になる。 例えば Cをオフにすると、ページのリフレッシュや、他のページに遷移してもログを残せるようになる(図2. 16)。 17 [コンソール]でログを確認する 左の[コンソール]アイコンにエラー数が表示される。 ここで、[コンソール]をアクティブにするとエラー内容を確認できる。 ページの表示で、エラーがあった場合、コンソールにエラーログが出力される。 エラー内容に応じて、JavaScriptコードやHTMLソースを修正して、リリース時にはエラーが出力されない状態にするのが望ましい。 参考までに[コンソール]ウィンドウ最下部にある入力ウィンドウから「情報」(info)、「警告」(warn)、「エラー」(error)を表示してみよう。 18では「console. lo」と入力中だが、ここでconsole. info/console. warn/console. errorの各メソッドを使用すればよい(入力ウィンドウではJavaScriptコードを実行できる)。 18 コンソールに情報、警告、エラーを表示してみる このように、メッセージのレベルによってアイコンで区別できるようになっている。 Web開発時に状態を出力したり、情報をコンソールに出力したりする場合には、それぞれの情報レベルに応じて、console. info(情報)/console. warn(警告)/console. error(エラー)メソッドを呼び出せばよいわけだ。 また、入力ウィンドウへのJavaScriptコードの入力時には、IntelliSenseで入力補助が表示されていることが分かる(図2. 18)。 これのおかげでメソッドやオブジェクトを探すのが非常に楽になっている。 この入力ウィンドウは、サイズを広げて複数行入力可能にすることもできる(図2. 19)。 19 入力ウィンドウは、境界をマウスでドラッグすることで、幅を広げることができる 複数行入力の場合は、 Enterキーは改行のために使用されるため、入力したJavaScriptコードを実行するには、 Ctrl+ Enterキーを押すか、右下の再生ボタン( )をクリックする必要がある。 [コンソール]ウィンドウでは、現在表示しているページを直接操作できる。 そのため、「ページ内の要素を操作するJavaScriptコードをページに読み込ませよう」と考えている場合は、事前にコンソールで動作確認してから、実際のJavaScriptファイルを作成するのがお勧めだ。 こうすれば、「JavaScriptファイルを編集し、ページをリフレッシュして動作を確認し、再びファイルを修正する」といった一連の作業を簡略化して開発時間を短縮できる。 実例を示そう。 20 [コンソール]でJavaScriptコードの挙動を確認しているところ 図2. 20では、表示中のページの要素のテキストを、初期状態の「コンソールを表示します。 text "Console updated" ;というjQueryを用いたJavaScriptコードが、それを実現している箇所。 前後のconsole. logメソッドの呼び出しは、テキストの変更を確認するためにログ出力しているだけだ。 ちなみに、表示中のページでjQueryがインポートされていれば、この例のようにjQuery構文が使用することもできる)。 もう1つ便利なのがJavaScriptのオブジェクトの表示/編集機能だ(図2. 21)。 21 [コンソール]上で、オブジェクトの編集と表示が可能 この例では、「a」というオブジェクトを作成して、その状態をconsole. logメソッドで表示しているが、実際には、表示しているページで実行しているJavaScriptコードのオブジェクト状態を表示して、編集することもできる。 これにより、デバッグ効率も良くなるだろう。 もう1つよく使う機能は、タイマーだ。 console. timeメソッドでタイマーを開始して、console. timeEndメソッドでタイマーを終了し、経過時間がコンソールに表示される。 ページで処理されるJavaScriptコードのボトルネックを調査するときなどに役立つ。 例えば「タイマーをネストさせたい」という要望も多いと思うが、そのときは、console. timeメソッドとconsole. timeEndメソッドをタイマーの名前を付けて呼び出せばよい(図2. 22)。 23 [デバッガー]ツール• 1 ユーザーコードのみをデバッグするか、全てのコードをデバッグするか。 2 JavaScriptファイルの一覧。 3 コード表示。 4 ウォッチの一覧。 5 呼び出し履歴、ブレークポイント。 まず 1と 2について説明する。 1をオフにすると、jQueryなどのライブラリを含めて、全てのコードがデバッグ対象になる。 逆に、デフォルトのオンのままであれば、ステップインでコードの中に入っていったとしても、共通ライブラリを除いて、自分たちが書いたコードだけをデバッグできる。 自分たちが書いたコードには問題がなくて、共通ライブラリ側が疑わしくなったときだけ、これをオフにしてトレースしていけばよい。 2から、ページで読み込まれているJavaScriptファイルを選択できる。 jQueryのファイルについては右側にアイコンが表示されている。 このアイコンは、このファイルがユーザーコードではないと判断されており、デバッグ対象外になっていることを示している。 一般的なライブラリは自動判別されるが、一般的ではないライブラリやプロジェクトで共通的に使われているライブラリでデバッグ対象外にしたい場合は、ファイル名の右端の部分をクリックすれば、デバッグ対象外にできる(図2. 24)。 25 デバッグ時のイメージ• 1 スクリプトウィンドウにはデバッグ中のコードや選択されたスクリプトファイルが表示される。 2 [ウォッチ]ウィンドウには現在実行されているコードで使用されている変数と、開発者が追加したウォッチ式が表示される。 3 [呼び出し履歴]ウィンドウには、スクリプトが停止しているときに、停止箇所の呼び出し履歴(=スタック)が表示される。 [ブレークポイント]ウィンドウには、登録されているブレークポイントの一覧が表示される。 2の[ウォッチ]ウィンドウには、現在実行中のコードで使用されている変数が自動的に表示され、開発者が変数の変化を追いたいときは、[ウォッチ式の追加]ウィンドウでカスタム変数を追加できる。 グローバル変数などで変化を常に追いたいときや、要素のテキストや属性値を追いたいときなどに追加すると便利だ。 3の[呼び出し履歴]ウィンドウには、現在実行中のコードの呼び出し履歴が表示される。 複数箇所から呼び出される関数をデバッグする場合などに、どこから呼ばれたのかを確認できる。 [ブレークポイント]ウィンドウ [呼び出し履歴]ウィンドウの隣にある[ブレークポイント]ウィンドウに切り替えると(図2. 26)、開発者が設定したブレークポイント(後述)やトレースポイント(後述)を一覧で確認できる。 また、ここからイベントにブレークポイントやトレースポイントを追加できる。 なおブレークポイントは、対象の処理が実行されたときに一時停止されてデバッグできるようになるポイントであり、トレースポイントは、対象の処理が実行されても停止はせず、コンソールにログが出力されるポイントのことである。 26 [ブレークポイント]ウィンドウ• 1 ブレークポイントの一覧。 2 [イベント トレースポイントの追加]ボタン。 3 [イベント ブレークポイントの追加]ボタン。 4 [すべてのブレークポイントの有効化]ボタン/[すべてのブレークポイントの無効化]ボタン。 5 [すべて削除]ボタン。 1には、下記のようなブレークポイントとトレースポイントが一覧で表示されている。 (+): 条件付きのブレークポイント• 2と 3は、イベントに対してブレークポイントやトレースポイントを設定できるボタンである。 各ボタンをクリックすると、次のようなダイアログが表示される。 27 イベントに対するブレークポイント/トレースポイントの追加ウィンドウ マウス、キーボード、ウィンドウなどのイベント発生時に実行されるコードにブレークポイントやトレースポイントを設定できる。 上の左は 3の[イベント ブレークポイントの追加]ボタンをクリックすると表示されるダイアログ。 上の右は 2の[イベント トレースポイントの追加]ボタンをクリックすると表示されるダイアログ。 これらのダイアログの[イベント]ドロップダウンを開くと、下のようなイベント一覧が表示される。 この機能があることで、自分が全体を把握していないコードでも、イベント発生時に実行されるコードを特定できるので、デバッグが容易になる。 ブレークポイントにある「条件」とトレースポイントにある「トレース」については後述する。 上記の 4と 5は、一括でブレークポイント、トレースポイントを操作できる機能である(図2. 28)。 デバッグを継続していくと、ブレークポイントを細かく設定しすぎることがよくある。 そんなときは、いちいち全てのコードの対象箇所に移動しなくても、ここから一括で外すことができるので便利だ。 29 ブレークポイントの設定方法 1つ目の方法は、コードの行番号の左に表示されているグレーのエリアをクリックするか、ブレークポイントを設定したい行にカーソルがある状態で右クリックしてコンテキストメニューから[ブレークポイントの挿入]を選択する(図2. 29の上の画像)、もしくはそこで F9キーを押すことだ。 これにより、ブレークポイントが設定される。 ブレークポイントが設定されているコードの行には赤丸が表示され(図2. 29の下の画像)、薄い赤でハイライトされるが、それと同時に[ブレークポイント]ウィンドウの一覧にも追加される。 ブレークポイント一覧で、ブレークポイントを選択すると右端にアイコンが表示される(図2. 30)。 33 トレースポイントの設定 コードを右クリックして、コンテキストメニューの[トレースポイントの挿入]をクリックすると、[トレース対象のメッセージ]ダイアログが表示される。 ここでは、通過時に出力されるメッセージを設定する。 変数の値だけを出力しても多くのログメッセージの中に埋もれてしまう可能性が高いため、「変数名などの文字列+変数の値」を設定することをお勧めする。 altJSのデバッグ IEのF12開発者ツールは、「altJS」と呼ばれるJavaScriptコードを生成する代替言語のデバッグができるようになっている。 altJSで生成されたJavaScriptファイルを読み込んでいるページでは、altJSの元ソースが読み込まれてデバッグが実行される。 以下に、altJSの1つであるを使用したWebアプリのデバッグ例を示す。 js" , "sourceRoot" : "" , "sources" :[ "app. ts" ], "names" :[ "Greeter" , "Greeter. constructor" , "Greeter. start" , "Greeter. mapファイルの内容 先頭にファイル名やクラス名の記述があり、 mappingsにコードのマッピングが書かれている。 このように暗号のような内容が記述されているが、このファイルにはコンパイル済みのJavaScriptファイルと元ソースの行やカラムの位置情報が記述されている。 もちろん、. mapファイルや元ソース(TypeScriptの場合は、. tsファイル)が存在しない場合は、JavaScriptのコードをデバッグすることになる。 本番環境へのリリース後にデバッグしたいときなど、元のソースファイルやマップファイルを配置しないことも多いだろう。 そのようなときには、デバッガー上で、ローカルのマップファイルを選択して、ソースをデバッグできるようになっている。 JavaScriptソースを開いた状態で、タブを右クリックすると、コンテキストメニューに[ソース マップの選択]が表示される(図2. 37)。 これをクリックすると、ファイル選択ダイアログが表示されて、. mapファイルを選択できる。 37 コンパイルされたJavaScriptファイルから、ソースマップを選択して、元ソースをデバッグできる このJavaScriptファイルのコンパイル時に生成された. mapファイルを選択すると、開いているJavaScriptファイルの代わりにローカルにある元ソースが表示されて、元のソースでデバッグできるようになる。 ミニファイされたコードの整形 [デバッガー]ツールの説明の最後に、非常に便利な機能を紹介しよう。 jQueryなどのライブラリだけでなく、自分たちが作ったコードでも、ページ閲覧時の読み込みスピードを上げるためにコードの改行やタブ、スペースを除いて、JavaScript/CSSファイル内のコードを最適化しているケースも多いだろう。 そのようなコードをデバッグするのは非常に困難だが、デバッガーツールには、改行やインデントで、コードを整形してくれる機能が提供されている。 使い方は以下の通りだ。 39 [ネットワーク]ツール• 1 ネットワークの記録を開始/停止する。 2 キャプチャしたトラフィックをエクスポート。 3 常にサーバーから更新する。 4 ナビゲーション時にエントリをクリアする。 5 [要約]ビューを開く。 6 [詳細]ビューを開く。 1~ 6はそれぞれ以下のような働きをする。 記録中は、ツールをアクティブにしていなくてもバックグラウンドで記録される• 2 キャプチャしたトラフィックをエクスポート: キャプチャした内容をXML形式やCSV形式で出力できる。 特定の環境でのみ画像が表示されないといった問題が発生した場合、原因を切り分ける方法の1つとして、この機能を使ってキャプチャ内容をエクスポートしてもらい、メールなどで送ってもらうとよいだろう• 3 常にサーバーから更新する: 画像やCSS、JSなどのファイルは、通常、ブラウザーにキャッシュされるが、このキャッシュを使わずに全てをダウンロードするかどうかを設定できる• 4 ナビゲーション時にエントリをクリア: 表示しているページのパフォーマンスを計測するか、クリアされるまで表示を残すかを設定できる。 例えば自動リダイレクトされる場合に、リダイレクト前のページも記録したいケースなどで使用する• 5 要約: ページを表示するためにダウンロードされた全てのファイルを、要約して表示する。 ここではダウンロードに時間がかかるファイルを特定して、[詳細]ビューでその理由を特定するといった使い方ができる• 6 詳細: 「要約」で選択された行の詳細情報を確認できる [要約]ビュー [要約]ビューでは、ネットワーク通信でダウンロードされたファイルの一覧とその概要を確認できる 図2. 40 [要約]ビュー 一覧には、左から順に[URL]/[プロトコル]/[メソッド]/[結果](=HTTPステータス)/[種類](=Content-Typeヘッダーに指定されたファイルの種類、いわゆるMIMEの内容)/[受信](=ファイルサイズ)/[所要時間](=ダウンロードにかかった時間)/[イニシエーター](=ダウンロードのきっかけになった記述)/[タイミング]が表示されている。 一般的には、タイミングのバーが長いものはダウンロードに時間がかかっているため、「チューニングの対象となる可能性がある」と考える。 例えば、画像ファイルの場合は圧縮率を上げたり、サイズを変更したりできないか。 JSファイルの場合は、ミニファイできないか。 また、Webサーバーの負荷の問題であったり、物理的な距離の問題だったりする場合は、CDN(コンテンツ配信ネットワーク)に退避できないかを検討する。 この画面では、もう1つ気になる点がある。 選択されハイライト表示されている行は、1つ上の行のダウンロードが終わってからしばらく待った後で、ダウンロードが開始されている。 このような場合、ページのHTMLソースやJavaScriptコードの書き方に問題があって、ダウンロードが遅延されてしまっている可能性がある。 そのときに、ページの描画が止まってしまっていると、利用者が表示されるまで待たされてしまうことになる。 もしそのような場合は、遅延読み込みやHTMLソースの構造を変更するなどの対応が必要になってくる。 そのウィンドウから、その対応が必要かどうかを判断していく。 このケースでは、[イニシエーター]が「フレームの移動」になっており、ダウンロードしているファイルがPocketのページであるため、IFrameで表示されたボタンであることが特定でき、「遅延読み込みされているため、ページの表示には直接影響していない」と判断できる。 [詳細]ビュー [詳細]ビューでは、ファイルごとの詳細な通信内容を確認できる。 このビューには[要求ヘッダー][要求本文][応答ヘッダー][応答本文][Cookie][イニシエーター][タイミング]の各タブがある。 [要求ヘッダー]タブを以下に示す。 ここではHTTPリクエストヘッダーの内容を確認できる。 47 [タイミング]では、ファイルのダウンロードにかかった時間の詳細を確認できる [タイミング]タブでは、このファイルがダウンロードされるまでの詳細な時間が視覚的に確認できるため、チューニングが必要なポイントを絞り込むことができる。 [待機]行には、ページの読み込みが開始されてから、対象のファイルのダウンロードが開始されるまでの時間が表示される。 このファイルがページの表示までに必要で、待機時間が長い場合、HTMLソースの構造や、ファイルの要求タイミングが遅い可能性がある。 [開始]行に表示されるのは、要求が作成されてから送信されるまでの時間であり、この時間が長いということは、要求の送信に時間がかかっていることになる。 サーバーの物理的な距離が遠かったり、サーバー側の負荷が高かったりといったことが考えられる。 [要求]行には、要求を送信してから最初の応答があるまでの時間が表示される。 この時間が長い場合、サーバー側の処理時間が長いと考えることができ、サーバーサイドの処理をチューニングする必要がある可能性が考えられる。 [応答]行には、ファイルを全てダウンロードするまでにかかった時間である。 この時間が長いということは、ファイルサイズが大きすぎる、ネットワーク回線が細すぎる、サーバーまでの物理的な距離が遠すぎるといった可能性が考えられる。 [ギャップ]行には、ファイルのダウンロードが完了してから実際に描画されるまでにかかった時間が表示される。 これにはさまざまな要因が考えられるため、これだけでは判断が難しいが、この時間が短いほど、ページの描画が速いといえる。 [UI の応答]ツール [UI の応答]ツールは、ページが表示されるまでのさまざまなイベントを視覚的に見ることができる機能である。 48 [UI の応答]ツール• 1 プロファイリングを開始/停止する。 2 プロファイリングセッションをインポートする。 3 プロファイリングセッションをエクスポートする。 4 ルーラー。 ルーラーには診断セッション中に発生した各種のイベントなどが表示される。 5 [CPU使用率]。 6 [視覚スループット]。 7 [タイムラインの詳細]。 1~ 7について、簡単に説明をしておこう。 1 プロファイリングの開始/停止: プロファイルは、手動で開始・停止する。 そのため、ページの読み込み時だけでなく、ページが読み込まれた後のイベントだけの採取もできるようになっている。 例えば、ゲームなど動的に描画する時のパフォーマンスを採取することもできる• 2 プロファイリングセッションのインポート• 3 プロファイリングセッションのエクスポート: プロファイルの結果をファイルに保存したり、ファイルから読み込んだりできる。 これにより、「パフォーマンスが出ない」と言っているユーザーにファイルをエクスポートして送付してもらって、そのファイルをインポートして分析するといったことができる。 ファイルは、「. diagsession」という拡張子のバイナリファイルである• 57 [メモリ]ツール• 1 プロファイリングセッションの開始。 2 プロファイリングセッションの終了。 3 プロファイリングセッションのインポート。 4 プロファイリングセッションのエクスポート。 5 ヒープスナップショットの作成。 6 メモリ合計。 プロファイリングセッションを開始( 1)すると、終了( 2)するまでメモリの合計( 6)がグラフで表示される。 5でメモリの状況を採取して、 4でエクスポートし、 3でインポートできる。 5の[ヒープ スナップショットを作成します。 ]をクリックすると、そのクリック時点での、ページで使われているメモリの詳細情報(=スナップショット)が採取される(図2. 58)。 59 [種類]ビュー 「スナップショット 2」のオブジェクト数表示のリンクをクリックすると、1つ前のスナップショットとの差分が表示される。 スナップショット間のオブジェクトが[種類]別にグループ化されて表示されていることが分かると思う(上の画面では[識別子]列の値が「Function」のような形でグループ化されているが、これを展開した後の各オブジェクトにおける[種類]列の値は「Function」となっている)。 単純なメモリ使用量調査するのであれば、この[種類]ビューが使える。 [ルート]ビュー [ルート]ビューでは、オブジェクトがルートオブジェクトごとにグループ化されて表示される(図2. 60)。 61 [ドミネーター]ビュー オブジェクトごとの詳細な情報が表示される。 [ドミネーター]ビューでは、オブジェクトごとの詳細な情報まで見ることができるため、具体的にどのオブジェクトがどういう状態で、メモリを多く使用しているのかを特定するのに便利だ。 このようにF12開発者ツールでは、メモリの詳細情報まで追えるようになっている。 そのため、作成したページのメモリ使用量が多い場合や、使っているうちに次第にメモリ使用量が増えていく場合などで、問題がどこにあるのかを特定する際に役に立つ。 [エミュレーション]ツール [エミュレーション]ツールは、IEの以前のバージョンを含む他のブラウザーでの動作を確認したり、位置情報を偽装してGPSを使ったアプリの動作を確認したりできる機能である(図2. 62)。 63 [ドキュメント モード]の切り替え 現在のドキュメントモードが選択されている理由が下に表示されており、ドロップダウンでドキュメントモードを切り替えられるようになっている。 「ドキュメントモード」とは、前述したようにページの描画エンジンのことであり、例えば「7」を選択すると「IE7の描画エンジンを使用して描画する」という意味になる。 これは、他のモダンブラウザーには存在していない、IE特有の機能だ。 ページで選択されているドキュメントモードには、「 既定 」と表示されており、そのドキュメントモードが選択された理由が、ドロップダウンの下に表示される。 ブラウザープロファイル [ブラウザー プロファイル]は、あらかじめ登録されているブラウザーの設定に素早く切り替えることができる機能である(図2. 64)。 66 プロファイルを「エンタープライズ」に切り替えたところ [ドキュメント モード]が変更されて表示されていることが分かる。 「エンタープライズ」を選択することで、IE11で新しく追加されたに切り替えてみることができる。 エンタープライズモードは、企業内の標準ブラウザーをIE11に切り替えてもらうため、互換性を維持しつつ、最新機能も使えるように設定された機能だ。 しかし、実際に古いブラウザー向けに作られたページがIE11でも正常に使えるかどうかはテストが必要になるだろう。 そんなときには、いきなりActive Directoryなどで設定変更するのではなく、上記の[ブラウザー プロファイル]を変更して、挙動を試してみるのがよいだろう。 ユーザーエージェント文字列 [ユーザー エージェント文字列]では、ページを要求するときのユーザーエージェント文字列を指定できる(図2. 67)。 ユーザーエージェントごとに応答を変更しているページのテストに役に立つ機能である。 73 [GPS のシミュレート]で[有効 ただしシグナルなし ]を選択 GPS機能は付いているが、位置情報が取得できない状態をテストできる。 このオプションでは、位置情報が正しく取得できないときに適切な処理がされるかをテストしてみることができる。 まとめ いかがだっただろうか。 今まであまり気に留めてなかったIE11のF12開発者ツールにも豊富な機能が提供されていることを発見していただけていれば幸いだ。 本稿では、主要な機能に絞って説明したのだが、これだけのボリュームになってしまった。 IE11からは、(IE12のような)メジャー・バージョンアップだけでなく、Windows Updateなどで配布されるアップデートでも機能が随時更新されており、本稿は執筆(2014年9月)時点の最新状態で書いている。 今後もアップデートで機能が追加されていく可能性があるため、ぜひウォッチし続けてほしい。

次の

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

デベロッパーツール

モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。 そして、今やほとんどのブラウザーではWindowsの場合 F12キーを押すことで(Macの場合は Command+ Option+ Iキーで)手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。 なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chromeのデベロッパーツールは日本語化されていないため、メニューやメッセージが全て英語になってしまうが、それを踏まえてもあまりある豊富な機能が提供されている。 まずは[Developer Tools]ウィンドウ全体の構成から見ていこう。 Chromeでどこかのページを表示した状態で F12キー(Windowsの場合。 Macの場合は Command+ Option+ Iキー)を押すと、デベロッパーツールが表示される(次の画面を参照)。 デベロッパーツールを起動したところ• 1Webページ上の要素を、マウスを使って選択できる。 虫眼鏡アイコン。 2スマートフォンなどの表示を確認するためのエミュレーション・ウィンドウの表示/非表示を切り替える。 デバイスモード・アイコン。 3各タブは「パネル」と呼ばれており、このパネルで機能を切り替えることができる。 ドロワー(=引き出しを意味する「drawer」)は、実際に引き出しのように下からスライドして表示されたり、隠されたりする。 5デベロッパーツールの詳細な設定をする設定ダイアログの表示/非表示を切り替える。 6デベロッパーツールを別ウィンドウにするか、下辺か右辺のいずれかにドックするかを切り替える。 このウィンドウを使いこなすための重要ポイントだけ、簡単に説明しておこう。 上部に表示されているタブメニュー( 3)は「パネル」と呼ばれる。 各パネル内に、デベロッパーツールの機能がまとめられている。 6は、[Developer Tools]ウィンドウをChromeの下部に統合するか、別ウィンドウとして独立させるかを切り替えるものである。 本稿では、以下の各パネルの機能を一通り説明する(リンクをクリックすると該当箇所にジャンプできる)。 最後のはパネルではないが、便利な機能なので紹介したい。 それでは、[Elements]パネルから説明していこう。 [Elements]パネル Elementsパネルは、タグの要素とスタイルを検証するための機能であり、Web開発者が最も多く使う機能である。 まずはパネル内の機能から解説していこう。 [Elements]パネル パネル内には主に下記の4つの機能がある。 それぞれの機能内容は、以下の本文で説明している。 1虫眼鏡アイコン。 2DOMエレメントツリー。 3サイドバー。 4パンくずリスト。 DOMエレメントツリー( 2)は、ブラウザー部分で表示中のWebページのHTML要素をツリービュー形式で表示したものである。 ここで選択された要素のCSSスタイルなどの情報がサイドバー( 3)に表示される。 また、現在表示している要素の階層はパンくずリスト( 4)に表示される。 ページ要素が多い場合、検証したい要素を探すために、ツリーを展開していって探すのは非常に面倒だが、虫眼鏡アイコン( 1)をクリックすると、普段見ているWebページ上で検証したい要素をクリックして選択できる検証モードに切り替わる。 次の画面は、実際に検証モードに切り替えて、Googleのタイトル画像をクリックして選択したところだ。 グループ 目的 Styles 要素に設定されたCSSスタイルを確認できる パネル内の[Metrics]表示: 要素の位置(position)、マージン(margin)、境界線(border)、パディング(padding)、要素のサイズを確認できる また、下に検索ボックスがあってCSSスタイルの絞り込みができる Computed 最終的に要素に適用されたスタイルを確認できる パネル内の[Show inherited](=継承されたスタイルの表示)チェックボックス: 要素に設定されたスタイルだけでなく、親要素やブラウザーデフォルトのスタイルも含めて表示する。 また、最終的な[Metrics]も表示される こちらも、下部の[Filter]入力欄で探したいCSSスタイルを検索できる Event Listeners 要素に関連付けられたイベントを確認できる DOM Breakpoints 要素に関連付けられたブレークポイント(=実行がいったん停止される場所)を確認できる(詳細後述) Properties JavaScriptコードからアクセスできる、要素やオブジェクトなどのプロパティを確認できる Stylesグループ内のスタイル表示3: 色要素の編集はカラーピッカーが表示されて、イメージに近い色を選択できる DOM Breakpointsグループ DOM Breakpointsグループは、その名の通り、DOM(Document Object Model)のイベントに対するブレークポイントである。 Webアプリケーションでは、JavaScriptなどを使って動的に要素が変化するページが、「ほとんど」と言ってもよいほど多い。 それに伴い、「これらの要素が変更されるタイミングでスクリプトをデバッグしたい」というケースも増えている。 DOM BreakpointはDOM要素(=DOMエレメント)にブレークポイントを張れる機能である。 次の画面は、要素にブレークポイントを張ろうとしているところだ。 Networkパネル ページのリクエストとダウンロードされるまでの時間が表示される。 1 [Status]列: HTTPステータス。 2 [Initiator]列: ファイルを呼び出す起点。 例えばJavaScriptコードから読み込まれたときには、そのJavaScriptファイル名が表示される。 3 [Time]列: ダウンロードにかかった時間。 上がリクエストから受信が完了するまでの時間。 下がリクエストから受信開始するまでの時間。 4 [Preserve log](ログの保持): ページを遷移してもログを残しておくように設定する。 5 フィルター: フィルターアイコン( )をクリックすると( のようにアイコンの色が変わり)、リクエストの種類をフィルターして特定の項目だけの表示に切り替えられる。 これにより、任意のキーワードや、次の画像に示す[Documents]や[XHR]などに対象を絞って、ページで使用されているファイルやデータを確認できる。 ちなみに「XHR」は「XMLHttpRequest」の略だ。 タイムラインの各項目上にマウスカーソルを当てるとさらに詳細な時間が表示される(次の画面)。 タイムラインの詳細表示 タイムライン上の項目にマウスカーソルを当てると、主に下記の4つの情報が表示される。 項目によっては、後掲の「NetworkパネルのTimingタブ」の画像で説明している[DNS Lookup][Connection][SSL]などの情報も表示される。 1 Blocking: サーバーへの接続の再利用やプロキシへの接続などリクエスト送信までの待ち時間。 2 Sending: リクエストの送信時間。 3 Waiting: サーバーがレスポンスを返すまでの待ち時間。 4 Receiving: 受信開始から完了までの時間。 各通信項目の詳細表示 一番左の[Name]列のファイル名をクリックすると、さらに詳細を確認できる。 基本的に、下記の5つのタブが表示されるが、通信項目の種類によっては一部のタブは表示されない。 Headersタブ• Previewタブ• Responseタブ• Cookiesタブ• Timingタブ Headersタブ Headersタブでは、HTTPリクエストとレスポンスのヘッダーを確認できる(次の画面)。 NetworkパネルのTimingタブ 主に下記の7つの情報が表示される。 項目によっては、前掲の「タイムラインの詳細表示」の画像で説明しているように4つの情報しか表示されない。 1 Blocking: Webサーバーへの接続までの待ち時間。 2 DNS Lookup: ドメインのDNSルックアップ。 3 Connection: サーバーとの接続にかかった時間。 4 SSL: SSLハンドシェイクにかかった時間。 5 Sending: 送信にかかった時間。 6 Waiting: 最初の応答を受け取るまでの待ち時間。 7 Receiving: 応答開始から終了までの時間。 特定のファイルのダウンロードが遅い場合、この情報を見て対応を検討できる。 例えば[DNS Lookup]に時間がかかっている場合、DNSプリフェッチを検討できる。 [Sending]や[Receiving]に時間がかかっている場合は、サーバーの物理配置の変更、CDNの検討、GZip圧縮の検討などが考えられる。 [Waiting]に時間がかかっている場合は、Webサーバー側の処理をチューニングすることを検討する必要がある。 このようにNetworkパネルを使用することで、ページが表示されるまでの時間を詳細に調査して、対応を検討できる。 [Sources]パネル Sourcesパネルは、CSSやJavaScriptのコードをデバッグできる機能である(次の画面はJavaScriptソースファイルが開かれている例)。 Visual StudioやEclipseのようなIDEと同様にデバッグに必要な機能が備わっている。 Sourcesパネル この例では、JavaScriptコードが開かれている。 1ページのソースファイルを一覧表示するnavigatorを表示する。 2ソースビュー。 3サイドバー。 4コード整形ボタン。 このパネルで便利な機能はコードの整形である。 コードの整形 最近のJavaScriptライブラリは通信速度を高速化するため、コードのインデントや改行を削ったミニファイされたコードが返されることが多い。 このようなコードは、プログラムとしては正しく動作するものの、人間がデバッグのために読もうとしてもなかなか読みづらいコードになっている。 デベロッパーツールには、このような「コードを読みやすく整形してくれるボタン」が準備されている。 以下の画面は実際にこのコード整形ボタンの実行前と実行後を比べたものだ。 項目 説明 Watch Expressions ウォッチ式。 [+]アイコンをクリックして追跡したい変数を追加できる Call Stack コールスタック。 ブレーク時の処理の呼び出し階層を確認できる Scope Variables ブレーク時に実行中のスコープにある変数とその値を確認できる Breakpoints JavaScriptコードのブレークポイント DOM Breakpoints Elementsパネルでも説明したDOMイベントのブレークポイントを確認できる XHR Breakpoints AjaxなどJavaScriptコードからのXMLHttpRequest呼び出しをドメイン単位でブレークできる Event Listener Breakpoints ページの中で発生したイベント単位でブレークを指定できる。 例えば、マウスのクリックやアニメーションの開始時など Workers Web Workersの開始時にデバッグを開始するかどうかを指定できる Sourceパネルのサイドバー上のグループの役割 サイドバーのメニューを見ただけでも豊富なデバッグ機能が提供されていることがご理解いただけたと思う。 次にこれらを使ってデバッグに便利な機能をいくつか紹介していく。 コールスタックをさかのぼって、実行済みの呼び出し元をデバッグする機能 まずは、デバッグでブレークしたときにスタックを逆回転できる機能だ。 具体的には、停止したときにCall Stackグループには関数の呼び出し履歴が表示されているので、停止している関数よりも前の処理を右クリックして、表示されるコンテキストメニューから[Restart frame]をクリックする(次の画面を参照)。 この手順により、呼び出し元にさかのぼってデバッグできる。 この機能はデバッグ機能の中でも非常に高度で有益な機能だ。 Timelineパネル 初期状態では何も表示されず、[Record](記録)ボタンを押してから、[停止](Stop)するまでの情報が記録される。 1[Record]ボタン/[Stop]ボタン。 2記録したレコードをクリアする。 3フィルターの表示/非表示を切り替える フィルターボタン。 このボタン( )をクリックすると( のようにアイコンの色が変わり)、フィルター用のキーワードを入力するためのテキストボックスや、次の画像に示す[Loading]や[Scripting]などでイベントの種類を絞り込めるチェックボックスが表示される。 これらを使って、イベント名や、処理時間(=全て/1ms以上/15ms以上で選択可能)、イベントの種類でフィルターできる。 4ガベージコレクターを実行する。 5デフォルトのEventsモードをFramesモードに切り替える(後述)。 6JavaScriptのコールスタックを記録する(後述)。 7メモリ情報を記録する(後述)。 8処理時間の内訳を円グラフで表示。 Timelineパネルのモード Eventsモード Timelineパネルは、デフォルトではページの表示で発生したイベントを記録したEventsモードで表示される。 次の画面に示すように、レコードされるイベントの種類は大きく4種類に色分けされている。 Eventsモード(前掲の「Timelineパネル」を再掲) 画面上部のサマリーに全体のイベント概要があり、画面中央部のレコード(RECORDS)に詳細なイベント情報(下記の4種類)が表示される。 青: Loading。 読み込み、ネットワークの送受信、HTML文書の解析など。 黄: Scripting。 スクリプトの実行、イベント処理、GC(ガベージコレクター)など。 紫: Rendering。 DOMの変更、ページのレイアウト、スクロールなどの描画イベント。 緑: Painting。 画像の処理。 このように表示されたタイムラインをフィルターなどで絞り込んでみて、時間がかかっている処理を見付け出してパフォーマンスチューニングをしていくのだ。 Framesモード 次は描画パフォーマンスを調べるFramesモードだ(次の画面)。 Framesモード 画面上部のサマリーでは、描画速度の概要が表示されており、画面中央部のレコード(RECORDS)に詳細情報が表示されている。 棒グラフの棒が長いほど描画に時間がかかっていることを表している。 この例では、一定の頻度で描画に負荷をかけている処理があることが分かる。 その処理を特定してチューニングしていけば、Webページの体感速度を上げることができる。 上の画面の例では、画面上部のサマリー領域を見ると、その一番右端に、上から[30 fps][60 fps]と表示されている。 要するに、横に引かれている上の線が30fpsで、中央の線が60fpsを意味するということが分かる。 つまり、この画面のページでいえば、60fps以上であればスムーズに描画されるということになる。 ほとんどのディスプレイは60Hzなので、ほとんどのケースで問題のない描画が行えると言えるだろう。 JavaScriptコールスタックの表示 [Stacks]をチェックすると、タイムラインを記録するときにJavaScriptのコールスタックを記録する。 コールスタックの表示 [RECORDS]でJavaScriptイベントを選択すると、[Details]タブにJavaScript処理のコールスタックが表示される。 なお[Details]タブは、[Developer Tools]ウィンドウを独立させている場合はこの画像のように下側、ドッキングさせている場合は右側に表示される。 このように処理に時間がかかっているJavaScriptコードを見つけてコールスタックを確認することで、具体的にどこから呼ばれている処理なのかを特定できる。 [Call Stack]にスクリプト名と行数が表示されており、クリックするとSourcesパネルでJavaScriptソースが表示される。 Memory使用量の表示 [Memory]をチェックすると、タイムラインのメモリ使用量を確認できる。 Memory使用量の表示 [Memory]をチェックすると、タイムラインで使用されているメモリ使用量が表示される。 画面上部のサマリーにメモリ使用量の増減グラフが表示される。 また、イベント表示(RECORDS)の下にメモリ(MEMORY)使用量の推移グラフが種類ごとに表示される。 アプリを長時間稼働させる可能性がある場合は、このグラフを見て、メモリの使用量が増加し続けていないかを確認するとよいだろう。 ただしここでは、種類ごとにグラフで確認できるが、さらに詳細を確認したい場合には、次に説明するProfilesパネルで確認するとよい。 [Profiles]パネル Profilesパネルでは、CPUやメモリの情報を収集して詳細を確認できる。 次の3つの情報を収集できる。 (1)Collect JavaScript CPU Profile: JavaScriptコードの関数が使用しているCPU利用率を収集する (2)Take Heap Snapshot: JavaScriptコードとDOMノードが使用しているヒープメモリのスナップショットを採取する (3)Record Heap Allocations: 確保したヒープを時間軸で記録する 次の画面は、Profilesパネルを開いたところ。 ここで、上記の3つのプロファイリングタイプの中から1つを選択できる。 複数のスナップショットを採取するとオブジェクトの比較ができるようになる このように複数のスナップショットを比較することで、任意のタイミングのメモリ使用状況を比較して、「何が増えているのか」を特定できるようになる。 (3)Record Heap Allocations Record Heap Allocationsは、時間の流れとともに確保されたオブジェクトとその保持状況を確認できる。 Auditsの結果 ページの内容を検証して、パフォーマンスを改善するための提案が一覧で表示される。 1つずつの詳細を解説することは避けるが、表示しているページでGZip圧縮を有効にすることを提案したり、未使用のCSS要素の削除を提案したりとページのパフォーマンスを改善するための提案をしてくれる。 全てをうのみにして実施すればよいというものではないが、一般的にWebのパフォーマンスを劣化させる原因になるものを提示してくれるので参考にして損はないだろう。 [Console]パネル Consoleパネルは、非常に強力な機能であり、コマンドライン入力により、さまざまな操作ができるようになっている(次の画面を参照)。 大きく分けると2つの役割を持っており、1つが「ログの閲覧」で、もう1つが「インタラクティブな操作」である。 そして実は、Consoleパネルは全てのパネルからアクセスできるようになっている。 そのため、Elementsパネルで要素を操作したり、SourcesパネルでJavaScriptのオブジェクトを操作したりと、デバッグに非常に便利な機能である。 変数名を入力することで、オブジェクトの中身を確認できる。 ここでは「a」という変数の中身が階層で表示されている ここでは、オブジェクトを作成して出力しているが、実際には、表示しているページで実行しているJavaScriptコードのオブジェクト状態を表示できる。 このように変数の中身が階層で表示されるので、状態を確認するのに非常に便利だ。 もちろん、値の変更も可能なため、デバッグにも役に立つだろう。 時間の計測 JavaScriptコードの処理に時間がかかっていて、その箇所の詳細を追うためにストップウォッチ(=実行時間を計測する機能)を使いたいことも多いだろう。 もちろん、そのためのメソッドが用意されている。 恐らくインタラクティブに入力することは少ないと思うが、次の画面の例では簡易的に入力することにする。 グループ化して処理時間を出力できる(各メソッドの意味は以下の本文に記述する) console. group ~ console. groupEnd でグループ化して、出力結果をまとめて表示できる。 なお、 groupメソッドは、タイマー以外の目的でも使用できる。 console. time ~ console. timeEnd で、時間を計測できる。 このとき、 timeメソッドの引数にラベルを指定することで、複数の時間を計測できるようになるため、ネスト構造での計測も可能になっている(この例では「重い処理」と「軽い処理」の2つの時間をネスト構造で計測している)。 パネルとしてはこれで全てだが、もう1つ便利な機能を紹介しよう。 デバイスモード(Device Mode) ブラウザーごとに振る舞いを変えているサイトや、モバイルデバイスでは異なる見た目になるように作っているサイトのテストを、Chromeだけでできるようにする機能がある。 具体的には次の画面のように、左上のデバイスモード・アイコンをクリックする。 ユーザーエージェント文字列は、デバイスを選択すると自動的に表示されるが、必要に応じてカスタム文字列を入力できる このように一般的なモバイルデバイスのエミュレーションがスッキリしたUIで実現されていることがご理解いただけるだろう。 もちろん、デバイスの表示を完璧に再現してくれるわけではないため、最終的な動作確認は実機が必要になるが、基本的な確認はChromeだけで済むため、開発効率は大幅に上がるはずだ。 CSSメディア [Emulation]ドロワーを開き、[Media]ペインで[CSS media]をチェックしてCSSメディア(printなど。 詳細後述)を選択する。 これにより、CSSメディアに基づいて表示内容を切り替えるWebページに対して、各メディアのときの表示内容を確認できる。 次の画面では、CSSメディアを「print」(=印刷用)にしたときの表示内容を確認している。 「print」以外にさまざまなメディアの種類が用意されている 「 braille: 点字で触覚フィードバックをするデバイス用」「 embossed: 点字印刷用」「 handheld: 帯域幅の限られた小型スクリーンなどの、携帯端末用」「 print: 印刷用」「 projection: プロジェクター用」「 screen: 一般的なスクリーン用」「 speech: 音声で読み上げるシンセサイザー用」「 tty: 固定幅文字グリッドメディア用(テレプリンターなど)」「 tv: テレビ用」。 ほとんどの場合は、「print」時の表示内容を確認するために利用することになるだろう。 印刷プレビューなどの操作をすることなく確認できるので便利だ。 CSSやHTMLのコードを編集して、リフレッシュするだけで出力内容を確認できるため、コーディングの手間がかなり省ける。 センサー(Sensors) [Emulation]ドロワーの[Sensors]ペインでは、さまざまなセンサー機器をエミュレーションできる。 [Emulate touch screen]は、マウスでタッチイベントをテストするための機能だ。 これをチェックしてタッチイベントに対応したページを操作すると、タッチ非対応のデバイスでもタッチ操作をテストできるようになる。 次の画面は実際にこの機能を使って、マウス操作で、タッチイベントをエミュレーションしている例だ。

次の