[変更] タブで、以下に対して行った変更を確認します。
- ローカル オーバーライドが有効になっている [ソース] の HTML
- [要素] > [スタイル] または [ソース] の CSS
- ソース内の JavaScript
[変更] タブには、DevTools で行った変更が表示されます。DevTools またはページを再読み込みすると、変更は表示されなくなります。
ページが読み込まれる前に DevTools で変更が維持されるようにするには、ローカル オーバーライドの手順を行います。
DevTools からローカルソースに変更を書き込むには、ワークスペースでファイルを編集、保存するの手順に沿って操作します。
[変更] タブを開く
[変更] タブを開くには:
Command+Shift+P キー(Mac)または Ctrl+Shift+P キー(Windows、Linux、ChromeOS)を押して、コマンド メニューを開きます。
「
changes
」と入力して [変更を表示] を選択し、Enter キーを押します。
または、右上で [DevTools のカスタマイズと制御] > [その他のツール] > [変更] をクリックします。
変更" width="800" height="460">
デフォルトでは、DevTools ウィンドウの下部の [Drawer] に [Changes] タブが表示されます。
変更内容を表示して理解する
変更内容を確認するには:
- DevTools を開きます。
ソースを変更します。
- HTML: まず、[ローカル オーバーライド] を有効にしてから、[ソース] で変更を加えます。
- [要素] > [スタイル] または [ソース] の CSS
- ソース内の JavaScript
[変更] タブを開き、タブの右側でファイルを選択します。
diff
の出力で、以下の項目がハイライト表示されているのを確認します。
[変更] タブでは、diff
出力が自動的に出力されるため、変更を 1 行で確認するために横方向にスクロールする必要はありません。
CSS の変更をコピーする
[要素] > [スタイル] で CSS に変更を加えた場合は、そのすべてを 1 つのボタンでコピーできます。
[変更] タブを開き、タブの右側で、変更を加えた CSS ファイルを選択します。
[変更] タブの下部にある [コピー] ボタンをクリックします。
ファイルに行ったすべての変更を元に戻す
ファイルに加えた変更を元に戻すには:
- [変更] タブの左側で、元に戻す変更があるファイルを選択します。
- 下部のアクションバーで、 [すべての変更を現在のファイルに戻す] をクリックします。