変更ツールを使用してファイルの変更を追跡する

変更ツールは、DevTools で CSS または JavaScript に加えた変更を追跡します。 DevTools を使用してサーバーから送信された Web ページファイルのコピーを変更した後に、実際のソースファイルに加える変更を示します。

変更された 2 つのファイルと、選択したファイルの変更を示す変更ツール

変更ツールを使用して、すべての変更をすばやく表示して、ソースコードエディターの実際のソースファイルにそれらの変更を再適用します。

[その他のツール] アイコンをクリックして、[変更] ツールを開きます

[ アクティビティバー ] または [ クイックビュー ] ツールバーで、[ その他のツール ] () ボタンをクリックし、[ 変更] を選択します。

[変更] ツールは、使用したツールバーに応じて、アクティビティバーまたはクイックビューで開きます。

コマンドメニューを使用して変更ツールを開くには:

コマンドメニューを開くには、Windows/Linux で Ctrl + Shift + P キーを押すか、Mac の場合は Command + Shift + P キーを押します。
入力の変更を開始します。 [ 変更の表示] コマンドが強調表示されています。
[Enter] キーを押します。 [クイックビュー] パネルで [変更] ツールが開きます。

変更された各ファイルがサイドウィンドウに一覧表示されます。ファイルを選択すると、変更がビューとして diff 表示されます。ファイル全体は表示されませんが、コンテキストの場合は、変更された行の上と下の数行と共に変更された行のみが表示されます。

次のdiffビューは、ファイルの異なる部分に 2 つの変更があったことを示しています。 1 つの変更は挿入であり、1 つの変更は複数の削除された行です。

Diff ビュー

変更の種類	インジケーター
削除された行	コードから削除された各行の前には、 `-` が付き、赤で表示されます。
行を追加しました	それぞれの新しい線の前にが `+` 含まれており、緑色に色付けされています。
変更された行	線と`+`線`-`の隣接するペア。

変更は、行番号の 2 列で、個々のコード行の挿入または削除として表されます。左側の列は古いファイルの行番号を表し、右側の列は新しいファイルの行番号を表します。

[変更] ツールで変更された行をクリックすると、[ソース] ツールでファイルが開き、変更された行までスクロールされます。

すべての変更を元に戻すには、[ 変更 ] ツールの下部にある [ すべての変更を現在のファイルに戻す ] () ボタンをクリックします。

変更の元に戻す

縮小されたファイルに変更を加えた場合、変更ツールを使用すると、水平方向にスクロールして、縮小されたすべてのコードを表示できます。

長いコード行の表示

水平方向にスクロールするには、水平スクロールバーをクリックするか、左方向キーまたは右方向キーを押します。