検証ツールで複数箇所を変更した後、一箇所だけ元に戻すには？

Question

Google Chromeの検証ツールの使い方について。
HTML、CSSの勉強を始めたばかりの初心者です。

Google Chrome検証ツールで複数箇所を変更した後、その内１箇所だけを元の状態に戻したい……という場合は、どのような操作をすればいいでしょうか？
ページの読み込みをすると、変更した箇所のすべてが元の状態に戻ってしまいます。

初歩的な質問で申し訳ありませんが、よろしくお願いいたします。

Answer 1

Chrome65から、今回の質問に合いそうな機能が追加されています。
https://developers.google.com/web/updates/2018/01/devtools

ローカルオーバーライドを使えば、変更したソースがローカルに保存されて、リロード時にそこを読みに行くようになります。

changesタブには変更履歴が残りますので、そこから元に戻すことも可能かと思います。

ぜひお試しください。

Comments

[Yuko_since2019]

コメントありがとうございます。
ローカルオーバーライド、使い方を調べてみます。
ありがとうございました。

Answer 2

右上の＋をクリックすると、選択している要素のセレクタに対してのスタイルの変更ができます。
セレクタをクリックで変更もできます。
inspector-stylesheetというスタイルシートができてます。

inspector-stylesheetをクリックすると
変更した順番で上から記述されています。
そこで一番上プロパティ箇所を消すと最初に変更した一箇所だけ元に戻ります。

適用したい場合は、必要な箇所を既存cssファイルにコピペしてください。

Comments

[Yuko_since2019]

ありがとうございます。
変更した箇所が抜粋されてシートになるんですね。
試してみたいと思います。

Answer 3

Ctrl+zで「１つ前に戻る」ことはできるようなので（Ctrl+yで「１つ前に戻ったあと」１つ先に進む）、できるとしたらそれくらいです。
１つ前ではなく「任意の場所だけ」というと手動しかないと思います。

Comments

[Yuko_since2019]

早速のご回答、ありがとうございます。
Command +Zで前に戻ることはできるのですが……

例えば、「10箇所変更した後、最初に変更した一箇所だけを元に戻したい」という場面だと、やはり手動でやるしかないんですね……
その点は、不便なツールですね……

[m.ts10806]

そもそも利用者の都合によるものなので、"どれだけ変更するか"なんて分からないのにいちいち操作履歴を保存しておくわけにもいかないと思います。(それで動作が重くなって困るのは利用者ですし)
そもそも開発者ツールの利便性はそこではありませんし、どうしてもというのでしたら、そういうchrome拡張を探すか作っては？