web-dev-qa-db-ja.com

Chrome開発者ツールで行われたすべての変更を表示

Chrome開発者ツールを使用して行ったすべての変更を表示するにはどうすればよいですか？

例：

  1. ウェブサイトを開きます。
  2. openChrome Developer Tool。
  3. タグのスタイル属性を変更します。
  4. cssファイルに新しいスタイルを追加します。
  5. javaScript関数を変更します。

これらの変更を確認する方法は？何かのようなもの：

    page.html:56 Change style attribute of foo to bar.
    page.css:21 Lines added: 21,22,23,24.
    page.js:12 Line modified.
cssgoogle-chromebrowsergoogle-chrome-devtools
43
MaciejLisCK

そのため、ローカルの変更は、行ったファイルの変更に対して機能しますが、インラインスタイルを追加したり、DOMを変更したりしても、それらは役に立ちません。

変更の前後にDOMをキャプチャするメソッドを使用するのが好きです。

copy(document.getElementsByTagName('html')[0].outerHTML)

これにより、DOMの現在の状態がコピーバッファーに配置されます。

これを、vimdiff、 http://www.mergely.com/ またはMeldのような差分ツールの左側の列に貼り付けます。

その後、変更を完了し、コピーコマンドを再度実行します。これを差分ツールの右側の列に貼り付けて、変更を確認します。

diff view

記事全文： https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

14
RoccoB

Chrome 65現在、変更タブがあります!!

はい、本当に素晴らしいです:)

https://developers.google.com/web/updates/2018/01/devtools#changes

12
CrazyTim

Local Modifications 機能を試してみてください：

DevToolsは、ローカルファイルに加えられたすべての変更の改訂履歴も保持します。ツールを使用してスクリプトまたはスタイルシートを編集し、変更を保存した場合は、ソース（またはソース領域内）でファイル名を右クリックし、[ローカルの変更]を選択してこの履歴を表示できます。

enter image description here

ローカル変更パネルが表示され、以下が表示されます。

  • 変更点の差分
  • 変更が行われた時間
  • ファイルが変更されたドメイン
9
apaul