デベロッパーツール。 Web制作で使いこなしたいIE開発者ツールの最新機能

ブラウザで簡単に使える「デベロッパーツール」でHTMLやCSSを解析しよう

デベロッパーツール

ブラウザでウェブサイトを表示して「デベロッパーツール」で検証する Chromeで好みのウェブサイトを開き、ページ上にカーソルを置いて右クリックをすると「要素を検証」という項目が出てきたことから、僕はこの機能のことを「要素を検証」って呼んでました。 最近ではChromeで「検証」という文字だけになってしまったので、要素を検証っていう言葉自体も古い言い回しになってしまいましたが。 というわけで、ここからはこの機能を「デベロッパーツール」と呼んで話を進めて行きます。 ウェブサイトで気になった箇所にカーソルを合わせて右クリック。 「検証」という項目があるのでそちらをクリック。 右側、もしくは下にコードがずらっと表示されました。 これがデベロッパーツールです。 表示する位置はこちらで変更可能です。 デベロッパーツール左上のボタンをクリックしてオンにすると、カーソルを置いた箇所が指定されるようになります。 右クリックしなくても良いのでこちらの方法が簡単でおすすめです。 デベロッパーツールでCSSをいじってみる デベロッパーツールではいろいろなことができるのですが、まずは CSSを変更してどのような表示になるか確認してみましょう。 調べたい箇所を指定すればCSSが表示されますので、そこを確認したり編集することができます。 プロパティや値を変更したいときはクリックすることで書き換えることも書き加えることもできます。 値は矢印キーの上下で数字を増やしたり減らしたりもできますし、Shiftと矢印キーの上下で十の位ずつ変化させることもできて便利です。 オンオフをすることもできるので、試しに消してみることでそのCSSがどのように機能しているのかを確認することができます。 ある程度いじったものをリセットしたいと思ったら画面をリロードするだけで元通りになるため、適当にいじっても問題ありません。 慣れるまではとにかくひたすらいじってみましょう。 ちなみに、ここで変更した内容を反映させたい場合はスタイルシートに編集内容をコピペしていくしかないので、あまりゴリゴリにいじるとあとでめんどくさくなります。 テストとしてリアルタイムに編集できることがうまみなので、自分のサイトを編集する際はスタイルシートを編集してくださいね。 デベロッパーツールをスマホのシミュレーターとして活用する 最近ではiPhoneのディスプレイも3種類になってしまいましたし、iPadの確認もしないといけないですよね。 とはいえいちいち実機で確認するのもめんどうなもの。 そこでデベロッパーツールの出番です。 Chromeのデベロッパーツールでは主要端末の画面をシミュレートしてくれてますのでこちらを活用しましょう。 基本的にはiOSの端末ばかりですが、カスタマイズもできますのでお好みの幅にあわせてチェックしてみてください。 個人的にはiPhone 5とiPhone 6とiPhone 6 Plusの3種類をチェックしていれば十分だと思ってますけどね。 最後に ウェブデザインを専門でやってる人も日常で使っていますし、初心者の方でも簡単に使うことのできるツールです。 必要なのはウェブブラウザだけですので、ぜひブログのカスタマイズに活用してみてください。

次の

デベロッパーツールの基礎的な使い方【HTML/CSS編】

デベロッパーツール

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

次の

【Web制作入門】デベロッパーツールの使い方(特に必要な3つを厳選)

デベロッパーツール

