デベロッパーツール。 Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法 : ビジネスとIT活用に役立つ情報

Chrome デベロッパーツールの使い方まとめ

デベロッパーツール

時々、ブログのデザインを無性に変えたくなることがあります。 と言っても、CSSをちょこちょこいじる程度なのですが、あまりCSSに詳しくない私には「この部分をこう書き換えるとこう変わる!」という経験値みたいなのがなくて、いつも試行錯誤しています。 本ブログはWordPressで構築しているので、例えば「style. css」を書き換えて保存して、ブラウザで確認したら「うわ!全然予想と違う!デザイン崩れまくっとる!」ということがよくあります。 一瞬だけとは言え、デザイン崩壊したブログにアクセスいただいた方には迷惑な話なので、極力こういう事態は減らしたいところ。 そこで私がやることにしたのが、Chromeの標準機能である「デベロッパーツール」を使って、実際に修正する前にCSSやHTML修正のシミュレートすることです。 デベロッパーツールを使えるようになると非常に便利なので、皆さんにもご紹介したいと思います。 Chromeの「デベロッパーツール」とは? Chromeのデベロッパーツールをご存じない方もいるかもしれないので簡単に説明しますと、単語から想像できるとおり「開発者向けのデバッグツール」です。 同じような機能を有しているものとしては、Firefoxのプラグイン「Firebug」なんかが有名ですね。 開発者向けというくらいなので、非常に多くの便利な機能(JavaScriptのデバッグとかネットワーク通信のやりとりだとか)を備えています。 ただ、高機能ゆえに使いこなすのは結構大変です。 私も全然使いこなせていません。 今回ご説明するのはほんのさわりの部分だけですが、それだけでも便利ですよ! Chromeのデベロッパーツールを使ってCSSを仮修正する方法 では実際にデベロッパーツールを使って、CSSを仮修正してみましょう。 ここで注意なのが、あくまで「仮」という点です。 これをやったからってCSSが修正されるわけではなく、「ここをこう直せばこういう見え方をする」という修正指針の一助として使うことを目的としています。 デベロッパーツールの起動 まずはデベロッパーツールを起動しましょう。 ショートカットキーは「Ctrl+Shift+I」または「F12」です。 私はいつも「F12」を使っています。 この画面を使ってCSSの仮修正を行っていきます。 CSSを確認&修正する まずは現状のHTMLやCSSがどうなっているのかを確認します。 「Elements」タブになっていることを確認して、矢印アイコンをクリックします。 見出し(下の例だと「ブログ過去記事を~」の部分)をクリックします。 すると、見出しの要素が選択されます。 選択箇所はh1タグで、「entry-title」というclassが指定されていることがわかります。 タグやclassに適用されているCSSが右下に表示されます。 見出しの黄緑色は「padding」を、オレンジ色は「margin」を示しています。 ちなみに、見出し部分を右クリックして「検証」を選択しても同様のことができます。 こちらのほうが早いかもしれません。 そのスタイルが取り消し線で除外されます。 ちょっとわかりにくいですが、見出しのすぐ下の間隔がなくなっています。 「font-size:32px;」の「32px」をクリックします。 60pxに変更してみました。 大きくし過ぎて文字が重なっちゃってますが、まあ気にしない。 カラーパレットから視覚的に色を選択できます。 もちろん、カラーコードやカラーネームを指定することもできます。 どうでしょうか?こんな感じでCSSの反映をリアルタイムでチェックできるのがおわかりいただけましたか? HTMLについては触れませんでしたが、CSS同じようにHTMLタグ部分を修正することで反映確認できます。 繰り返しますが、これは「仮修正」なので、実際のCSSファイルやHTMLファイルの修正を行う必要があることに注意してくださいね。 CSSファイルを修正したのにブラウザ上で反映されない…そんなときは以下の記事を参考にしてみてください。

次の

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

デベロッパーツール

