DevTools は、ブラウザー内の統合開発環境 (IDE) として使用できます。 Web ページのソース ファイルに編集内容を保存するには、[ソース] ツールの [ ワークスペース ] タブに Web ページの ソース コード フォルダーを追加します。 その後、ソース ツールのエディター (または DevTools の下部にあるクイック ビュー パネルのクイック ソース ツール) で HTML、CSS、JS ファイルを編集して保存できます。
[ ワークスペース ] タブ内からソース ファイルを作成、コピー、名前変更、削除できます。
[ソース] ツールの [ワークスペース] タブを使用して、[ソース] ツール内からコンピューター上のフォルダーの内容を表示および編集します。 ワークスペース内のファイルに加えた変更は、コンピューターに保存されます。
ワークスペースを設定する一般的な方法は、Web サイトのフロントエンド コードのソース ファイルを表示するようにワークスペースを設定することです。 これにより、DevTools を使用して Web サイトを検査し、そのソース ファイルを変更します。 これにより、行った変更は、ページを更新したときに失われるのではなく、コンピューターに保存されます。
関連項目:
DevTools ワークスペース機能の概要
DevTools ワークスペース を使用すると、コンピューター上にある Web サイトのソース コードを表示し、 ソース ツールから変更を加えて、ページの更新時に変更が保持されるようにすることができます。
ワークスペースを使用する一般的なシナリオを次に示します。
お使いのコンピューターに Web サイトのソース コードをインストールします。
ソース コード ディレクトリからローカル Web サーバー (
npx http-serverなど) を実行して、http://localhost:8080などのローカル開発 URL でサイトにアクセスできるようにします。Microsoft Edge で
http://localhost:8080を開きます。DevTools の [ソース ] ツールの [ ワークスペース ] タブを使用して、CSS、HTML、JavaScript ファイルなど、Web サイトのソース コードを変更します。
Web ページを再読み込みして変更を確認します。
Web サイトでは、変更を確認する前に実行する必要があるビルド システムを使用する場合があります。 Web 開発者は、多くの場合、ソース コード ファイル内の保存された変更を監視するビルド システムを使用します。 ソース コード ファイルに変更を保存すると、ビルド システムによってそれらの変更がビルドされ、ブラウザーでページが自動的に更新されます。
このような自動ビルド システムを使用する場合、 ソース ツールでソース ファイルを変更して保存すると、レンダリングされた Web ページに適用された変更が自動的に表示されます。
変換されたソース コードを使用したワークスペース機能の制限事項
最新のフレームワークを使用している場合は、ソース コードを保守しやすい形式から、できるだけ迅速に実行するように最適化された形式に変換される可能性があります。 ソース ツールの [ワークスペース] タブでは、通常、JavaScript と CSS のソース マップを使用して、最適化されたコードを元のソース コードにマップできます。 ただし、各フレームワークでソース マップを使用する方法には多くのバリエーションがあります。
DevTools では、すべてのフレームワークバリエーションがサポートされているわけではありません。 選択したフレームワークでワークスペースを使用しているときに問題が発生した場合、または必要なフレームワーク固有の手順を特定する場合は、 MicrosoftEdge/DevTools リポジトリで問題を開いて使用してください。
[ソース] ツールの [ワークスペース] タブを使用する場合は、[要素] ツールの [スタイル] タブを使用して CSS を編集する
ワークスペースを使用する場合、場合によっては、[要素] ツールの [スタイル] タブで CSS を編集し、ディスク上のマップされたファイルに変更を保存できます。
[要素] ツールの [スタイル] タブで行った編集は、DevTools が Web ページ上のスタイル シートとワークスペース内のファイル (ソース マップやコンテンツの照合など) をマップした場合、ディスク上の CSS ファイルに保存されます。
自動ビルド システム フレームワークを使用する場合、DevTools がソース マップを使用してスタイル シートをワークスペース ファイルにマップできた場合、変更がソース ファイルに保存されます。
使用する自動ビルド システムまたはフレームワークによっては、ビルド ステップがない場合、またはビルド ステップとソース マップがある場合、DevTools はディスクに変更を保存できる場合があります。 [ スタイル ] タブはディスク上の CSS ファイルにマップされるため、[ スタイル ] タブの編集内容がディスクに保存されます。
[要素] ツールの [スタイル] タブで行った編集は、スタイルシートがワークスペース ファイルにマップされていない場合、ディスク上の CSS ファイルには保存されません。 [要素] ツールの [スタイル] タブで CSS を編集すると、変更は失われます。変更はディスクに保存されません。
ワークスペースを使用している場合は、編集するソース ファイルがローカル サーバーによって処理される前にビルド スクリプトによってビルドまたはコンパイルされる可能性があるため、ソース ツール (要素ツールではなく) で CSS を編集します。 要素ツールで編集する場合は、ソース ファイルではなく、コンパイル済みおよびビルド済みのバージョンのファイルを編集している可能性があります。
ワークスペースを使用する場合:
- ソース ツールでファイルを編集 します 。
- 変更を保存します。
- もう一度ビルドします。 一部のビルド システムでは、変更が検出されたときに自動的にこれを行います。
- ページを再読み込みします。 一部のサーバーでは、変更が検出されたときに自動的にこれを行います。
[要素] ツールの [スタイル] タブの制限事項
要素ツールの [スタイル] タブを使用すると、すべてのシナリオで必ずしも機能するとは限りません。 プロジェクトでフレームワークまたはプリプロセッサを使用して CSS を記述するとします。CSS は直接書き込むのではなく、異なる言語と異なるファイル構造を使用して同等の CSS を記述します。 このようなプロジェクトでは、ビルド システムを使用して、CSS のようなコードを変換、コンパイル、および組み合わせてブラウザーで理解できるものにすることができます。
このようなプロジェクトではソース マップが生成される可能性があるため、DevTools では 、[要素 ] ツールの [ スタイル ] タブでソース ファイルを表示および編集できます。ただし、場合によっては、それが機能しない場合や、プロジェクトでソース マップが使用されない場合があります。
その場合、[ 要素 ] ツールの [ スタイル ] タブで行った変更はワークスペース ファイルに保存されません。 その場合は、代わりにソース ツールで ソース ファイルを編集します。 上記のシナリオでは、別の言語を使用するファイルが [ソース] ツールの [ワークスペース] タブに表示され、そこでソース ファイルを編集できます。
その後、バックグラウンドで保存された変更を再構築してコンパイルする必要があります (これは自動的に発生する可能性があります)、ページの更新後 (自動的に発生する可能性があります) 後に、レンダリングされた Web ページに変更が表示されます。
関連機能: ローカルオーバーライド
ローカルオーバーライド は、ワークスペースに似た DevTools 機能です。 オーバーライドは、Web ページへの変更を試す場合に使用でき、Web ページの読み込み間で変更を表示する必要がありますが、変更を Web ページのソース コードにマッピングする必要はありません。
ローカルオーバーライドは 、Web ページに加えた変更を任意のフォルダーに保存し、オーバーライドされたリソースの URL と一致するフォルダー構造に整理します。
オーバーライド機能には、DevTools で編集した Web ページ リソースのコピーが格納されます。 ページを更新すると、Microsoft Edge は、サーバー上のファイルではなく、変更されたファイルのローカル コピーを読み込みます。
関連項目:
要素ツール DOM ツリーの編集が更新後に失われる
HTML ソース ファイルを変更するには、[要素] ツールの代わりに [ソース] ツールの [ワークスペース] タブを使用する必要があります。
DOM ツリーの編集>要素ツールの制限事項:
要素ツールでは、ブラウザー エンジンがページを読み込んだときに作成された HTML ドキュメントの DOM 表現を変更できます。 ただし、DOM への変更を HTML ソース ファイルにマップし直すことはできません。 要素ツールの DOM ツリーを使用して HTML コンテンツに変更を加えることができますが、DOM ツリーに対する変更はディスクに保存されず、現在のブラウザー セッションにのみ影響します。
関連項目:
[ソース] ツールの [>Page] タブの制限事項:
ソース ツールの [ページ] タブでは、ファイル システムへの変更を保存できません。
- [ ページ ] タブで開いた HTML ファイルは編集できません。
- [ ページ ] タブで開いた CSS または JS ファイルは編集できますが、Web ページの更新後も編集は保持されません。
次の手順では、 要素 ツール DOM ツリーの編集がページ更新全体で保持されていないことを示します。
ワークスペース のチュートリアル ([ソース] ツールの [ワークスペース] タブ) で説明されているように、ワークスペースのデモを設定します。
DevTools で、 要素 (
</>) ツールを選択します。DOM ツリーの
<h1>要素で、DevTools Workspaces Demoテキスト文字列を選択して削除し、テキスト文字列をI Love Cake入力して Enter キーを押します。 レンダリングされた Web ページには、新しい見出しテキスト I Love Cake が表示されます。
[ソース] ツールを選択し、[
index.html] を右クリックし、[フォルダーを含むで開く] を選択します。エクスプローラーまたは Finder が開きます。
Visual Studio Code などのテキスト エディターで、
/Demos/workspace/ディレクトリにあるindex.htmlファイルを開きます。 先ほど行った変更は表示されません。見出しには、"I Love Cake" ではなく "DevTools Workspaces Demo" が読み上げられます。ブラウザーで、デモ ページを更新します。
編集した DOM ツリーが破棄され、 ディレクトリにある変更されていない ファイルから DOM が再作成されたため、ページは元の見出し "DevTools Workspaces Demo" に戻ります。
DOM ツリーの編集が保存されない理由
上記のセクションに従って 、Elements の DOM ツリーを変更することはできません。
[要素] ツールに表示されるノードのツリーは、ページの DOM を表します。
ページを表示するために、ブラウザーはネットワーク経由で HTML をフェッチし、HTML を解析して DOM ノードのツリーに変換します。
ページに JavaScript がある場合、その JavaScript は DOM ノードを追加、削除、または変更できます。 CSS は、
contentプロパティを使用して DOM も変更できます。ブラウザーは最終的に DOM を使用して、ブラウザー ユーザーに表示するコンテンツを決定します。
したがって、ユーザーに表示されるページの最終的な状態は、ブラウザーがフェッチした HTML とは大きく異なる場合があります。
これにより、DOM は HTML、JavaScript、CSS の影響を受けるので、DevTools が 要素 ツールで行った変更を保存する場所を解決するのが困難になります。
つまり、ブラウザー エンジンが構築した DOM ツリーは、サーバーからダウンロードされた HTML ドキュメントとは異なります。
緑色の "マップされた" ドットをファイルに表示する
緑色の "マップされた" ドットが DevTools のファイル ( [ワークスペース ] タブなど) に表示されなくなった場合。または、 変更 ツールに予想される変更が表示されない場合:
DevTools が表示されたら、Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ( Ctrl + Shift + R)] を選択します。
DevTools のファイルの横にある緑色の "マップ済み" ドットは、DevTools が Web サーバーから受信したページのネットワーク リソースと、
/Demos/workspace/ディレクトリ内のローカル ソース ファイルとの間にマッピングを確立したことを示します。 DevTools で追加した新しいファイルは、マップ済みとして示されるために、サーバーによって返される必要があります。
ワークスペースに新しい .js ファイルを追加し、追加した .js ファイルに緑色の "同期" 円を表示し、 ファイルを [変更 ] ツールで表す場合:
<body>タグ内の行<script src="test.js"></script>など、HTML ファイルに追加された.jsファイルを参照します。行
console.log('hello from test.js');など、.jsファイルにコードがあることを確認します。Ctrl + S (Windows、Linux) または Command + S (macOS) を押します。 変更が保存され、アスタリスクは消えます。
DevTools が表示されたら、Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ( Ctrl + Shift + R)] を選択します。
関連項目:
関連項目
- ワークスペース チュートリアル (ソース ツールの [ワークスペース] タブ)
- DevTools のサンプル コードのソース ツールの [ワークスペース] タブからデモ フォルダーを開きます。
- [変更] ツールを使用してファイルの変更を追跡する
- クイック ソース ツールを使用してソース ファイルを表示または編集する
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。
