【Mac版】Chromeの開発者ツールの使い方｜基本操作と便利な活用テクニック

Web制作やブログカスタマイズをしていると、必ず使うことになるのがChromeの開発者ツール（DevTools）。

MacでもWindowsでもほぼ同じ操作ですが、ショートカットが少し違うので、Macユーザー向けに使い方をまとめます。

この記事では、以下のことを初心者にもわかりやすく解説します：

• Macで開発者ツールを開く方法
• よく使う基本機能と活用場面
• 作業をもっと効率化できる便利なテクニック
• 実際のWeb制作での具体的な活用例

これを読めば、Web制作やサイトのカスタマイズがぐっと効率的になりますよ！

MacでChromeの開発者ツールを開く方法

ショートカットキーで開く（最速）

Macならこれが一番速い方法です。

⌘（Command） + Option（⌥） + I

キーの位置

• ⌘キー：スペースバーの両隣
• Optionキー：⌘キーの隣
• Iキー：英字のアイ

これで画面右側（または下）に開発者ツールが表示されます。

要素を指定して開く（便利）

右クリックから開く

調べたい部分を右クリック（またはControl + クリック）して「検証」を選ぶと、その要素にフォーカスした状態で開発者ツールが立ち上がります。

使う場面

• 特定の要素のCSSを確認したい
• どのHTMLタグが使われているか知りたい
• デザインの崩れの原因を調べたい

要素選択モードのショートカット

⌘ + Shift + C

このショートカットを押すと、マウスカーソルが選択モードになり、クリックした要素の詳細がすぐに表示されます。

メニューから開く

Chrome のメニューから

1. Chrome右上の「⋮（縦の3点）」をクリック
2. 「その他のツール」を選択
3. 「デベロッパーツール」をクリック

Mac のメニューバーから

1. メニューバーの「表示」をクリック
2. 「開発 / 管理」を選択
3. 「デベロッパーツール」をクリック

開発者ツールの表示位置

表示位置の変更

開発者ツール右上の「⋮」→「Dock side」で表示位置を変更できます：

• Right：画面右側に表示（デフォルト）
• Bottom：画面下部に表示
• Left：画面左側に表示
• Separate window：別ウィンドウで表示

推奨設定

• 大きなモニター：Right（右側）が便利
• 小さなモニター：Bottom（下部）が見やすい
• デュアルモニター：Separate window で別画面に表示

開発者ツールの主要機能

Elements（要素）タブ

HTML構造の確認と編集

基本機能

• HTMLタグの構造をツリー表示
• リアルタイムでHTML/CSSを編集・確認
• 要素の削除や追加も可能

実際の使い方

1. 要素の特定：左側のHTMLから調べたい要素をクリック
2. CSS確認：右側のStylesパネルでCSSプロパティを確認
3. ライブ編集：CSSの値を直接変更してリアルタイムプレビュー

CSS編集の実践例

色を変更する場合

/* 元のCSS */
.title {
  color: #333;
}

/* 開発者ツールで直接編集 */
.title {
  color: #ff0000; /* 赤色に変更 */
}

レイアウトを調整する場合

/* マージンの調整 */
.content {
  margin: 10px; /* 元の値 */
  margin: 20px; /* 新しい値を入力 */
}

Computed（計算済み）タブ

確認できる情報

• 最終的に適用されたCSSの値
• ボックスモデル（margin、border、padding）
• 継承やカスケードの結果

Console（コンソール）タブ

JavaScriptエラーの確認

エラーの種類

• 構文エラー：コードの書き方が間違っている
• 実行時エラー：動作中に発生する問題
• 警告：動作するが推奨されない書き方

エラーの見方

Uncaught TypeError: Cannot read property 'textContent' of null
    at script.js:15:20

この例では：

• エラータイプ：TypeError
• 内容：null要素のtextContentにアクセスしようとした
• 場所：script.jsの15行目20文字目

JavaScriptコードの実行

簡単なコード実行

// ページタイトルを変更
document.title = 'テストページ';

// 要素の内容を変更
document.querySelector('h1').textContent = '新しいタイトル';

// 画面をスクロール
window.scrollTo(0, 500);

便利な確認コマンド

// 現在のURL
location.href

// 画面サイズ
window.innerWidth + ' x ' + window.innerHeight

// 読み込まれているjQueryのバージョン
$.fn.jquery

Network（ネットワーク）タブ

ページ読み込み時間の分析

確認できる項目

• Name：読み込んだファイル名
• Status：HTTPステータスコード
• Type：ファイルの種類（HTML、CSS、JS、画像など）
• Size：ファイルサイズ
• Time：読み込み時間

パフォーマンス改善の指標

重要な指標

• DOMContentLoaded：HTMLの解析完了
• Load：すべてのリソース読み込み完了
• First Paint：最初に何かが描画された時点

大きなファイルの特定

1. Size列をクリックしてサイズ順にソート
2. 大きなファイルを特定（通常100KB以上は要注意）
3. 圧縮や最適化を検討

Sources（ソース）タブ

JavaScriptのデバッグ

ブレークポイントの設定

1. 調べたいJavaScriptファイルを開く
2. 行番号をクリックしてブレークポイントを設定
3. ページを操作して該当コードが実行されると処理が停止

変数の確認

• Scope：現在のスコープ内の変数
• Watch：監視したい変数を追加
• Call Stack：関数の呼び出し履歴

ファイルの検索

ファイル名で検索

⌘ + P

コード内容で検索

⌘ + Shift + F

Macならではの便利ショートカット

基本操作のショートカット

