「WEB+DB PRESS Vol.89」読みました。(2017年16冊目)I read "WEB + DB PRESS Vol.89". (16th in 2017)

WEB+DB PRESS Vol.89

・感想

ChromeDevToolを使いこなしたく読んでみました。

感想としては、自分でWebサイトを作りながらChromeDevToolを使ってみるのが一番キャッチアップが速いと思います。

■ChromeDevToolの起動方法
Win「Ctrl + option + I」
Mac「Command　＋　Option　＋　I」

■コンポーネントとその概要
◇Element・・・WebページのHTML構造を確認
◇NetWork・・・ネットワーク処理の流れ
◇Sources・・・ロードされたリソースJSなど
◇TimeLine・・・ブラウザ内部のイベンドの詳細を時系列で確認できる
◇Profiles・・・JavaScriptによるCPUの実行時間やメモリの使用状況を解析できる
◇Resoutces・・・WebStorageやCookieなどの保存データを確認できる
◇Audits・・・　パフォーマンスやネットワーク利用に関して規定をチェックできる
◇Console・・・ログを表示したり、実行中のWebページで任意のスクリプトを実行したりできる

■「Element」でできること
・要素のHTMLを直接書き換え
・要素をドラッグやコピー&ペーストで移動
・要素に適用されているCSSの書き換え
・カラーピッカーでお手軽に色の変更
・イージングのベジェ曲線をGUIで調整
・XMLHttpRequest
・ログのクリアとフィルタリング

■「NetWork」処理最適化の3原則
・データの転送サイズをなるべく小さくすること
・データの転送回数をなるべく小さくすること
・データの転送距離をなるべく小さくすること

■「NetWork」便利機能
・キャッシュとCookieを削除する
・キャッシュを無効化する
・HARをエクスポートする
・リクエストをｃURL形式でコピーする
・XMLHttpRequestをリプレイする

■「Profiles」概要
・Collect　JavaScript　CPU　Profile
→JavaScriptの実行にかかった時間を解析する
・Take Heap SnapShot
→ヒープ領域のスナップショットを取り、存在しているDOMノードや
JavaScriptのオブジェクトが占めているメモリの状態を解析する
・Record Heap Allocations
→JavaScriptのオブジェクトがヒープ領域に割り当てられるときにかかった時間を
計測する

・Impression

I wanted to use ChromeDevTool and read it.

As impressions, I think that catching up is the fastest thing to try using ChromeDevTool while making your own website.

■ How to start ChromeDevTool
Win "Ctrl + Option + I"
Mac "Command + Option + I"

■ Components and their overview
◇ Element · · · Check the HTML structure of the web page
◇ NetWork · · · Flow of network processing
◇ Sources · · · Loaded resources JS etc.
◇ TimeLine · · · You can check the details of the event inside the browser in chronological order
◇ Profiles · · · It is possible to analyze CPU execution time and memory use situation by JavaScript
◇ Resoutces · · · You can check stored data such as WebStorage and Cookie
◇ Audits · · · You can check the regulations regarding performance and network use
◇ Console · · · It is possible to display logs and execute arbitrary scripts on a running web page

What you can do with "Element"
· Rewrite element HTML directly
· Drag elements and copy & paste
· Renewing the CSS applied to the element
· Color Picker makes it easy to change color
· Adjusting easing Bezier curve with GUI
· XMLHttpRequest
· Clear log and filter

■ Three principles of "NetWork" processing optimization
· Reduce data transfer size as much as possible
· Reduce the number of data transfers as much as possible
· Reduce data transfer distance as much as possible

■ "NetWork" useful function
· Delete cache and cookies
· Invalidate the cache
· Export HAR
· Copy the request in cURL format
· Replay XMLHttpRequest

■ Profiles Overview
· Collect JavaScript CPU Profile
→ Analyze the time taken to execute JavaScript
· Take Heap SnapShot
→ Takes a snapshot of the heap area and checks for existing DOM nodes
Analyze the state of memory occupied by JavaScript objects
· Record Heap Allocations
→ The time taken when JavaScript objects are allocated to the heap area
measure