4.1 ファイル構造と編集

パネル構成

Sourcesパネルは3つの主要領域で構成される。

Navigatorペイン

タブの種類

ファイルツリーの構造

Pageタブでは、ファイルがドメインごとにグループ化されている。

• メインドメイン（example.com）
• CDN（cdn.example.com）
• サードパーティ（analytics.google.com等）

フォルダの展開

• ▶をクリックで展開
• Alt+クリックで再帰的に展開

ファイルを開く

クイックオープン

Ctrl+Pでファイル名を検索して開く。最も高速な方法。

// 例: style.cssを開く
style.css

// パスの一部で絞り込み
js/main

// 特定の行に移動
script.js:42

特定の行に移動

Ctrl+Gで行番号を指定してジャンプ。

特定のメソッドに移動

Ctrl+Shift+Oでファイル内のシンボル（関数、クラス等）を検索。

検索機能

ファイル内検索

Ctrl+Fで現在開いているファイル内を検索。

全ファイル横断検索

Ctrl+Shift+Fですべてのソースファイルを検索。

// テキスト検索
addEventListener

// 正規表現検索
console\.(log|warn|error)

// 特定のファイルタイプのみ
Files matching: *.js

置換

Ctrl+Hで検索と置換。Workspacesを使用している場合、変更はファイルに保存される。

エディタ機能

シンタックスハイライト

JavaScript、CSS、HTML、JSON等の主要な言語でシンタックスハイライトが適用される。

コード補完

入力中にオートコンプリート候補が表示される。Tabで確定。

括弧のマッチング

カーソルが括弧の上にあると、対応する括弧がハイライトされる。Ctrl+Mで対応する括弧にジャンプ。

コードの折りたたみ

行番号の横の▼をクリックで、関数やブロックを折りたたみ。

複数カーソル

行操作

変更の保存

一時的な変更

Sourcesパネルでコードを編集すると、メモリ上で変更が適用される。JavaScriptの変更はリロードが必要（または、まだ実行されていない関数は即座に反映）。

変更の永続化

変更の確認

Changesタブ（Ctrl+Shift+P → "Show Changes"）で、変更内容の差分を確認できる。

Snippets（コードスニペット）

頻繁に使用するコードを保存し、いつでも実行できる機能。

スニペットの作成

スニペットの実行

• Ctrl+Enterで実行
• 右クリック → Run
• Ctrl+P → 「!」+ スニペット名

便利なスニペット例

// すべての画像のURLを取得
console.table(
    Array.from(document.images).map(img => ({
        src: img.src,
        alt: img.alt,
        width: img.width,
        height: img.height
    }))
);

// localStorageの内容を表示
console.table(
    Object.entries(localStorage).map(([key, value]) => ({key, value}))
);

// ページのパフォーマンス情報
const timing = performance.timing;
console.table({
    'DNS Lookup': timing.domainLookupEnd - timing.domainLookupStart,
    'TCP Connection': timing.connectEnd - timing.connectStart,
    'First Byte': timing.responseStart - timing.requestStart,
    'DOM Load': timing.domContentLoadedEventEnd - timing.navigationStart,
    'Full Load': timing.loadEventEnd - timing.navigationStart
});

Source Maps

minify/トランスパイルされたコードを元のソースコードにマッピングする機能。

対応している変換

• JavaScript minification（Terser、UglifyJS等）
• TypeScript → JavaScript
• Sass/Less → CSS
• JSX → JavaScript
• Webpack/Rollup等のバンドラー出力

有効化

Settings → Preferences → Sources で以下を確認：

• Enable JavaScript source maps: ON
• Enable CSS source maps: ON

確認方法

Source Mapsが正しく読み込まれると：

• Navigatorに元のファイル（.ts、.scss等）が表示される
• エラーメッセージが元のファイルの行番号を参照する
• ブレークポイントを元のファイルに設定できる

Pretty Print（整形表示）

minifyされたコードを読みやすく整形表示する機能。

使用方法

• エディタ下部の「{}」ボタンをクリック
• 右クリック → Format