2016年4月11日0件のコメントこんにちは。2015年に新卒で入社したGMOアドマーケティングのチェと申します。約1年間、媒体開発部グループでFuelphpを利用しての「yomerumo」の開発を行い、今年の4月1日にアドクラウドグループに移動しました。byGMO」の開発をすることになりました。tools」で主に使われている機能を説明します。■虫眼鏡(要素を確認するアイコンで虫眼鏡と呼ばれています。)->虫眼鏡アイコンを選択し、マウスでウェブページをクリックしたら要素を見れます。(適応されているstyleなどの確認ができます。)■デバイスモード(デバイス別の画面を見れます。デバイスモードと呼ばれています。■ElmentsパネルElementパネルでは、要素を追加したり削除したり編集することができます。WebページのHTML要素をツリービュー形式で表示します。虫眼鏡で選択した要素のstyle情報が表示されます。要素の階層が表示されます。■操作方法マウスで要素を右クリックすると操作できます。HTMLなど主に利用されている機能を説明します。Attribute」を選択します。属性を追加及び編集します。HTML」を選択します。->タグを書いたり、編集したりすることができます。Element(要素を削除する)のもあります。■Elementパネルでは、要素の操作だけではなく要素のStyleを編集できます。(すぐ画面に適応されます。)->ウェブページ上でstyleを確認したい要素を虫眼鏡機能を利用して選択します。->styleを確認します。■チェックボックスを利用したstyleの適応及び解除->操作したいstyleをチェックボックスで適応及び解除できます。■値の編集->マウスで編集したいstyleをダブルクリックします。Elementsパネルの機能はこれだけではありません。■Computed最終的に要素に適用されたスタイルを確認できます。allというチェックボックスをcheckすると継承されたスタイルも含めて確認できます。■EventListenersイベントを確認できます。Breakpointsブレークポイント確認できます。breakpointsは以下の3つを設定できます。modifications(3つの中で1つを例として説明します)->breakpointを設定したい要素を右クリックします。->breakpointの種類を選択します。検索欄に「嵐」というキーワードを入力します。modifications)Breakします。■Properties要素のpropertiesを確認できます。■Networkパネル1.filter->ファイルを絞り込むことができます。requestからresponseまでかかった時間やdownloadにかかった時間->マウスで青いバーをクリックすると、詳しくを確認できます。ファイルをマウスで選択すると「header情報」や「preview」(イメージの場合はイメージが表示されます。)などの詳しくを見れます。■TimelineパネルTimelineパネルは、UIのパフォーマンスを計測して、チューニングするポイントを探し出すための機能です。->虫眼鏡の下にある「●」を押しますとRecordが始まります。(ボタン色:黒->赤)->Recordを中止したい場合は赤色になった「●」ボタンを再度クリックします。(ボタン色:赤->黒)->Recordを中止すると自動的にパフォーマンスを計測した画面が表示されます。時間がかかっている処理を特定し、チューニングを行います。その外にもMemory利用量をみれます。leakなどを確認できます。)■profilesパネルCPU利用率やMemory量などの詳しくを確認できます。->Startというボタンを押しますとrecordが始まります。->Stopボタンを押すとCPU利用率やMemory量を分析した画面が自動に表示されます。■prefileの機能は3つがあります。Retainersメニューでは、詳しくを見れます。Allocations->グレーのバーを操作することで、確認したい特定の時間を選択できます。->設定したバーの通りに詳しくを確認できます。resourceパネルcookie、sessionなどのデータを確認できます。aduitsパネル一言で助言してくれる機能です。->runボタンを押すだけで下の画面のように検証の結果が自動に表示されます。■sourceパネルSourcesパネルはJavaScriptのコードなどをデバッグできます。(breakpointを追加することでデバッグすることができます。)->breakpointを設定したい部分に右クリックします。->Breakさせる条件を書きます。(ここではRATEという変数が2(値)になるとbreakさせます。他にイベントにもbreakpointを設定することもできます。ex)マウスで画面をクリックしたときbreakさせる。■consoleパネルログ表示、DOM操作などさまざまな操作ができます。->console上で、コマンドを入力することで利用できます。toolsを前から使ってはいましたが、他に便利な機能がもっとあったのを今回を勉強のおかげで知ることになりました。toolsをもっと活用しながら開発していきたいと思っています。@gmoap_engineer本ブログで発信される情報は、各エンジニア個人の見解であり、弊社の公式見解ではありません。本ブログに掲載、引用等をしている商品またはサービス等の名称は、各社の商標または登録商標です。その他の事項について一切責任を負いかねます。発表する情報には注意を払っておりますが、公式発表、見解については、弊社WEBサイトおよびプレスリリースなどをご確認ください。GMOインターネットグループにおけるソーシャルメディア運用ポリシーについては次のページをご確認ください。本ブログに掲載のあるソフトウェアのダウンロードは自己責任で御願い致します。ソフトウェアのダウンロードの結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。本ブログに掲載のあるソフトウェアを扱う際は、各ソフトウェアの公式リファレンスを参照のもとご使用下さい。ソフトウェアの実行の結果、ご利用者に何らかの損失・損害が生じたといえども、当社ではその責任を負いかねます。