Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developer Consoleを使い倒そう / Use Web Browser DevTools

Developer Consoleを使い倒そう / Use Web Browser DevTools

発表日:2024/08/05(月)
『Progate BAR 学生エンジニア限定 LT会&交流会』にて
( https://progate.connpass.com/event/323831/ )

"Developer Console" と呼んでいたけど
この発表のために調べてみると "DevTools" と書くことが圧倒的に多いとわかって、
いったい私が Developer Console って呼ぶようになってしまったきっかけはなんだったんだろう……と思いました・・・

ハトネコエ

August 05, 2024
Tweet

More Decks by ハトネコエ

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ よこえ • X (Twitter): @yokoe24 • 出張写真撮影のラブグラフCTO (3年前の2021/01入社) •

    Rails, JavaScript, Go とか • 4月からグロービス経営大学院に 入学したので26卒院生です! • ニコニコ閉じててアニメ見てない
  2. ։ൃதDeveloper ConsoleΛ • ほぼいつも開いている • 半分くらいの時間は開いている • ほとんど使っていない • 今回初めて

    Developer Console を 知ります! (当日アンケート結果)ほぼいつも: 8, 半分: 3, ほぼない: 5, 初めて知ります: 1
  3. ։ൃʹ࢖͍ͬͯΔϒϥ΢β͸ʁ • Safari • Chrome • Firefox • Brave •

    Arc • それ以外 (Vivaldi, Opera, Edge...) (当日アンケート結果)Safari: 2, Chrome: 11, Firefox: 4, Brave: 1, Arc: 2, Edge: 1
  4. ͓͢͢Ί͸ Chromium ܥ • Chrome • Brave • Arc •

    Vivaldi • Microsoft Edge • などの Chromium 系のブラウザ
  5. ॆ࣮ͷ Developer Console • Chromium 系の Developer Console は 機能が豊富でとても便利!

    • Firefox も便利で、独自の便利機能が ありますが今回は取り上げません • Safari は iOS の挙動を試したい とき以外はあまりお勧めできず……
  6. Elements λϒ • CSSのスタイルコーディングするときに 役立つ! • React や Vue.js などのコンポーネン

    トが HTML 的にはどう表示されている のか見ることでデバッグに役立つ! • 印刷やスクショのときに役立つ!
  7. ·ͱΊ̍ • このように Developer Console は 情報の宝庫です! • 開発中は、Developer Console

    の なにかしらのタブを並行して見ている くらいの状態になれると、より プロに近付けます!!