google-chrome-devtoolsdynamic-html

When html is updated dynamically on a webpage how can I save the generated html so, for example, I can compare it with diff for dubugging?

I want to understand what changes are made to the html of a webpage when I use an image carousel. When I go to the next image in the carousel the html of the page updates. I would like to get a copy of the updated html so I can run diff and compare the changes to the original html.

I am interacting with the webpage through Chrome but only have access to the publicly-available source code at the moment.

I have been using Chrome's Inspect Element panel. In the 'Elements' tab I can see the html changing when I move the carousel to the next image. Despite watching the html update in the 'Elements' tab, each time I try to save the html I can only save the original html at best. Here is what I've tried:

  1. Open 'View Source' and save the source. In hindsight, I realised this fetches the source code fresh instead of loading the source code of the current view I'm looking at.
  2. Save the page directly from the page I'm on.
  3. Go to the 'Sources' tab in 'Inspect Elements' and save from there.
  4. Try to save from the 'Elements' tab directly, but I cannot figure out a way to do this. There is no save option and I cannot select the text to copy and paste.
  5. I've tried Googling and found related-sounding headings but these contained unrelated content.
  6. Tried Firefox's Inspect Element, which at appears to be built on the same functionality. I wonder if it's built on the same engine?

I am using Chrome 84 on Linux Mint 19 but I would be willing to use a different browser or other application that would work on my system.

I hope this is the correct Stack Exchange for this question. I initially looked at webapps.stackexchange but that didn't seem as good a match once I scanned through other questions.

Solution

  • In the 'Elements' tab of Inspect Elements right click on an html tag, for example <html>, and select 'Copy OuterHTML'. Paste the selection into a text editor.

    This works with both Chrome and Firefox. Firefox also gives the option to 'Copy InnerHTML'. The difference between the two is that 'OuterHTML' copies the opening and closing tags while 'InnerHTML' only copies the contents within the tags.