2019年4月27日　WordPressもくもく勉強会＠日本橋でのセッション資料です。 Chrome Dev Toolsの初歩的な使い方について解説します。

1. はじめてのDevTools
2019/4/27
@WordPress もくもく勉強会@日本橋#28
Ryunosuke Shindo

2. 自己紹介
進藤 龍之介
エンジニア／日本Androidの会
2018年 Web Working Group PWA 集中勉強会主催
WordPress プラグイン「PWA for WordPress」開発
オンライン診療サービス「YaDoc」開発に参加
Twitter @ryu_compin
Fb ryushindo

3. WordCamp おつかれさまでした

4. 今日は Chrome Dev Tools の話
超初心者向けです。

5. Chrome のアップデートけっこう早い

6. Chrome Dev Tools
使ったことありますか？
どれぐらい使ってますか？

7. 何に使うのか
• HTML/CSS の要素、パラメーター、実際のレイアウトとの関連
性のチェック
• ソースコード
• JavaScript のデバッグ
• 性能チェック（ネットワーク速度や処理速度）
• Audit（性能やSEO、PWA対応などの総合チェック）
• Application（PWA）
• などなど

8. こんなとき
表示がうまくいかない
へんなスペースが入る
思ったレイアウトにならない
ボタンが応答しない
などの表示トラブルは、アドバイザーに聞く前にチェックしてお
くと、かなりスムーズに解決できるようになります！！

9. Chrome に普通についてます
画面右上の３つの点
→その他のツール（L）
→デベロッパーツール（D）
または
Opt+Cmd+I (Mac)
Ctrl+Shift+I (Win)

10. こんな画面

11. マルチディスプレイとかあるなら切り離
しちゃうと楽です

12. ここからは実際の画面で
すごいぞDev Tools

13. 今日やることMenu
• HTML/CSS要素をチェック
セレクターで要素のソース部分に簡単アクセス
CSS チェックしてみる
CSS のパラメーターを変えて、実際の表示の変化を見る
スマホ画面に切り替えてみる（レスポンシブ確認）
• JavaScript のエラー出てないかな？
• Network
• Audit

14. おまけ
スマホもいける！
chrome://inspect
スマホを PC につないでやってみよう

15. 他のブラウザでも
Firefox, Edge, Safari などのブラウザには同じようなツールが用意
されています。
自分の使いやすいツール使ってもOK。
特定のブラウザで表示の不具合などがあったら、そのブラウザの
ツールを使って解析しましょう。

16. もっと知りたい人は
みんなどうしてるの？という疑問にはけっこう解があります。
まわりの詳しそうな人はだいたい知ってるので聞いてみてください。
もちろん僕でも。

17. 最後に告知！
日本 Android の会
ABC 2019 Spring
2019/5/26
@東海大学高輪キャンパス
今年もモバイルWebトラックをやります！
PWA についてもっと掘り下げたい方、どっぷり半日PWAの話が聞けま
す！
ぜひお越しください。
https://japan-android-group.connpass.com/event/125928/

18. ありがとうございました。
PWA for WordPress ぜひお試しください
https://wordpress.org/plugins/pwa4wp/