Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Α͑͜ Developer Console を使い倒そう!! @yokoe24
Slide 2
Slide 2 text
ࣗݾհ よこえ • X (Twitter): @yokoe24 • 出張写真撮影のラブグラフCTO (3年前の2021/01入社) • Rails, JavaScript, Go とか • 4月からグロービス経営大学院に 入学したので26卒院生です! • ニコニコ閉じててアニメ見てない
Slide 3
Slide 3 text
ࠓ͢ͷ ͜Εʂ →
Slide 4
Slide 4 text
̍ まずアンケート
Slide 5
Slide 5 text
։ൃதDeveloper ConsoleΛ • ほぼいつも開いている • 半分くらいの時間は開いている • ほとんど使っていない • 今回初めて Developer Console を 知ります! (当日アンケート結果)ほぼいつも: 8, 半分: 3, ほぼない: 5, 初めて知ります: 1
Slide 6
Slide 6 text
։ൃʹ͍ͬͯΔϒϥβʁ • Safari • Chrome • Firefox • Brave • Arc • それ以外 (Vivaldi, Opera, Edge...) (当日アンケート結果)Safari: 2, Chrome: 11, Firefox: 4, Brave: 1, Arc: 2, Edge: 1
Slide 7
Slide 7 text
͓͢͢Ί Chromium ܥ • Chrome • Brave • Arc • Vivaldi • Microsoft Edge • などの Chromium 系のブラウザ
Slide 8
Slide 8 text
ॆ࣮ͷ Developer Console • Chromium 系の Developer Console は 機能が豊富でとても便利! • Firefox も便利で、独自の便利機能が ありますが今回は取り上げません • Safari は iOS の挙動を試したい とき以外はあまりお勧めできず……
Slide 9
Slide 9 text
̎ Elements タブ
Slide 10
Slide 10 text
Elements λϒ • CSSのスタイルコーディングするときに 役立つ! • React や Vue.js などのコンポーネン トが HTML 的にはどう表示されている のか見ることでデバッグに役立つ! • 印刷やスクショのときに役立つ!
Slide 11
Slide 11 text
ελΠϧίʔσΟϯά
Slide 12
Slide 12 text
ελΠϧίʔσΟϯά 1. 気になる箇所を選択 2. letter-spacing などを調整 3. ほどよい設定値を見つけていく 4. それに合わせてCSSを更新
Slide 13
Slide 13 text
ϨεϙϯγϒରԠ
Slide 14
Slide 14 text
ϨεϙϯγϒରԠ • ボタン一発でスマホ・PCの見た目に すぐに切り替えが可能! • それだけでなく、Developer Console との境界の位置をいじることで、 特定の横幅のときに起こるデザイン崩 れを見つけられる!
Slide 15
Slide 15 text
ҹεΫγϣʹཱͭ • 印刷やスクショが見やすくなるよう 不要なコンポーネントを削除すること も Developer Console からおこなえ る
Slide 16
Slide 16 text
σόοάʹཱͭ • HTMLバリデーションと サーバーバリデーションの両方が かかっている場合に、 あえて input タグの required 要素 を消すことなどでサーバーバリデー ションの挙動を見ることもできる
Slide 17
Slide 17 text
̏ Console タブ
Slide 18
Slide 18 text
Console λϒ • JavaScript のデバッグに役立つ! • JavaScript のちょっとした挙動の確認 に役立つ!
Slide 19
Slide 19 text
JavaScript ͷσόοά • デバッグの基本はログ出力! • メソッドの途中で、変数にどんな値が 入っているのか確認するために console.log(hensuu); など書けば、Console タブに変数の値 が出てくる!
Slide 20
Slide 20 text
ͪΐͬͱͨ͠ڍಈ֬ೝ • 「JavaScript Playground」などで 検索をしなくても、 F12キーで Developer Console を呼び 出すだけで、JavaScript の挙動確認が おこなえる!
Slide 21
Slide 21 text
ͪΐͬͱͨ͠ڍಈ֬ೝ
Slide 22
Slide 22 text
̐ Network タブ
Slide 23
Slide 23 text
Network λϒ • ブラウザキャッシュを無効化できる • サイトが開くまでの速度を確認できる • ページ表示のためにどれだけユーザー に通信を発生させているかを見られる • APIリクエストの実行回数や速度、失敗 した際の原因を探れる
Slide 24
Slide 24 text
ϒϥβΩϟογϡແޮԽ
Slide 25
Slide 25 text
ϒϥβΩϟογϡແޮԽ • 「Disable cache」のチェックは 必ず付けましょう! • これによって、ブラウザキャッシュが 働くことを抑制でき、APIリクエストを スキップするなどが起きにくくなりま す
Slide 26
Slide 26 text
αΠτͷ֬ೝ
Slide 27
Slide 27 text
αΠτͷ֬ೝ • サイトが開かれるまでの速度を確認で きます。これに2秒以上かかるような ページは要注意です • ページ速度の改善を目指す場合は、 Before/After それぞれの速度を取得 し、成果を発表できるように!
Slide 28
Slide 28 text
௨৴શମͷ ֬ೝ
Slide 29
Slide 29 text
௨৴શମͷ֬ೝ • 速度だけでなく、 全体的にどのくらいのファイルサイズ の通信がおこなわれているかもチェッ クしましょう • 5MBもあるような画像がいくつも通信さ れていないでしょうか?
Slide 30
Slide 30 text
APIϦΫΤετͷ֬ೝ • React や Vue.js の実装不備で、 APIリクエストが実装者の想定よりも多 い回数おこなわれている場合がよくあ ります • Network タブをしっかり監視すること で、適正かを確認できます
Slide 31
Slide 31 text
̑ まとめ!!
Slide 32
Slide 32 text
·ͱΊ̍ • このように Developer Console は 情報の宝庫です! • 開発中は、Developer Console の なにかしらのタブを並行して見ている くらいの状態になれると、より プロに近付けます!!
Slide 33
Slide 33 text
·ͱΊ̎ • 今回は書きませんでしたが Webアプリケーションのサーバーログ なんかも宝の山です! • データをしっかり確認することで、 強いエンジニアになりましょう!!