デベロッパーツールで出来ること Google Chromeのデベロッパーツールは、フロントエンド開発において欠かせないツールです。 他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。 デベロッパーツールは機能毎にタブで別れています。 まずは使用頻度の高いタブについて簡単に説明をします。 Elements• DOMの確認、編集• DOM要素の変更タイミングにブレイクポイントを設定• styleの確認、編集• hoverなど状態の設定• Console• 任意のJSの実行• JSエラーの確認• Network• 通信内容の確認• Sources• デバッガーの使用• Application• CookieやWeb Storageの確認、編集 なお、タブはドロップアンドドラッグで並び替えが出来ますので、使いやすい順序に並び替えるといいでしょう。 Mac High Sierra• Chrome 67. 3396. 99 ショートカットキー よく使用するショートカットキーについて説明をします。 要素を編集する 要素の内容はダブルクリックすることで編集が可能です。 F2のショートカットキーを使うと、子要素もまとめて編集が出来ますので、複数の箇所を変更したいときは、ショートカットキーを使うといいでしょう。 また、 Deleteキーを押すことで要素を削除することもできます。 マージンやパディング、サイズを確認する 右側の Computedタブを開くと要素自身のサイズや、マージン、パディングを確認することが可能です。 クリックすることで、このまま編集することも可能です。 要素の変更に対してブレイクポイントを貼る 要素のstyleやクラスをJSで変更する処理を書く際に、要素の変更に対してブレイクポイントを使用すると便利です。 要素を右クリックすることで Break onという表示が出てきます。 サブツリーの変更、要素の変更、ノードの削除に対して、ブレイクポイントを設定することが出来ます。 設定したブレイクポイントは、右側の DOM Breakpointsタブで確認が可能です。 ブレイクした場合は、Sourcesタブにフォーカスが移ります。 DOM Breakpointsというチェックボックスにて、オンオフの切り替えが可能です。 styleを編集する 右側の Stylesタブでstyleの編集が可能です。 各カーソルを当てるとチェックボックスが表示されますので、クリックすることでオンオフを切り替えることが出来ます。 Stylesタブにて、他にも以下のようなことが可能です。 Filterに文字を入力すると、style名で絞り込みが出来ます。 :hovをクリックすると、要素をマウスオーバーした状態にすることが出来ます。 cls をクリックすると、クラスを追加することが出来ます。 element. style の欄に自由にstyleを追加することが出来ます。 子要素を一気に展開する 階層が深い要素の場合、1つ1つクリックして要素を展開するのは大変です。 右クリックして、 Expand Recursivelyを実行するといいでしょう。 Consoleタブ JSのエラーやconsole. logを表示する以外に、任意のJSを入力して実行することが出来ます。 関数やプロパティについては、タブで補完が可能です。 JSを実行する際は、ブレイクポイントと併用することが多いです。 他には以下のような使い方が可能です。 左から2番目の丸のボタンでクリアが可能です。 この場合、iframe内でJSを実行できます。 Filterで絞り込みが可能です。 Networkタブ JSや画像など、ページを開いた際に行われた通信を確認することが出来ます。 APIのAjax通信のリクエストやレスポンスも確認することが出来ます。 よく使う機能を紹介します。 左から2番目の丸のアイコンでクリアが出来ます。 漏斗のアイコンでFilterが出来ます。 Disable cacheにチェックを入れるとブラウザキャッシュを無効に出来ます。 通信をクリックをすると、 Headers や Previewのタブが表示されます。 右側の Headersを下にスクロールすることで、リクエストヘッダやレスポンスヘッダ、クエリ文字列の確認が可能です。 Previewでは、JSONなどのAPIレスポンスを整形された状態で確認が可能です。 Sourcesタブ デバッガーを起動することで、JSのデバッグをすることが出来ます。 ミニファイの解除 多くのサービスでは、JSはサイズ減少のためにミニファイされていて、そのままだとデバッグが難しいため、まずはミニファイを解除します。 ここをクリックすると、ミニファイを解除して整形をして表示をしてくれます。 ブレイクポイントの設定 左のツリーからJSファイルを選択し、ファイルの行数部分をクリックすることでブレイクポイントを設定できます。 ブレイクさせた状態にて、変数の値を確認したいことはよくあります。 変数の値を確認するには、以下の方法があります。 代入された変数は、その行の右側に値が表示されるのでそれを見る。 変数にカーソルをあてる。 Watchに変数を追加する(後述)。 Consoleタブに移動して表示したい変数をタイプする。 ステップ実行 ブレイクポイントから1行進めたり、次のブレイクポイントまで進める処理は、ボタンで行うことが出来ます。 ボタンにカーソルを当てると、ショートカットキーが表示されます。 なお、Cookieを編集するなら、というアドオンを使うと便利です。 そのほかの機能 デバイスを切り替える スマホやタブレットなど、他のデバイスのエミュレートも可能です。 デバイスはプルダウンで選択が可能です。 また、一番右の回転ボタンを押すことで、ポートレート 縦 とランドスケープ 横 を切り替えることも出来ます。 orientationchange イベントも発火します。 デバイスの追加 デバイスのプルダウンに、主要なiPhoneやiPadは用意されていますが、他のデバイスを追加したい場合は、デベロッパーツールの右にある Settingsを開き、 Devicesをクリックすることで追加が可能です。 例えば、ライブラリがどのJSファイルによって実行されているかを調査したい場合などに重宝します。 また、Networkタブの虫メガネボタンを押すと、同様に全リソースから検索が出来ます。 こちらは見つかった要素をクリックすると、Networkタブの通信がフォーカスされるのに対して、上記の検索はSourcesタブで開きます。 テーマを黒にする デベロッパーツールのテーマは白ベースがデフォルトですが、黒ベースに切り替えも可能です。 Settingsを開き、PreferencesのThemeで Darkが選択出来ます。 こちらがDarkに切り替えた状態です。 AndroidのChromeをデバッグする AndroidとPCをUSBケーブルでつなぐことで、AndroidのChromeで表示したページをPCのデベロッパーツールでデバッグすることが出来ます。 まずは、Androidの設定に 開発者向けオプションを表示させる必要があります。 以下の手順を実行します。 なお、Androidは端末により操作方法が異なりますので、適宜読み替えて下さい。 設定をタップ• 端末情報をタップ• ソフトウェア情報をタップ• ビルド番号を連打 これで開発者向けオプションが表示されるようになりました。 開発者向けオプションを開き、 USBデバッグをオンにします。 この状態でAndroidにてChromeで任意のページを開き、USBケーブルでPCと接続します。 以下のようにAndroid端末と、Chromeで開いたページのURLが表示されます。 inspectをクリックすることで、デベロッパーツールが起動します。 アプリのビルド時に設定が必要ですが、 WebViewについてもデバッグが可能です。 なお、iPhoneのChromeのデバッグ方法は分かりません。 各種フレームワークのための拡張 拡張機能により、 Reactや Vue. jsなどのフレームワークの開発を支援してくれる機能が追加可能です。

次の