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

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

2. 自己紹介
• DMM入社2年目
• フロントエンド周りの経験も2年目
• ゲーム作る係
• ニート期間は1年（もう社歴の方が長いので安心）

3. 今日しゃべること
ネトゲしたいけど仕事してるふりしないとなので
DevTools開いとくけど、
急に上司が来た時に慌てないように色々覚えておきたい。

4. 今日しゃべること
• ブレークポイントをいじくってみる
• 計測ツールとして使ってみる
• 小ネタ（時間あったら）

5. ブレークポイント

6. フツーのやつ
ポチーってすると止まる奴
これは別にいいでしょ

7. 条件付き
ブレークポイント

8. なんですかそれ
特定の条件に合致した場合に
止まるブレークポイント

9. なんですかそれ
特定の条件に合致した場合に
止まるブレークポイント
ともかくやってみよう

10. ブレークポイントを
右クリックして
出てきたボックスに
コードを書く

11. ブレークポイントを
右クリックして
出てきたボックスに
コードを書く
i==5
止まった！

12. ブレークポイントを
右クリックして
出てきたボックスに
コードを書く
i==5;console.log(i);
止まらない…

13. どういうことなのか

14. 特定の条件に合致した場合に
止まるブレークポイント
↓
実行内容がtrueを返したら
止まるコード挿入ポイント

15. 特定の条件に合致した場合に
止まるブレークポイント
↓
実行内容がtrueを返したら
止まるコード挿入ポイント
書いてありますな…

16. 「true返したら止まるよ」としかない…
…なんか色々書けそうな気が

17. 変数の中身を変えてみたり
i=5;
ループおわんない

18. jQuery直接つっこんでみる
jQueryオブジェクト
ちゃんと呼べる！

19. 非同期通信とか
ちゃんと動く！

20. 割りとなんでも書けそう
実装中の関数をテストしたり
console.timeではさんで速度計測とか
あとリロードしても消えないの便利
というかブラウザ落とさない限りタブ消しても生きて
る

21. 通信の
ブレークポイント

22. なんですかそれ
ページ内で通信が発生したら止めるブレークポイント
まんまですな

23. 通信発生時にフックして
ブレークする
何も入力しないと
Any XHR
として非同期通信が発生し
たら全部止めてくれる

24. 特定のドメイン、ポートで絞
り込んで見る
右の例では
http://localhost:8000/
へのリクエストを発行して
いるので、対象のブレーク
ポイントで停止している

25. URLを入れれば対象が絞られる
↓
文字列として評価しているぽい（多分
http://localhost:8000/json/hrpk.js
へのリクエスト
ブレークポイント1：localhost:80
ブレークポイント２：localhost:8000
どっちのブレークポイントでもヒットする
片方あたったらもう片方は無視ということらしい

26. リクエストの再発行
typeがXHRのリソースは
右クリックからリプレイで
きるので！
通信のブレークポイントと
組み合わせて使いましょう！

27. 計測ツール

28. フロントエンドの担当者は
クレームのフロントエンドになりやすい
※俺調べ（単なる印象かも…）

29. よくある話
「夜中だけ検索ページが重い」
「スマホだけトップページが重い」
「ページが重い」
「ページが重い」
「ページが重い」

30. フ、フロント（だけ）のせいじゃねーし！！
ネットワーク?とかそういうやつのせいかもですし！

31. とは言え
調べもしないで何も言えないので
Developer toolsに頼る

32. • Networkパネル
• Timelineパネル
• Profilesパネル

33. • Networkパネル
コンテンツのダウンロード時間
各リクエストの詳細とか
• Timelineパネル
ダウンロードやレンダリングの時系列を調べる
パフォーマンス悪いJS/CSSを漁ったりとか
• Profilesパネル
CPUとかメモリの使用量を記録

34. • Networkパネル
コンテンツのダウンロード時間
各リクエストの詳細とか
→フロント以外のせい要因探したいんで、今回はこれ
• Timelineパネル
ダウンロードやレンダリングの時系列を調べる
パフォーマンス悪いJS/CSSを漁ったりとか
• Profilesパネル
CPUとかメモリの使用量を記録

35. とは言うものの、どうしよ…

36. 通信周りから調べる
→ HARファイルを使ってみる
HARって何
・Http ARchivesの略
・Webサイトの解析をした結果情報
（リクエスト数、ページ容量、ロード時間など）を
記載したファイル
・中身はJSON

37. 「夜中だけサイトが重い」
↓
朝・昼・夕・夜など
各時間帯でHARをとって比較してみる

38. 「スマホだけサイトが重い」
↓
PCとスマホで分けてHARをとって比較してみる

39. リソースのリストから
右クリック
Copy All as HAR
または
Save as HAR with
Content

40. リソースのリストから
右クリック
Copy All as HAR
または
Save as HAR with
Content
確保出来たけどどうしたもんか…

41. 比較用ツール
HAR Viewer
https://github.com/janodvarko/
harviewer/

42. とは言え
毎回手で取るのはダルい

43. PhantomJSを使います
http://phantomjs.org/

44. 公式からDL後
パスを通して実行
$ phantomjs js/netsniff.js http://www.dmm.com/
> dmm.com.har.json

45. 公式からDL
パスを通して実行
$ phantomjs js/netsniff.js http://www.dmm.com/
> dmm.com.har.json
あとはcrontabに登録したりで定期実行

46. 色々みたけど結局どこに手を付ければいいのか…

47. Auditsパネルを
見ましょう

48. Auditsパネル
• Audit
【名詞】
会計検査,(会社などの)検査
(問題の)審査
【動詞】
<会計を>検査する

49. Webサイトの検査をしてく
れるパネル
ネットワーク
ページパフォーマンス
２方向から検査してくれる
Select All と Reload Page…
に設定してRun押せばいいでしょ

50. 目を逸らしてたこといっぱい出てくる…
JSまとめろ
gzipで送れ
キャッシュさせろ
使ってないCSSどうにかしろ
などなど…

51. Auditsパネルで言われてることなんて知ってるよ！
もうやってるし！どうしたらいいんだよ！

52. がんばりましょう！
ありがとうございました！！！