Dev tools introduction

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

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

WordCamp おつかれさまでした

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dev tools introduction

More Related Content

What's hot (20)

Similar to Dev tools introduction (20)

More from Ryu Shindo (16)

Dev tools introduction