Code School - Discover DevTools #2

• Local modifications (right click)
  • Diff with Time stamp
  • save file
  • apply original content (diffの分を元に戻す)
  • revert (元に戻す)
• Console
  • console.log(console)
    • memory, profiles, assert
  • console.assert(1 == 2) => Assertion failed
  • console.warn("aaa")
• Sources
  • show js errors
  • 左下の [>三] みたいなアイコンでもConsole開く
• inspect
  • $0, $1, $2 (select history)
  • $('.hoge')[1].remove()
• Pretty print minified js
  • Source 下の一時停止みたいなアイコン
• breakpoint
  • 停止中にvalueが分かる
  • 再生のボタン
  • Step over
  • Step into
  • Step out
  • toggle All breakpoints
• エラーの直前にbreakpointで、ソース修正、再生
• Resources
  • Local storage -> Key Value修正できる
• Network
  • Status, Initiator, Timeline
  • 304 -> local cached copy
  • Shift reload (強制読み込み)
  • Headers, Preview, Response etc.
  • 停止のアイコン -> clear current waterfall (Networkの情報をクリア)
• Cacheを無効化する方法
  • 右下のギアアイコンから Disable Cacheをチェック
• Page Speed Insights (Chrome extension)
• Optimization
  • minify js file
  • put multiple file to one file
• Google Clousure Tools
  • another website clousuure-compiler.appspot.com
    • URLを貼り付け
    • save app-min.js
• Optimize stylesheet order
  • link cssを上に、script jsを下にするだけでも違うらしい
  • script async
• Image size
  • アイコンとかjpgよりpngの方がいい
• Profiles
  • Timeline -> Frames
    • 60fps (frame per seconds)
  • Events, Memoryもある
  • 下のメニュー
    • Record ボタンで開始
    • Loading, Scripting, Rendering, Painting
• CPU Profiling
  • Profiles -> Collect JS -> Start
• Memory leak
  • TImeline -> Record -> Memory tab
  • Progiles -> Heap Snapshot
    • Snapshot -> 下のボタン Summary, Comparison ...
    • Comparisonの横が比較対象
    • Detatched DOM tree (jsでinput要素をダイナミックに操作しているところが問題)
• Auditsやってない
  • みたらいろいろ改善点を挙げてくれるみたい

今までほぼElements, Consoleがほとんどで、たまにResources, Networkくらいしか使ってなかった

DevTools courseのためのChrome extensionインストールした
途中Console上にたまに Hint: とか出てきた

console.assert の使い道が分からない。まとめた処理を一気に実行してテストとかできるのかな

breakpointのあたりは課題の反応が微妙だった。Skip押した

TimelineのRecord, CPU Profilingは良かったなあ

さすがSponsored by Google

CodeSchoolの構成は本当に感心させられる。
ただ時間はそれなりにかかる。
時間はかかって当たり前。

あと時間余計にかかっても、メモ取ると消化度合いが上がると思う。

The Breakpoint - YouTube
Watch It Later 長い