In Chrome I can use the Developer Tools window to copy the HTML of a live web page from one tab to an other by querying escape(document.documentElement.innerHTML), copy-pasting the result to the Developer Tools window of the other tab, creating a new element there, and setting its .innerHTML. However, this doesn’t copy the CSS or the event handlers. I don’t care about JavaScript and the event handlers, but I want to copy both the HTML and the CSS. What is the easiest and yet faithful way to do that? I’m mostly interested in Google Chrome, but I’d consider solutions which work in Firefox as well.
I know that I can iterate over the the <link ...> and <style ...> tags and copy them, but that would be a bit indirect. I’d like to copy the concatenated, final version of the actual CSS of the page.
You can select the element in the originating page and drag-select+copy all its CSS in the Styles pane, then paste it into a stylesheet in the target page. As of now, there’s not better way to it.
If you have any ideas about how it might work another way, please file a feature request at http://new.crbug.com (start the summary with “DevTools: ” to get a faster issue triage).