How can I copy all text in Chrome's "Elements" inspector?

macos google-chrome webkit google-chrome-devtools inspector
rubik's sphere picture rubik's sphere · Aug 13, 2017 · Viewed 8.7k times · Source

I would like to copy all of the expanded code found in the "Elements" pane of Google Chrome's WebKit inspector to my clipboard. I'm on OS X.

Here is a screenshot of this pane (on the left side of the screen):

It appears that I am only able to select individual lines or sections, but not the entire text.

Answer

rubik's sphere picture rubik's sphere · Aug 14, 2017

I've found the answer to my question. The solution is mentioned obliquely in parentheses in step one of the following answer:

You have to right-click the topmost <html> element, and then click Edit as HTML.

The full code will now exist in a standard, editable text field, where you can finally Select All and Copy the text contents to the clipboard.

Related questions

Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so …

Read More
Where to find extensions installed folder for Google Chrome on Mac?

I can not find them under ~/Library/Application Support/Google/Chrome/; Where are they? Mac Pro 10.8.4 Chrome Version 26.0.1410.65

Read More
Prevent "overscrolling" of web page

In Chrome for Mac, one can "overscroll" a page (for lack of a better word), as shown in the screenshot below, to see "what's behind", similar to the iPad or iPhone. I've noticed that some pages have it disabled, like …

Read More