このチュートリアルでは、実際のプロジェクトで使用できるようにワークスペースをセットアップして練習します。ワークスペースを使用すると、DevTools 内で行ったソースコードの変更内容をパソコンに保存できます。
概要
Workspace では、DevTools で行った変更をパソコン上の同じファイルのローカルコピーに保存できます。次のような例を考えてみましょう。
- サイトのソースコードがパソコンにインストールされています。
- ソースコード ディレクトリからローカル ウェブサーバーを実行しているため、
localhost:8080
でサイトにアクセスできます。 - Google Chrome で
localhost:8080
を開き、DevTools を使用してサイトの CSS を変更します。
ワークスペースを有効にすると、DevTools 内で行った CSS の変更がパソコンのソースコードに保存されます。
制限事項
最新のフレームワークを使用している場合は、おそらく、メンテナンスが容易な形式から、可能な限り迅速に実行できるように最適化された形式にソースコードが変換されます。ワークスペースでは通常、ソースマップを利用して、最適化されたコードを元のソースコードにマッピングできます。
DevTools コミュニティは、さまざまなフレームワークやツールでソースマップの機能をサポートするよう取り組んでいます。選択したフレームワークでワークスペースを使用する際に問題が発生した場合や、カスタム構成を行った後にワークスペースが機能した場合は、メーリング リストのスレッドを開始するか、Stack Overflow で質問して、知識を DevTools コミュニティの他のメンバーと共有してください。
関連機能: ローカル オーバーライド
ローカル オーバーライドは、ワークスペースに似た DevTools のもう 1 つの機能です。ローカル オーバーライドを使用すると、バックエンドの変更を待たずにウェブ コンテンツやリクエスト ヘッダーをモックできます。また、ページの変更をテストする際に、ページの読み込み後にそれらの変更を確認する必要があるものの、変更をページのソースコードにマッピングする必要はありません。
ステップ 1: セットアップ
このチュートリアルを完了すると、ワークスペースを実際に操作できます。
デモをセットアップする
- このデモ リポジトリのクローンをパソコンのディレクトリに作成します。たとえば、
~/Desktop
とします。 ~/Desktop/devtools-workspace-demo
でローカル ウェブサーバーを起動します。以下にSimpleHTTPServer
を起動するためのサンプルコードをいくつか示しますが、任意のサーバーを使用できます。cd ~/Desktop/devtools-workspace-demo # If your Python version is 3.X # On Windows, try "python -m http.server" or "py -3 -m http.server" python3 -m http.server # If your Python version is 2.X python -m SimpleHTTPServer
このチュートリアルの残りの部分では、このディレクトリを
/devtools-workspace-demo
とします。Google Chrome でタブを開き、ローカルホスト版のサイトに移動します。
localhost:8000
のような URL でアクセスできるはずです。正確なポート番号は異なる場合があります。
DevTools を設定する
ローカルでホストされるデモページで DevTools を開きます。
[ソース] > [ワークスペース] に移動し、クローンを作成した
devtools-workspace-demo
フォルダにワークスペースを設定します。これにはいくつかの方法があります。- フォルダを [ソース] の [エディタ] にドラッグ&ドロップします。
- [フォルダを選択] リンクをクリックして、フォルダを選択します。
- [ フォルダを追加] をクリックして、フォルダを選択します。
上部のプロンプトで [許可] をクリックし、ディレクトリに対する読み取りと書き込みの権限を DevTools に付与します。
[ワークスペース] タブで、index.html
、script.js
、styles.css
の横に緑色のドットが表示されます。これらの緑色のドットは、DevTools がページのネットワーク リソースと devtools-workspace-demo
内のファイルとの間のマッピングを確立していることを示します。
ステップ 2: CSS の変更をディスクに保存する
テキスト エディタで
/devtools-workspace-demo/styles.css
を開きます。h1
要素のcolor
プロパティがfuchsia
に設定されていることに注目してください。テキスト エディタを閉じます。
DevTools に戻り、[要素] タブをクリックします。
<h1>
要素のcolor
プロパティの値を任意の色に変更します。手順は次のとおりです。- [DOM Tree] の
<h1>
要素をクリックします。 - [スタイル] ペインで、
h1 { color: fuchsia }
CSS ルールを見つけて色を好みに変更します。この例では、色は緑色に設定されています。
[Styles] ペインの
styles.css:1
の横にある緑色のドット は、変更内容が/devtools-workspace-demo/styles.css
にマッピングされていることを意味します。- [DOM Tree] の
テキスト エディタで
/devtools-workspace-demo/styles.css
を再度開きます。これで、color
プロパティが任意の色に設定されました。ページを再読み込みします。
<h1>
要素の色は、引き続き好きな色に設定されています。これが機能するのは、変更を行った時点で DevTools がその変更をディスクに保存したためです。ページを再読み込みすると、ローカル サーバーは変更されたファイルのコピーをディスクから提供しました。
ステップ 3: HTML の変更をディスクに保存する
[要素] パネルから HTML を変更してみてください
- [要素] タブを開きます。
h1
要素のテキスト コンテンツ(Workspaces Demo
)をダブルクリックし、I ❤️ Cake
に置き換えます。テキスト エディタで
/devtools-workspace-demo/index.html
を開きます。先ほど行った変更が適用されていません。ページを再読み込みします。ページが元のタイトルに戻ります。
省略可: 動作しない理由
- [要素] パネルに表示されるノードのツリーは、ページの DOM を表します。
- ページを表示するために、ブラウザはネットワーク経由で HTML を取得し、HTML を解析して DOM ノードのツリーに変換します。
- ページに JavaScript が含まれている場合、その JavaScript は DOM ノードを追加、削除、変更できます。CSS でも
content
プロパティを使用して DOM を変更できます。 - ブラウザは最終的に DOM を使用して、ブラウザ ユーザーに表示するコンテンツを決定します。
- そのため、ユーザーに表示されるページの最終的な状態は、ブラウザが取得した HTML と大きく異なる場合があります。
- DOM は HTML、JavaScript、CSS の影響を受けるため、[要素] パネルで行った変更を保存する必要がある場所を DevTools で解決するのが難しくなります。
つまり、DOM ツリー !==
HTML です。
ソースパネルから HTML を変更する
ページの HTML に対する変更を保存する場合は、[ソース] パネルで行います。
- [ソース] > [ページ] に移動します。
- [(番号)] をクリックします。ページの HTML が開きます。
<h1>Workspaces Demo</h1>
を<h1>I ❤️ Cake</h1>
に置き換えます。- command+S(Mac)または Ctrl+S(Windows、Linux、ChromeOS)を押して変更を保存します。
ページを再読み込みします。
<h1>
要素には引き続き新しいテキストが表示されています。/devtools-workspace-demo/index.html
を開きます。<h1>
要素には新しいテキストが含まれます。
ステップ 4: JavaScript の変更をディスクに保存する
[Sources] パネルでは、JavaScript に変更を加えることもできます。ただし、サイトに変更を加える際に、[要素] パネルや [コンソール] パネルなど、他のパネルへのアクセスが必要になる場合もあります。[ソース] パネルを他のパネルと並べて開くという方法があります。
- [要素] タブを開きます。
- Command+Shift+P キー(Mac)または Ctrl+Shift+P キー(Windows、Linux、ChromeOS)を押します。コマンド メニューが開きます。
「
QS
」と入力して、[Show Quick Source] を選択します。これで、DevTools ウィンドウの下部に [クイックソース] タブが追加されました。このタブには
index.html
の内容が表示されます。これは、[Sources] パネルで最後に編集したファイルです。[クイックソース] タブでは、[ソース] パネルにあるエディタを使用できます。このエディタを使用すると、他のパネルを開いた状態でファイルを編集できます。command+P キー(Mac)または Ctrl+P キー(Windows、Linux、ChromeOS)を押して [ファイルを開く] ダイアログを開きます。
「
script
」と入力し、devtools-workspace-demo/script.js を選択します。デモの
Edit and save files in a workspace
リンクに注目してください。定期的にスタイルが設定されます。[クイックソース] タブの script.js の末尾に次のコードを追加します。
document.querySelector('a').style = 'font-style:italic';
command+S(Mac)または Ctrl+S(Windows、Linux、ChromeOS)を押して変更を保存します。
ページを再読み込みします。これで、ページのリンクが斜体になりました。
次のステップ
ワークスペースには複数のフォルダを設定できます。そのようなフォルダはすべて、 [設定] > [ワークスペース] に表示されます。
次に、DevTools を使用して CSS を変更し、JavaScript をデバッグする方法を学習します。