コーディングのお供 Google Chrome 開発者ツールを使いこなそう！

2023年10月に開かれた、Beans College内イベントの資料です。
Google Chrome 開発者ツールの基本の使い方から、あまり知られていないような機能まで紹介！

※すべてのスライドをご覧いただくには、Beans Collegeにご入会する必要があります

Transcript

1. コーディングのお供 Google Chrome 開発者ツールを使いこなそう！ Beans College 月イチ勉強会 [10月]
2. index gd 開発者ツールの基本と操作…………………………………g Pd いろいろなパネル……………………………………………6 sd こんな困りごとありませんか？……………………………1& 0d スタイルが適用されていないときのチェックリスト……2P d 開発者ツールのアクセシビリティ機能……………………2É &d 他ブラウザの開発者ツール…………………………………32
3. 1. 開発者ツールの基本と操作
4. 開発者ツールとは 1 ブラウザに搭載されている、Web開発を助ける ためのツール。Webページの「中身」である HTML、CSS、JavaScriptを確認できることをは じめ、色々な機能があります。 このスライドでは、Google Chromeの開発者 ツール（デベロッパーツール、DevTools）の各 種機能を紹介します。
5. 開発者ツールを立ち上げる 2 ショートカットキー Win [Ctrl] + [Alt] + [I] Mac [command] + [option] + [I] マウス操作 検証したい箇所で「右クリック」→「検証」
6. 開発者ツールの日本語化 3 右上の歯車アイコンをクリック Preferencesの「Language」を選択 「Japanese - 日本語」、または最上 部にある「Browser UI language」 を選びます 開発者ツールが「英語」表示になっている場合、日本語化しておきましょう。
7. 表示サイズの拡大・縮小 4 初期設定ではやや文字サイズやUIサイズが小さいので、拡大しておくとよいでしょう。 拡大 Win [Ctrl] + [+] Mac [command] + [^] 「^」はJISキーボードでは「¥」の左隣。 縮小 Win [Ctrl] + [-] Mac [command] + [-]
8. 検査（ページ内の要素を選択） 5 Webページの要素のタグやスタイルを確認する には、「検査」を利用します。 Webページ内の各要素にマウスホバーした際 に、その要素のmarginがオレンジ、paddingが 緑、要素の高さ・幅が青、borderが黄色で確認 できます。 また、「display: flex;」が適用されている箇所 には、点線の枠が表示されます。
9. デバイスモードを立ち上げる 6 開発者ツールの左上にある、ラップトップ PCとモバイルを模したアイコンをクリック します。 指定の幅ではどんな表示になるのかを確認 でき、右や下のハンドルで幅・高さを調整 できます。 ご入会後の特典スライドです
10. 2. いろいろなパネル
11. 「要素」・「スタイル」パネル 7 基本の画面が「要素」パネルです。 要素パネルには、右側に「スタイ ル」などのパネルが表示されます （レイアウトによっては下側）。 「スタイル」パネルでは、各ルール セットに対応したファイルとその行 数が右に表示され、その箇所をク リックすることで「ソース」パネル の該当の行数が開きます。 入れ子になっている要素の左側には右向き三角「▶」のアイコンがあ り、クリックで展開できます
12. 「スタイル」パネル 8 もう少しスタイルパネルを見ていきま しょう。 選択中の要素に適用されているスタイル が、スタイルパネルから確認できます。 詳細度の高い順に、上から表示されてい て、上書きされていて無効のプロパティ には、打ち消し線が引かれています。 また、プロパティの上にマウスホバーす るとチェックボックスが表示され、 チェックを外すとそのプロパティが適用 されていない状態が反映されます。 チェックボックス 打ち消し線
13. 「計算済み」パネル 9 「スタイル」パネルの隣の位置にあるパネルで、選択中の要 素は最終的にどのプロパティが適用されているのか、がわか ります。 たとえば、「スタイル」パネルの場合は、上書きされる前と 後のすべてのプロパティが記載されます。一方「計算済み」パ ネルの場合、上書き後のプロパティのみが表示されます。
14. 「コンソール」パネル（エラーの確認） 10 エラーや警告、ログメッセージを確認 できます。 画面右上の赤い「×」アイコンとその 数字がエラーの数、黄色い「！」アイ コンが警告の数です。それらの箇所を クリックする、または[Esc] キーでコ ンソールパネルが開きます。 コンソールパネルの位置を、要素やソースパネルと同じタブに移動さ せていますが、通常は下部の位置にコンソールパネルが開きます エラーと警告の数
15. 「ソース」パネル 11 ページ内に読み込まれているファイルを 確認、表示できます。 左側のサイドバーは各ドメインごとに ファイルの階層と位置が確認でき、自 サーバーや、CDNやGoogleなどから読 み込んでいるかを確認できます。 また、ファイルの下部の「{}」アイコン をクリックすると、minファイルを圧縮 前の状態に展開できます。 minファイルを展開
16. 「アニメーション」パネル 12 ページ内で発生しているCSSアニメー ションを、視覚的にタイムラインと して確認、表示できます。 ※JavaScriptでのアニメーションを 検証することはできません。 ご入会後の特典スライドです
17. 「CSSの概要」パネル 13 「CSSの概要」パネルでは、CSSのセレクタ数や要素数、ページ内に使われている色、 フォント情報、使っていないCSSのプロパティなどを確認できます。 表示させるには、画面右上の「︙（縦型三点リーダー）」→「その他ツール」 →「CSSの概要」と開き、「概要をキャプチャ」のボタンを押します。 ご入会後の特典スライドです
18. 「Lighthouse」パネル（表示速度など） 14 「Lighthouse」パネルでは、ページの表示速 度、アクセシビリティ、SEOなどの項目を検 証できる「Lighthouse」を利用できます。 パフォーマンスの点数は、サーバーの都合や 利用しているシステムの都合で低めの点数が 出てしまうこともありますが、ユーザー補助 （アクセシビリティ関連）などはなるべく高 得点を目指しましょう。 点数は100点満点で、90点以上が緑色になります。49点以下 の場合は要改善といえるでしょう ご入会後の特典スライドです
19. ショートカットキー一覧を知りたい 15 開発者ツールで使えるショートカットキーの 一覧を確認できます。 歯車アイコンの「設定」→「ショートカッ ト」で一覧画面に移動します。 Macでの表示拡大は、日本語JISキーボードの場合[command] + [^]だと思われますが、表示上は[⌘] + [+]である点に注意 ご入会後の特典スライドです
20. 3. こんな困りごとありませんか？
21. スクリーンショット（キャプチャ）を撮りたい 16 ページ全体と、端末の範囲のスクリーンショットを 撮影できます。 デバイスモード右上の「︙（三点リーダー）」を開 き、「スクリーンショットをキャプチャ」または 「フルサイズのスクリーンショットをキャプチャ」 選びます。
22. スクリーンショット（キャプチャ）を撮りたい 17 ↑左記の範囲をキャ プチャした結果 「この部分のキャプチャがほしい」というときには「ノードのスクリーンショット」 を使うとよいでしょう。 要素パネルで要素を選んで右クリックし、「ノードのスクリンショット」を選ぶと、 そのタグの範囲をスクリーンショットとして保存できます。
23. ブレークポイントが知りたい 18 「メディアクエリを表示」すると、上部 に橙色と水色のバーが表示され、CSSと して設定されているメディアクエリの一 覧が視覚的にわかります。 水色は「max-width」の、橙色は「min- width」のメディアクエリで、クリックす るとページ側もそのメディアクエリの幅 になります。 表示させるには右上の「︙（三点リー ダー）」を開き、「メディアクエリを表 示」を選びます。
24. マウスホバー状態のスタイルを確認したい 19 スタイルパネル上部の「:hov」の項 目をクリックすると、「:active」 「:hover」などの項目とチェック ボックスが表示されます。 マウスホバーをしていない状態で も、ホバーしている状態を強制でき ます。これによって、開発者ツール上 で:hoverなどのセレクタの適用済み のプロパティが確認できます。 「要素の状態を強制」が適用されていると、要素の先頭にオレンジ色 の•が表示されます
25. classが外れたら・別のclassが追加されたらどうなるのか 20 スタイルパネル上部の「.cls」の項目 をクリックすると、選択中の要素に 付与されているclassが表示され、 チェックを外すとそのclassが要素か らの適用外の状態を確認できます。 また、テキストボックスに記入する と、その文字列がclass名として要素 に付与されます。 ご入会後の特典スライドです
26. flexboxがどうなっているかわからない 21 「display: flex;」が適用されいてる プロパティには、右隣にアイコンが 表示され、クリックすることで flexboxエディタが開きます。 flexboxエディタでは、flex-wrap, flex-direction, justify-content, align-itemsなど、flexbox関連プロ パティをクリックで追加・変更でき るため、挙動の確認がしやすいもの となっています。 要素パネル内のflexboxが適用されているタグには、右端に「flex」の ボタンが表示されます。クリックして有効化すると、画面内にflexが 適用されている様子が点線の枠で表示されます ご入会後の特典スライドです
27. 4. スタイルが適用されていないときの チェックリスト
28. CSS未適用のときに開発者ツールで確認するリスト ‚ 確認したい要素は合っているP ‚ スタイルは存在している？（class名は合っている？5 ‚ 記述したはずの行数にはちゃんとプロパティがあるP ‚ プロパティが無効になっていないP ‚ セレクタの詳細度は問題ないP ‚ 効果のないプロパティを使っていない？ 22
29. 確認したい要素は合っている？ 23 画面内の右クリックで「検証」から 開発者ツールを立ち上げると、いち ばん内側の要素を選択します。 選択中の要素にスタイルが当たって いない場合、親要素や先祖要素を順 に選択し、それぞれのスタイルを確 認していくことで、どの要素がどの スタイルなのかを確認していくとよ いでしょう。 上記の例は、角丸のカード型レイアウト部分全体を選びたかったのにh2 タグを選択してしまっている様子。この場合は、すぐ外側のdivタグの 「.infosession__content」を選択して、そこに探しているスタイルがな いかどうかを確認します
30. スタイルは存在している？（class名は合っている？） 24 class名のタイプミスがある場合も スタイルは反映されません。そこ で、検索機能を利用します。 要素パネルを開いている状態で [Ctrl (command)] + [F] キーを押す と、要素パネルの下部に検索フォー ムが表示されます。 ページ内のclass名や要素名、本文 の単語などを検索できます。 検索された単語は、黄色くハイライトされます 検索フォーム 一致した単語がハイライト
31. 記述したはずの行数にはちゃんとプロパティがある？ 25 開発途中のサイトの場合、CSSファ イルが最新でない場合や、別のディ レクトリにアップロードされている ような場合もあります。 そんなときは、「ソース」からCSS ファイルを確認し、自分自身で記述 した行数の箇所に、しっかりとプロ パティが記述されているかを確認し ましょう。 上記は圧縮されたファイルを展開したものなので、5行目以降は「-」の 表示となっています 行数表示
32. プロパティが無効になっていない？ 26 要素に間違ったプロパティが適用され ている場合、スタイルパネルのプロパ ティの先端に黄色い「!」のアイコンが 表示され、打ち消し線が引かれます。 「!」アイコンにマウスホバーした際 に、「不明なプロパティ名」と出た場 合はプロパティの左側であるプロパ ティの「名前」が間違っています。 「プロパティ値が無効」の場合は右側 の「値」が間違っています。 間違ったプロパティの場合、エディタでエラー表示になることも多 いです ご入会後の特典スライドです
33. セレクタの詳細度は問題ない？ 27 スタイルパネルで、class名やid名などのセレクタの箇 所にマウスホバーすると、「特異性:（0, 1, 0）」など の項目が表示されます。 これは詳細度のことで、CSSの適用される優先度をあら わしています。この優先度による影響で、スタイルが反 映されていない場合があります。 開発者ツールでは、上から順に詳細度が高い、つまり 優先されているルールセット（プロパティの集まり） が表示されますが、詳細度が表示されることで、優先 される順番の確認がしやすくなっています。 日本語表示では「特異性」という、Specificity の直訳になっていますが、「詳細度」とする訳 語のほうが一般的です 詳細度が表示される ご入会後の特典スライドです
34. 効果のないプロパティを使っていない？ 28 「display: flex;」でないときのflexbox 関連のプロパティや、「position: static;」の際のtopなどのプロパティ は、設定しても効果が見られません。 それらのプロパティがある場合、グレー アウトされ、その右端の「i」アイコン にマウスホバーすることで理由が表示さ れます。 ご入会後の特典スライドです
35. 5. 開発者ツールのアクセシビリティ機能
36. 要素を選択中のアクセシビリティ情報 29 「検査」を利用中に、詳細表示の下 部にアクセシビリティ関連の情報が 表示されます。 たとえば、背景色と文字色の差が小 さい場合、読みにくくなってしまい ます。これはContrast（コントラス ト）の項目で確認でき、赤い「!」ア イコンが出ている場合は改善すると よいでしょう。 問題がある場合の表示
37. カラーピッカーのアクセシビリティ情報 30 color（文字色）プロパティのカラーピッカーを開 いている場合、「コントラスト比」の項目が表示 され、WCAGのAAやAAAに準拠しているかどうか を確認できます。 このとき、2本の白い線が表示され、「このライン より上（下）ならAA（AAA）準拠」という基準が 視覚的にわかります。 「コントラスト比」を開閉する 2本の白い線
38. 色覚特性のシミュレーション 31 色覚特性を持っている方の「見え方」をシミュレーショ ンすることができます。 「レンダリング」パネルを開き、下部にある「色覚異常 をエミュレート」から、「1型2色覚」などを選ぶと、そ れらに応じた表示になります。 レンダリングパネルは、[Esc] キーでドロ ワーを表示させ、左端の縦型三点リーダー （︙）をクリックした一覧から選択できます
39. 6. 他ブラウザの開発者ツール
40. Chrome以外のブラウザの開発者ツール 32 Microsoft Edge 開発者ツール Firefox ウェブ開発ツール Safari Webインスペクタ Chrome以外の各ブラウザにも、Webページを検証できるツールが搭載されています。
41. Safariの「開発」メニューを表示させる 33 「開発」メニューが有効になっていない場合、ショートカットキーも効かないです。 有効化の手順は、(1) メインメニューの「設定…」を開く、(2)設定内の「詳細」タブ、 (3)「Webデベロッパ用の機能を表示」にチェック、となります。
42. SafariとSimulatorで検証ができる 34 Xcodeに付属している「Simulator」を使うことで、Mac上でiOSのSafariを立ち上げられ、 Mac版SafariのWebインスペクタから、Simulatorで表示中のWebページの検証ができます。 XcodeメニューからSimulatorを立ち上げる Mac版Safariの「開発」からSimulator（上記はiPhone 15 Pro Max）を選択できます ご入会後の特典スライドです
43. SimulatorはDockに残せる 35 「Simulator」はXcode経由でなくとも、Dockに残しておくことで単体で立ち上げられます。 ご入会後の特典スライドです