公開日時 2018年6月19日• タグ , , 皆さん、使っていますか?Chrome DevTools。 日本語ではデベロッパーツールと呼ばれていますね。 Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム!Chromeにデフォルトでついている機能なので、今すぐに使い始められますよ。 また、「デベロッパーツールの存在は知っていてもどう使えばいいかわからない…」という方向けに、使いどころポイントも紹介します! Chromeデベロッパーツールの基本的な使い方 まずはChromeでデベロッパーツールを起動させましょう。 Webページ内のどこでもいいので右クリックし、「 検証」を選択します。 すると、こんな感じでパネルが表示されます。 これがデベロッパーツールです。 英語だらけでびっくりしちゃうかもしれませんが、次第に慣れます(たぶん)。 デベロッパーツールはショートカットキーでも起動できます。 覚えておくと便利ですね。 デベロッパーツールの見方 最初に使うのは左側の「Elements」タブと右側の「Styles」タブ。 はじめのうちはこの2つをメインで見ていくことになります。 「Elements」タブではHTMLが、「Styles」タブではCSSが表示されます。 CSSを見てみよう まずパネルの左上にある四角と矢印のアイコンをクリック。 その後検証したい箇所をクリックします。 すると、その要素のHTMLと、適応されているCSSが表示されます。 この例だと nav ul a に対して以下のCSSが加えられているのがわかります。 こんな時に使える! 既存のHTMLテンプレートやWordPressテーマを使っていて、一部だけ色を変えたりスタイルを変えたいと思いCSSファイルを開いたものの…記述が多すぎて一体どこを編集すればいいのか悩んだことはありませんか?そんな時はこのデベロッパーツールを使って編集したい箇所を検証!ファイル名と行数をチェックして、その部分だけ編集すればいいですね! CSSのエラーを教えてくれる 検証した時、プロパティーの横に三角アイコンが表示されることがあります。 これは記述エラーで、スタイルが適応されていません。 こんな時に使える! なんだかよくわからないけど、記述したCSSが適応されていない!そんな時も慌てずデベロッパーツールで検証です。 スペルミスはないか?正しいプロパティーと値が記述されているか?再度確認してみましょう。 打ち消し線の意味 「Styles」タブで表示されるCSSの一部に打ち消し線がついている場合があります。 これはなんらかの理由でそのCSSが適応されていないという意味です。 多くの場合その要素に同じプロパティーの指定が複数あり、優先順位が低いため適応されていません。 この例だと287行目で指定した margin: 5px 0; が打ち消されています。 これは958行目にあるメディアクエリーで指定した margin: 0 10px; の方が優先順位が高いため、前者が適応されていません。 CSSでは下の方に書かれている指定のほうが優先されます。 スタイルを非表示に 「Styles」タブに表示される各プロパティーの左側にチェックボタンがあります。 ここでチェックを外すとそのスタイルを非表示にできます。 こんな時に使える! 何か表示がおかしい時、どの記述が悪さしているのかを検証する時に使ってみてください。 チェックを外して直ったなら、原因はその子です。 デベロッパーツール上でCSSを編集する どんなCSSが当てられているかを確認するだけでなく、実際に編集してどう変化するのかを確認できます。 今までの手順通り、検証したい箇所をクリックして「Styles」タブを表示させた後、値が書かれている部分をクリックすると入力できるようになります。 こんな時に使える! 色やフォントの指定を変えたらどう見えるかの検証でも使えますが、一番使えるのは数値の微調整です。 margin や padding 、位置等、こまかく指定する必要がある時はCSSファイルを編集してプレビューを見て…と繰り返すよりも、デベロッパーツールで値を変更しながら確認すると楽です。 数値は上下キーで1ずつ変更できますよ! スタイルを追加する 検証した要素に新たにスタイルを追加することもできます。 テキストシャドウ、ボックスシャドウ、文字色、背景色の4つは手軽に調整可能。 CSSが書かれている欄の右下にある3つの点のアイコンにカーソルを合わせ、4つのアイコンが表示されるので、そこからそれぞれ設定できます。 その他のスタイルを追加 テキストシャドウ、ボックスシャドウ、文字色、背景色以外のスタイルも追加できますよ。 閉じカッコの右あたりをクリックするとプロパティーを入力できるようになります。 ここからプロパティーと値を追加しましょう。 別のデバイスサイズで検証する デベロッパーツールではモバイルサイズでどう見えるのかも検証できます。 検証するためのアイコンのすぐ右横にある、2つの四角が重なったようなアイコンをクリックして表示を変更しましょう。 主要なモバイルサイズを選択可能です。 モバイルサイズだと縦長になるので、デベロッパーツールのレイアウトを変更するとより見やすくなります。 レイアウトの変更はデベロッパーツールのパネル右上にある3つのドットをクリックしてDock Sizeを変更しましょう。 デベロッパーツールで編集したスタイルを保存するには デベロッパーツールはあくまで検証のためのツールなので、 ページを再度読み込むと編集したスタイルはリセットされてしまいます。 そのため、デベロッパーツールで作成したスタイルはその都度CSSファイルにコピペして保存する必要があります。 「Styles」タブのCSSは通常のテキストと同様、ドラッグして選択、コピーが可能なので、 忘れずCSSファイルに保存しましょう。 今回はWebデザイナーが一番使うであろうCSSの検証・編集方法を紹介しました。 デベロッパーツールは本当に多機能で、HTMLの編集やJavaScript、CSSアニメーションなどの検証も可能です。 少しずつ使いこなせる機能を増やしていきましょう! シェアする• ニュースレター Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :.

次の

Google Chromeデベロッパーツールの使い方をおさらい │ Mobile First Marketing Labo

デベロッパーツール

モダンブラウザーの中で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]は、マウスでタッチイベントをテストするための機能だ。 これをチェックしてタッチイベントに対応したページを操作すると、タッチ非対応のデバイスでもタッチ操作をテストできるようになる。 次の画面は実際にこの機能を使って、マウス操作で、タッチイベントをエミュレーションしている例だ。

次の