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

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

クイックソースツール

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

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

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

クイックソース ツールでは、[ソース] ツールで開いているファイルの代替表示手段を提供します。 クイックソース ツールには、機能のサブセットがあります。すべての機能については、[ ソース] ツールを使用します。

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

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

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

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

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

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

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

複製されたリポジトリなどのローカルソースファイルがある

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

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

まだ行っていない場合は、 git をダウンロードしてインストールします。
まだインストールしていない場合は、最新バージョンの Node.js と npm を Node.jsからインストールします。
新しいウィンドウまたはタブで 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 のサンプルコードで "MicrosoftEdge / Demos" リポジトリをドライブに複製します。
- WebView2 の開発環境をセットアップするで WebView2Samples リポジトリを複製します。別のサンプルリポジトリを示しますが、いくつかのツールの手順を示します。
- リポジトリのクローン作成 - GitHub ドキュメント。

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

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

ローカルホストサーバーを起動する

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

git bashシェルを使うとUNIXシェルなので、Windowsでもバックスラッシュが入っているディレクトリパスを引用符で囲むか、バックスラッシュではなくスラッシュを使う必要がある。
"test" という名前の作業ブランチを作成し、それに切り替えます ("main" ブランチ内のデモのファイルが変更されないようにするため):
```
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 が表示されます。
「 no tasks」と入力し、 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 ] ボタンをクリックします。

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

フィードバック

このページはお役に立ちましたか?

最終更新: 2025-07-01

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

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

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

複製されたリポジトリなどのローカル ソース ファイルがある

ローカル ホスト サーバーを起動する

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

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

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

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