変更: HTML、CSS、JavaScript の変更をトラッキングする

Sofia Emelianova
Sofia Emelianova
GitHub

[Changes] パネルを使用して、DevTools 内で行われたコードの変更を追跡します。

概要

[変更] パネルで、次の変更を追跡します。

[Changes] パネルには、DevTools 内で行った変更のみが表示されます。DevTools またはページを再読み込みすると、変更は表示されなくなります。

DevTools でページの読み込み後も変更を維持するには、ローカル オーバーライドの手順を行います。

DevTools でローカルソースに変更を書き込むには、ワークスペースを使用したファイルの編集と保存の手順を行います。

[変更] パネルを開く

[変更] パネルを開くには:

  1. DevTools を開きます。

  2. Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux、ChromeOS）を押して、コマンド メニューを開きます。

  3. 「changes」と入力し、[変更を表示] を選択して、Enter キーを押します。

    Show Changes コマンドの実行

または、右上の [DevTools のカスタマイズと制御] >その他のツール >変更。

[その他のツール] プルダウンの [変更] オプションにフォーカス

デフォルトでは、DevTools は DevTools ウィンドウの下部の [Drawer] に [Changes] パネルを表示します。

変更を表示して理解する

変更内容を表示するには:

  1. DevTools を開きます。

  2. ソースに変更を加えます。

  3. [変更] パネルを開き、パネルの右側でファイルを選択します。

  4. 次の内容をハイライト表示した diff の出力を確認します。

[変更] パネルでハイライト表示された差分

[Changes] パネルは、diff の出力を自動的にプリティ プリントします。そのため、横方向にスクロールしなくても変更を 1 行で確認できます。

CSS の変更をコピーする

[要素] で CSS に変更を加えた場合 >スタイル）があれば、1 つのボタンですべてのスタイルをコピーできます。

  1. [変更] パネルを開き、パネルの右側で、変更した CSS ファイルを選択します。

    コピー] をタップします。

  2. [Changes] パネルの下部にある コピー] をタップします。 [Copy] ボタンをクリックします。

ファイルに加えた変更をすべて元に戻す

ファイルに加えた変更を元に戻すには:

  1. [変更] パネルの左側で、元に戻す変更を含むファイルを選択します。
  2. 下部のアクションバーで、元に戻す [現在のファイルにすべての変更を元に戻す] をクリックします。

元に戻すボタン