Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developer tools表示しておけばネトゲやってても仕事してる感でる

2,093 views

Published on

DMM.Study Night フロントエンド勉強会 #atnd https://atnd.org/events/71568

Published in: Engineering
  • Be the first to comment

Developer tools表示しておけばネトゲやってても仕事してる感でる

  1. 1. Developer tools 表示しとけば ネトゲやってても仕事してる感 でる
  2. 2. 自己紹介 • DMM入社2年目 • フロントエンド周りの経験も2年目 • ゲーム作る係 • ニート期間は1年(もう社歴の方が長いので安心)
  3. 3. 今日しゃべること ネトゲしたいけど仕事してるふりしないとなので DevTools開いとくけど、 急に上司が来た時に慌てないように色々覚えておきたい。
  4. 4. 今日しゃべること • ブレークポイントをいじくってみる • 計測ツールとして使ってみる • 小ネタ(時間あったら)
  5. 5. ブレークポイント
  6. 6. フツーのやつ ポチーってすると止まる奴 これは別にいいでしょ
  7. 7. 条件付き ブレークポイント
  8. 8. なんですかそれ 特定の条件に合致した場合に
 止まるブレークポイント
  9. 9. なんですかそれ 特定の条件に合致した場合に
 止まるブレークポイント ともかくやってみよう
  10. 10. ブレークポイントを 右クリックして 出てきたボックスに コードを書く
  11. 11. ブレークポイントを 右クリックして 出てきたボックスに コードを書く i==5 止まった!
  12. 12. ブレークポイントを 右クリックして 出てきたボックスに コードを書く i==5;console.log(i); 止まらない…
  13. 13. どういうことなのか
  14. 14. 特定の条件に合致した場合に
 止まるブレークポイント ↓ 実行内容がtrueを返したら
 止まるコード挿入ポイント
  15. 15. 特定の条件に合致した場合に
 止まるブレークポイント ↓ 実行内容がtrueを返したら
 止まるコード挿入ポイント 書いてありますな…
  16. 16. 「true返したら止まるよ」としかない… …なんか色々書けそうな気が
  17. 17. 変数の中身を変えてみたり i=5; ループおわんない
  18. 18. jQuery直接つっこんでみる jQueryオブジェクト ちゃんと呼べる!
  19. 19. 非同期通信とか ちゃんと動く!
  20. 20. 割りとなんでも書けそう 実装中の関数をテストしたり console.timeではさんで速度計測とか あとリロードしても消えないの便利
 というかブラウザ落とさない限りタブ消しても生きて る
  21. 21. 通信の ブレークポイント
  22. 22. なんですかそれ ページ内で通信が発生したら止めるブレークポイント まんまですな
  23. 23. 通信発生時にフックして
 ブレークする 何も入力しないと
 Any XHR として非同期通信が発生し たら全部止めてくれる
  24. 24. 特定のドメイン、ポートで絞 り込んで見る 右の例では http://localhost:8000/ へのリクエストを発行して いるので、対象のブレーク ポイントで停止している
  25. 25. URLを入れれば対象が絞られる ↓ 文字列として評価しているぽい(多分 http://localhost:8000/json/hrpk.js へのリクエスト ブレークポイント1:localhost:80 ブレークポイント2:localhost:8000 どっちのブレークポイントでもヒットする 片方あたったらもう片方は無視ということらしい
  26. 26. リクエストの再発行 typeがXHRのリソースは 右クリックからリプレイで きるので! 通信のブレークポイントと 組み合わせて使いましょう!
  27. 27. 計測ツール
  28. 28. フロントエンドの担当者は クレームのフロントエンドになりやすい ※俺調べ(単なる印象かも…)
  29. 29. よくある話 「夜中だけ検索ページが重い」 「スマホだけトップページが重い」 「ページが重い」 「ページが重い」 「ページが重い」
  30. 30. フ、フロント(だけ)のせいじゃねーし!!
 ネットワーク?とかそういうやつのせいかもですし!
  31. 31. とは言え
 調べもしないで何も言えないので Developer toolsに頼る
  32. 32. • Networkパネル • Timelineパネル • Profilesパネル
  33. 33. • Networkパネル
  コンテンツのダウンロード時間
  各リクエストの詳細とか • Timelineパネル
  ダウンロードやレンダリングの時系列を調べる
  パフォーマンス悪いJS/CSSを漁ったりとか • Profilesパネル
  CPUとかメモリの使用量を記録
  34. 34. • Networkパネル
  コンテンツのダウンロード時間
  各リクエストの詳細とか
 →フロント以外のせい要因探したいんで、今回はこれ • Timelineパネル
  ダウンロードやレンダリングの時系列を調べる
  パフォーマンス悪いJS/CSSを漁ったりとか • Profilesパネル
  CPUとかメモリの使用量を記録
  35. 35. とは言うものの、どうしよ…
  36. 36. 通信周りから調べる
 → HARファイルを使ってみる 
 HARって何
 
 ・Http ARchivesの略
 
 ・Webサイトの解析をした結果情報
  (リクエスト数、ページ容量、ロード時間など)を
  記載したファイル
 
 ・中身はJSON
  37. 37. 「夜中だけサイトが重い」
 ↓
 朝・昼・夕・夜など
 各時間帯でHARをとって比較してみる
  38. 38. 「スマホだけサイトが重い」
 ↓
 PCとスマホで分けてHARをとって比較してみる
  39. 39. リソースのリストから 右クリック Copy All as HAR または Save as HAR with Content
  40. 40. リソースのリストから 右クリック Copy All as HAR または Save as HAR with Content 確保出来たけどどうしたもんか…
  41. 41. 比較用ツール HAR Viewer
 https://github.com/janodvarko/ harviewer/
  42. 42. とは言え 毎回手で取るのはダルい
  43. 43. PhantomJSを使います
 http://phantomjs.org/
  44. 44. 公式からDL後 パスを通して実行 $ phantomjs js/netsniff.js http://www.dmm.com/ > dmm.com.har.json
  45. 45. 公式からDL パスを通して実行 $ phantomjs js/netsniff.js http://www.dmm.com/ > dmm.com.har.json あとはcrontabに登録したりで定期実行
  46. 46. 色々みたけど結局どこに手を付ければいいのか…
  47. 47. Auditsパネルを 見ましょう
  48. 48. Auditsパネル • Audit
 【名詞】
 会計検査,(会社などの)検査
 (問題の)審査
 【動詞】
 <会計を>検査する

  49. 49. Webサイトの検査をしてく れるパネル ネットワーク ページパフォーマンス 2方向から検査してくれる Select All と Reload Page… に設定してRun押せばいいでしょ
  50. 50. 目を逸らしてたこといっぱい出てくる… JSまとめろ gzipで送れ キャッシュさせろ 使ってないCSSどうにかしろ                 などなど…
  51. 51. Auditsパネルで言われてることなんて知ってるよ! もうやってるし!どうしたらいいんだよ!
  52. 52. がんばりましょう! ありがとうございました!!!

×