Chrome Developer Toolsの変更履歴管理機能が便利だった話

ChromeブラウザのDeveloper ToolsにてCSSやJavaScriptのコードが編集出来たりしますが、その変更履歴を管理する機能があり、めちゃめちゃ便利なのでメモ。

SlideShareのChrome Developer Toolsを使いこなそう！を参考にさせて頂きました。

サンプル画面及びソースコード

以下の画面にて確認。

上記でCSSをいじってみたりした想定です。

変更してみる。

上記HTMLを表示し、Google Developer Toolsを表示します。表示は以下の通り。

• 右上の設定アイコン→ツール→デベロッパーツール
• ショートカット→(Windows:Ctl+Shift+i,Mac:Command + Option + i)

で、Sourceタブを表示します。
その後、左の矢印のアイコンをクリックし、今回はmystyle.cssを編集したいのでこれをクリックします。

とりあえずfont-sizeを50pxに変更し、保存(MacならCommand+s)します。
その後、右クリック→Local Modificationsを選択すると画面下に変更履歴が表示されます!!!

しかも。。
diffが見れます!!すげー!!!

その後、変更して、保存とするとここの履歴にどんどん追加されていきます。

変更を元に戻す場合

色々編集したけど最初の状態(オリジナルのファイルの状態)に戻したい、という時は変更履歴の箇所にあるrevertをクリックする事で元の状態になります。

なお、上記の方法だと今までの変更履歴も全て削除されます。変更履歴は残したいけど、内容を最初の状態に戻したい場合はapply original contentを選択する事で、変更履歴を残して元の状態に戻す事が出来ます。(正確には元の状態に戻す、という変更を行っています。なので、変更履歴の最終履歴として元のファイルへ戻した処理が追加されています。)

特定の変更を反映したい

変更を反映したい内容の箇所でapply revision contentを選択すると対応する変更箇所のみを現在の状態に反映する事が出来ます。

最後に

色々Google Developer Toolsは便利な機能が有りますが、この機能は特に便利だと思いました。今後の開発では是非有効活用していきたいです。