こんにちは。2015年に新卒で入社したGMOアドマーケティングのチェと申します。
約1年間、媒体開発部グループでFuelphpを利用しての「yomerumo」の開発を行い、今年の4月1日にアドクラウドグループに移動しました。これからrubyという言語を身に付けて「TAXEL byGMO」の開発をすることになりました。まだ未熟ですが、頑張りますのでよろしくお願いいたします！
自分のように新卒で入社した方々にご参考になる内容を共有したいと思います！
よろしくお願いいたします！
今回は「chrome develop tools」で主に使われている機能を説明します。
■虫眼鏡（要素を確認するアイコンで虫眼鏡と呼ばれています。）
->虫眼鏡アイコンを選択し、マウスでウェブページをクリックしたら要素を見れます。(適応されているstyleなどの確認ができます。)
■デバイスモード（デバイス別の画面を見れます。デバイスモードと呼ばれています。）
->スマートフォンなどの表示を確認するためのエミュレーション・ウィンドウの表示
■Elmentsパネル
Elementパネルでは、要素を追加したり削除したり編集することができます。
■構成
1. WebページのHTML要素をツリービュー形式で表示します。
2. 虫眼鏡で選択した要素のstyle情報が表示されます。
3. 要素の階層が表示されます。
■操作方法
マウスで要素を右クリックすると操作できます。
Add AttributeやEdit as HTMLなど主に利用されている機能を説明します。
■Add Attribute及びEdit Attribute
->マウスで編集したい要素を右クリックし、「Add AttributeやEdit Attribute」を選択します。
-> 属性を追加及び編集します。
■Edit as HTML
->マウスで編集したい要素を右クリックし、「Edit as HTML」を選択します。
->タグを書いたり、編集したりすることができます。
その他にもHide Element（ 要素を隠す）Delete Element（要素を削除する）のもあります。
■Elementパネルでは、要素の操作だけではなく要素のStyleを編集できます。
（すぐ画面に適応されます。）
->ウェブページ上でstyleを確認したい要素を虫眼鏡機能を利用して選択します。
->styleを確認します。
■チェックボックスを利用したstyleの適応及び解除
->操作したいstyleをチェックボックスで適応及び解除できます。
■値の編集
->マウスで編集したいstyleをダブルクリックします。
->値を入力します。
Elementsパネルの機能はこれだけではありません。
■Computed
最終的に要素に適用されたスタイルを確認できます。
->Computed画面にあるShow allというチェックボックスをcheckすると継承されたスタイルも含めて確認できます。
■EventListeners
イベントを確認できます。
■DOM Breakpoints
ブレークポイント確認できます。（要素が変更されるタイミングでスクリプトをデバッグしたい時）
Dom breakpointsは以下の3つを設定できます。
■Subtree modifications : 要素が変更されたらbreak
■Attributes modifications:要素の属性が変更されたらbreak
■Node removal: 要素が削除されたらbreak
■Attributes modifications(3つの中で1つを例として説明します)
->breakpointを設定したい要素を右クリックします。
->breakpointの種類を選択します。 例）Attributes modifications
-> 検索欄に「嵐」というキーワードを入力します。
-> そうしますと、要素の属性が変更されたので(Attributes modifications)Breakします。
■Properties
要素のpropertiesを確認できます。
■Networkパネル
1.filter
->ファイルを絞り込むことができます。
2. status : HTTPステータス
3. initiator: ファイルを呼び出す起点
4. time: requestからresponseまでかかった時間やdownloadにかかった時間
->マウスで青いバーをクリックすると、詳しくを確認できます。
そして、ファイルをマウスで選択すると「header情報」や「preview」(イメージの場合はイメージが表示されます。)などの詳しくを見れます。
■Timelineパネル
Timelineパネルは、UIのパフォーマンスを計測して、チューニングするポイントを探し出すための機能です。
->虫眼鏡の下にある「●」を押しますとRecordが始まります。(ボタン色：黒->赤)
->Recordを中止したい場合は赤色になった「●」ボタンを再度クリックします。（ボタン色：赤->黒）
->Recordを中止すると自動的にパフォーマンスを計測した画面が表示されます。
時間がかかっている処理を特定し、チューニングを行います。
その外にもMemory利用量をみれます。（memory leakなどを確認できます。）
■profilesパネル
CPU利用率やMemory量などの詳しくを確認できます。
->Startというボタンを押しますとrecordが始まります。
->Stopボタンを押すとCPU利用率やMemory量を分析した画面が自動に表示されます。
■prefileの機能は3つがあります。
■Collect Javascript CPU Profile
1.ビュー切り替え: Chart、Heavy、Treeがあります
2.選択された関数にフォーカスして確認
3. 関数単体のCPU使用率
4.関数の中から呼び出している関数の時間を含めた時間
■Take Heap Snapshot
1. クラス名
2.DOMツリールートからの距離
3.オブジェクトの数
4.オブジェクト単体のメモリ使用量
5.オブジェクトとオブジェクトが参照しているオブジェクトも含めた使用量
-> Retainersメニューでは、詳しくを見れます。
■Record Heap Allocations
->グレーのバーを操作することで、確認したい特定の時間を選択できます。
->設定したバーの通りに詳しくを確認できます。
3-5. resourceパネル
cookie、sessionなどのデータを確認できます。
■Frames: HTML、CSSなどのファイル
■ Web SQL: Web SQL Databaseのデータベース
■ IndexedDB: Indexed Databaseのデータベース
■ Local Storage:localStorageのデータ
■ Session Storage: sessionStorageのデータ
■ Cookies:保存されているクッキー
■ Application Cache: Application Cacheでキャッシュファイル
■ aduitsパネル
一言で助言してくれる機能です。
->runボタンを押すだけで下の画面のように検証の結果が自動に表示されます。
■設定（実行前）
■結果
■sourceパネル
SourcesパネルはJavaScriptのコードなどをデバッグできます。(breakpointを追加することでデバッグすることができます。)
->breakpointを設定したい部分に右クリックします。
->Breakさせる条件を書きます。
(ここではRATEという変数が2（値）になるとbreakさせます。)
->確認します。
他にイベントにもbreakpointを設定することもできます。ex)マウスで画面をクリックしたときbreakさせる。
■consoleパネル
ログ表示、DOM操作などさまざまな操作ができます。
->console上で、コマンドを入力することで利用できます。
■まとめ
自分としてはchrome develop toolsを前から使ってはいましたが、他に便利な機能がもっとあったのを今回を勉強のおかげで知ることになりました。
これから機会があれば前よりchrome develop toolsをもっと活用しながら開発していきたいと思っています。
未熟な日本語と文書ですが、ご指摘があればよろしくお願いいたします！
