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

Sofia Emelianova
Sofia Emelianova
GitHub

[変更] タブでは、以下に対する変更を追跡できます。

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

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

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

[変更] タブを開く

[変更] タブを開くには:

  1. DevTools を開きます。

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

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

    Show Changes コマンドの実行

または、右上で [Customize and control DevTools] > [More tools] > [Changes] をクリックします。

変更" width="800" height="460">

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

変更を表示して理解する

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

  1. DevTools を開きます。

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

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

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

[変更] タブでハイライト表示された差分

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

CSS の変更をコピーする

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

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

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

  2. [変更] タブの下部にある コピー] をタップします。 [コピー] ボタンをクリックします。

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

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

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

元に戻すボタン