操作	ショートカット	説明
開発者ツールを開く	⌘ + Option + I	最も基本的な操作
要素選択モード	⌘ + Shift + C	マウスで要素を選択
コンソールを表示/非表示	Esc	他のタブにいてもコンソールを表示
ハードリロード	⌘ + Shift + R	キャッシュを無視して再読み込み
開発者ツールを閉じる	⌘ + Option + I	再度押すと閉じる

高度なショートカット

操作	ショートカット	説明
ファイル検索	⌘ + P	ソースファイルを素早く開く
コマンドパレット	⌘ + Shift + P	機能を名前で検索
全体検索	⌘ + Shift + F	全ファイルから文字列検索
次のタブ	⌘ + ]	右のタブに移動
前のタブ	⌘ + [	左のタブに移動

レスポンシブデザインモード

デバイスモードの起動

⌘ + Shift + M

このショートカットで、スマートフォンやタブレットの表示をシミュレートできます。

確認できるデバイス

• iPhone：各サイズ（SE、12、12 Pro Max など）
• iPad：標準サイズとPro
• Android：Pixel、Galaxy など
• カスタム：任意のサイズを指定

実践的な活用テクニック

CSSのライブ編集とコピー

リアルタイムでのデザイン調整

手順

1. Elements タブで要素を選択
2. Styles パネルでCSSを編集
3. 結果をリアルタイムで確認
4. 決定したらコードをコピー

注意点

• 開発者ツールでの変更は一時的
• ページを再読み込みすると元に戻る
• 確定した内容は必ず実際のCSSファイルに反映

変更したCSSの保存

Changed（変更済み）の確認

1. Elements タブの Styles パネル
2. 変更したプロパティには印が付く
3. 右クリックで「Copy rule」や「Copy all declarations」

パフォーマンス分析

ページ読み込み速度の改善

Lighthouse の活用

1. 開発者ツールの「Lighthouse」タブ
2. 「Generate report」をクリック
3. パフォーマンス、アクセシビリティ、SEOなどを総合評価

改善項目の例

• 画像の最適化：WebP形式への変換
• CSSの最小化：不要なスタイルの削除
• JavaScriptの遅延読み込み：async/defer属性の活用

ネットワーク使用量の確認

通信量の監視

1. Network タブを開く
2. ページを再読み込み
3. 下部に総データ量と読み込み時間が表示

セキュリティ関連のチェック

Console でのセキュリティ警告

よくある警告

• Mixed Content：HTTPSページでHTTPリソースを読み込み
• CORS Error：異なるドメイン間の通信エラー
• CSP Violation：Content Security Policy違反

Application タブでの確認

確認できる項目

• Local Storage：ブラウザに保存されたデータ
• Session Storage：セッション中のみ有効なデータ
• Cookies：サイトが設定したクッキー
• Service Workers：オフライン対応の仕組み

困ったときのトラブルシューティング

よくある問題と解決方法

開発者ツールが表示されない

原因と対策

1. ショートカットキーが無効
   • 他のアプリとのショートカット競合
   • システム環境設定で確認
2. Chromeの設定問題
   • Chrome を再起動
   • プロフィールの再作成
3. 画面外に表示されている
   • ⌘ + Shift + P でコマンドパレット
   • 「dock」で検索して表示位置を変更

CSS の変更が反映されない

チェックポイント

1. キャッシュの問題
   • ハードリロード（⌘ + Shift + R）
   • 無効化して再読み込み
2. CSS の優先順位
   • より具体的なセレクタが適用されている
   • !important の有無を確認
3. 構文エラー
   • CSS の書き方に間違いがないか
   • Console でエラーメッセージを確認

開発者ツールの設定カスタマイズ

ダークテーマの適用

手順

1. 開発者ツールの「⚙️ Settings」をクリック
2. 「Preferences」→「Appearance」
3. 「Theme」を「Dark」に変更

パネルレイアウトの調整

便利な設定

• Console drawer：常にコンソールを下部に表示
• Network conditions：ネットワーク速度のシミュレート
• Sensors：位置情報やデバイスの向きをシミュレート

応用的な活用例

A/Bテストのシミュレーション

異なるデザインの比較

// ボタンの色を変更
document.querySelectorAll('.button').forEach(btn => {
  btn.style.backgroundColor = '#ff0000';
});

// フォントサイズを変更
document.body.style.fontSize = '18px';

アクセシビリティの確認

コントラスト比の確認

手順

1. Elements タブで文字要素を選択
2. Styles パネルで color プロパティを確認
3. カラーピッカーでコントラスト比をチェック

スクリーンリーダーのシミュレート

Lighthouse での確認

• アクセシビリティスコア
• 改善が必要な項目の具体的な指摘
• WAI-ARIA の適用状況

動的コンテンツのデバッグ

Ajax通信の監視

Network タブでの確認

1. XHR フィルターを適用
2. Ajax リクエストの詳細を確認
3. レスポンスデータの内容をチェック

イベントリスナーの確認

Elements タブでの確認

1. 要素を選択
2. Event Listeners タブを開く
3. 登録されているイベントを確認

まとめ

Mac版Chromeの開発者ツールは、Web制作における最も重要なツールの一つです。

重要なポイントの再確認

基本操作

• ⌘ + Option + I で開発者ツールを起動
• 右クリック「検証」で要素を直接調査
• ⌘ + Shift + C で要素選択モード

主要機能の活用

• Elements：HTML/CSS の確認と編集
• Console：JavaScript のエラー確認とコード実行
• Network：パフォーマンス分析
• Sources：JavaScript のデバッグ

実践的なテクニック

• ライブ編集でのデザイン調整
• レスポンシブデザインのテスト
• パフォーマンス問題の特定と改善