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

ソフィア・エメリアノバ
Sofia Emelianova
GitHub

[変更] タブで、以下に対して行った変更を確認します。

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

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

DevTools からローカルソースに変更を書き込むには、ワークスペースでファイルを編集、保存するの手順に沿って操作します。

[変更] タブを開く

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

  1. DevTools を開きます。

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

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

    Show Changes コマンドを実行する

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

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

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

変更内容を表示して理解する

変更内容を確認するには:

  1. DevTools を開きます。

  2. ソースを変更します。

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

  4. diff の出力で、以下の項目がハイライト表示されているのを確認します。

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

[変更] タブでは、diff 出力が自動的に出力されるため、変更を 1 行で確認するために横方向にスクロールする必要はありません。

CSS の変更をコピーする

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

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

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

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

ファイルに行ったすべての変更を元に戻す

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

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

元に戻すボタン