開発者ツールに助けられた！

2024/11/18

こんにちは！

京都開発研究所、Webプログラマコースの長期インターン生、松木智哉です！！

今日は本当に開発者ツールに助けられた一日でした！改めて、使い勝手の良さを実感しながら、今まで使ってきた機能を基礎からまとめておきたいと思います。

まず、私が一番よく使う開発者ツールが Elements（エレメンツ）タブです！ここでは、ページのHTMLやCSSを確認することができて、画面上の要素にマウスを合わせながら確認できます。例えば、マウスを合わせた瞬間に、ページ上でもハイライトされて、どの部分がどのHTML要素に対応しているか一目でわかります！！あとは、Styles（スタイル）タブで適用されているCSSもチェックできて、どんなセレクタが使われているかを見ながら、問題のあるスタイルを簡単に見つけられます！これ、特にレイアウトやデザインの修正をするときにとても重宝しています！！

そして、今日特に助かった開発者ツール Console（コンソール）です！JavaScriptのデバッグや動作確認をする時に、本当に欠かせない開発者ツールです！例えば、要素を探すときは

// クラス名で要素を探す

document.querySelector('.field-add.data-table-add');

これで指定したクラスを持つ要素を簡単に探し出せるんです！そして、イベントリスナーを調べたい時も、
// 要素にどんなイベントが設定されているか見れる
getEventListeners(element);
実際に今日、ポップアップの動作を調べているときに、すごく役立ちました！ポップアップの表示・非表示の動作を確認するために、コンソールでイベントリスナーをチェックして、どのイベントが発生しているのかを追うことができました！！
さらに、開発者ツールには Network（ネットワーク）タブもあります！APIとの通信やリクエスト、レスポンスの内容が全部見れます！！特にAPI通信で何か問題が起きた時に、これが役立ちます。
開発者ツールを自分のものにできるようにしっかりと理解を深めていきたいです！
-----------------------------------------------
G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/
G!FIT公式Twitter：https://twitter.com/gfit_gdn
メンバー紹介ページ：https://guardian.jpn.com/member/tomoya_matsuki/

＊COMMENT＊

則岡　えり
更新日：2024-11-19 09:21
＊コメント＊

お疲れ様です。開発者ツールには毎日お世話になっておりますが、使ったことのない機能もたくさんあるので便利な機能がないか調べてみたいと思います。
お疲れ様です。
開発者ツールには毎日お世話になっておりますが、使ったことのない機能もたくさんあるので
便利な機能がないか調べてみたいと思います。
＊コメント＊