クイックソースツールを使用してソースファイルを表示または編集する

2025-07-01

ソースツール以外のツールを表示する場合と同時に、 クイックソースツールを 使用してソースファイルを表示または編集します。 クイックソース ツールには、ソースツールで開いているファイルと同じファイルが常に表示されます。

クイックソースツール

DevTools でソースファイルを表示するメイン場所は、ソース ツール内にあります。ただし、ソースファイルの表示または編集中に、要素や コンソールなどの他のツールにアクセスする必要がある場合があります。 クイックソース ツールを使用します。既定では、DevTools の下部にある [クイックビュー] パネルで開きます。

クイックソースツールをソースツールと組み合わせて使用する

DevTools の下部にあるクイックビューにクイックソース ツールを表示するには、DevTools の上部にあるアクティビティバーで [ソース] ツール以外のツールを開く必要があります。

クイックソース ツールでは、ソース ツールで開いているファイルの別の表示が提供されます。 クイックソース ツールには、機能のサブセットがあります。完全な機能については、ソースツールを使用 します 。

あるツールでファイルを開いたり閉じたりすると、ファイルは他のツールで開いたり閉じたりします。どちらのツールにも、開いている各ファイルのタブがあります。

ワークスペースフォルダーを選択して DevTools のローカルソースファイルを編集する

これは、MicrosoftEdge/Demos リポジトリの ToDo Web アプリを使用して、クイックソース ツールを示すすべての手順のエンドツーエンドのチュートリアルです。

ソース ツールでローカルフォルダーをワークスペースとして選択すると、クイックソース ツール内から別のツールを表示するのと同時にファイルを編集し、それらの編集内容をローカルドライブに保存できます。これにより、別のツール (Elements や Network など) を使用しながらクイックソース ツールでファイルを編集し、編集内容をローカルドライブの対応するソースファイルに保存できます。

クイックソース ツールでソースファイルを編集するには、次の操作を行います。

複製されたリポジトリなど、Web ページのソースファイルにローカルでアクセスできます。
[ソース] ([) ツールの [ワークスペース] タブで、ソースファイルのローカルフォルダーを追加します。
[ ワークスペース ] タブで、 .js ファイルなどのファイルを開きます。
アクティビティバーで、[ソース] ツール以外のツール ([要素] ツールなど) を選択します。
DevTools の下部にある クイックビュー パネルで、 クイックソース ツールを開きます。開いた .js ファイルは合理化されたエディターに表示され、要素ツールは引き続き表示されます。

これらの手順については、以下のチュートリアルで詳しく説明します。

複製されたリポジトリなどのローカルソースファイルを作成する

クイックソース ツールを使用して変更をローカルに保存するには、Web サーバーファイルと一致するローカルソースファイルが必要です。ローカルドライブに、Web サーバーから返される一時的なファイルと一致するソースファイルがあることを確認します。

たとえば、まだ完了していない場合は、次のように MicrosoftEdge/Demos リポジトリをローカルドライブに複製します。

まだ完了していない場合は、 git をダウンロードしてインストールします。
まだ完了していない場合は、Node.jsから最新バージョンの Node.js と npm をインストールします。
新しいウィンドウまたはタブで MicrosoftEdge/Demos に移動します。
[ コード ] ドロップダウンボタンをクリックします。
[ クリップボードに URL をコピー ] ボタンをクリックします。

URL はクリップボードにコピーされます。 https://github.com/MicrosoftEdge/Demos.git

または、GitHub Desktop がインストールされている場合は、[ GitHub Desktop で開く ] をクリックしてリポジトリを複製し、以下のコマンドプロンプトの手順をスキップします。

または、Visual Studio Code の [ソース管理 ] ウィンドウを使用してリポジトリを複製し、以下のコマンドプロンプトの手順をスキップすることもできます。
git がインストールされていると仮定して、コマンドプロンプトを開きます。
リポジトリをローカルドライブに複製し、GitHub リポジトリからコピーした URL 文字列を入力します。コマンドプロンプトを使用する場合:
```
# example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git
```
リポジトリの複製の詳細については、次を参照してください。
- DevTools のサンプルコードで Edge Demos リポジトリをドライブに複製します。
- 「WebView2 用の開発環境を設定する」の WebView2Samples リポジトリを複製します。別のサンプルリポジトリを表示しますが、いくつかのツールの手順を示します。
- リポジトリの複製 - GitHub ドキュメント。

これで、Web サーバー上のファイルと一致するソースファイル ( /demo-to-do/ など) のローカルフォルダーが作成されました。

次のセクションに進みます。

localhost サーバーを起動する

Git bash シェルや Microsoft Visual Studio Code の [ターミナル] ウィンドウなどのコマンドプロンプトに移動します。
複製された /demo-to-do/ ディレクトリ ( C:\Users\localAccount\GitHub\Demos\demo-to-do\など) に移動します。

git bash シェルを使用する場合は UNIX シェルであるため、Windows の場合でも、円記号を引用符で囲んだディレクトリパスをラップするか、円記号ではなくスラッシュを使用する必要があります。
"test" という名前の作業ブランチを作成し、それに切り替えます ("メイン" ブランチでデモのファイルが変更されないようにします)。
```
git checkout -b test
```
これは次と同じです。
```
git branch test
git switch test
```
次のいずれかのコマンドを実行して、Web サーバーを起動します。
```
# Node.js option
cd ~/GitHub/demos/demo-to-do
npx http-server  # Node.js
```
詳細とオプションについては、「Visual Studio Code 用 DevTools 拡張機能のインストール」の「サーバーの起動 (npx http-server)」を参照してください。
```
# Python 2 option
cd ~/GitHub/demos/demo-to-do
python -m SimpleHTTPServer  # Python 2
```
```
# Python 3 option
cd ~/GitHub/demos/demo-to-do
python -m http.server  # Python 3
```
Microsoft Edge でタブを開き、ローカルでホストされているバージョンのサイトに移動します。 localhost:8080を使用してアクセスできる必要があります。

もう 1 つの一般的な同等の URL が http://0.0.0.0:8080。 Python サーバーオプションの既定のポート番号は 8000。正確なポート番号が異なる場合があります。

DevTools ワークスペースデモ Web ページが開きます。

ソースファイルのローカルフォルダーをワークスペースとして選択する

上記の手順に進み、デモ Web ページを右クリックし、[ 検査] を選択します。

DevTools が開きます。
DevTools の上部にある アクティビティバー で、[ ソース ] () ツールを選択し、[ ワークスペース ] タブ ([ ページ ] タブでグループ化) を選択し、[ ワークスペース ] タブで [ フォルダーの追加 ] ボタンをクリックします。

[ フォルダーの選択] ダイアログが開きます。
C:\Users\localAccount\GitHub\Demos\demo-to-doなどのフォルダーに移動し、[フォルダーの選択] ボタンをクリックします。

DevTools の上部にあるメッセージは、DevTools 要求を読み取り、<path> へのフルアクセスを要求します。
[ 許可 ] ボタンをクリックします。

[ソース] ツールの [ワークスペース] タブにdemo-to-doファイルのツリーが表示されます。 HTML、JS、CSS ファイルには緑色の "マップ済み" ドットがあります。
[ ワークスペース ] タブで、ファイルツリーを展開し、 to-do.jsなどの 1 つ以上のファイルをクリックします。

[ ソース] ツールでファイルが開きます。

クイックソースツールを開き、ファイルを編集する

[要素] ツールを引き続き表示するが、[ソース] ツールを使用して開いたソースファイルを同時に表示および編集するとします。

上記の手順に進み、DevTools の上部にあるアクティビティバーで、[要素] ([要素] ツールアイコン) ツールなどの [ソース] () ツール以外のツールを選択。
クイックビュー ツールバーが DevTools の下部に表示されない場合は、Esc キーを押します。
DevTools の下部にある クイックビュー ツールバーで、[ その他のツール ] ボタンをクリックし、[ クイックソース] を選択します。

クイックソース ツールは、DevTools の下部にあるクイックビューで開きます。

todo.js が表示されます。これは、そのファイルが [ソース] ツールで開かれているためです。
デモの To Do Web ページで、すべてのタスクを削除します。
[ クイックソース ] パネルをクリックし、 Ctrl + F キーを押します。

クイックソース ツールで、[検索] UI が表示されます。
タスクを入力せず、Enter キーを押します。
コード行で、[ no tasks ] を [ 0 tasks] に変更します。

[ファイル名] タブにアスタリスクが表示されます。
Ctrl キーを押しながら S キーを押します。

アスタリスクは、[ファイル名] タブから削除されます。
デモ Web ページを更新します (Ctrl + R)。
レンダリングされた Web ページが "いいえ" から "0" に変更されず、[JS ファイル名] タブに緑色の "マップされた" ドットが表示されなくなった場合は、Microsoft Edge の [ 更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 (Ctrl + Shift + R)] を選択します。

レンダリングされた Web ページが "いいえ" から "0" に変更され、[JS ファイル名] タブに緑色の "マップ済み" ドットが表示されます。

ここで、DevTools でフォルダーのファイルを編集すると、サーバーから返される一時的なファイルだけでなく、ローカルドライブ上のソースファイルにも保存されます。ファイルは、 クイックソース ツール内から、別のツールを表示する (または ソース ツール内から) と同時に編集できます。

これはチュートリアルの手順の最後です。

クイックソースツールのキーボードショートカット

クイックソース ツールには、合理化された UI があります。これらのキーボードショートカットを使用します。

Ctrl + F - 検索。
Ctrl + S - 保存します。 HTML、JS、または CSS ファイル名に緑色の "マップ済み" ドットが表示されなくなった場合は、Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ] (Ctrl + Shift + R) を選択します。
Ctrl + P - コマンドメニューを使用してファイルを開きます。これは、[ ソース] ツールに移動し、[ ワークスペース ] タブでファイルをクリックする場合と同じです。

ファイルを閉じる

ファイルを閉じるには、ファイルのタブにある [x ] ボタンをクリックします。

ファイルは クイックソース ツールと ソース ツールで閉じられます。

次の方法で共有

クイック ソース ツールを使用してソース ファイルを表示または編集する

クイック ソース ツールをソース ツールと組み合わせて使用する

ワークスペース フォルダーを選択して DevTools のローカル ソース ファイルを編集する

複製されたリポジトリなどのローカル ソース ファイルを作成する

localhost サーバーを起動する

ソース ファイルのローカル フォルダーをワークスペースとして選択する

クイック ソース ツールを開き、ファイルを編集する

コマンド メニューを使用してファイルを開く

クイック ソース ツールのキーボード ショートカット

ファイルを閉じる

関連項目

フィードバック

その他のリソース