saving changes made in 'elements' panel

Andrew Miller

unread,

Dec 26, 2010, 12:56:30 PM12/26/10

to Google Chrome Developer Tools

I like to 'live edit' a page by modifying it in the elements panel,
especially by modifying CSS attributes.

Is there a way to save these changes? Even if I 'Save Page As' in
chrome, it saves the original page without my modification. If I
refresh the page, my changes are gone.

pfeldman

unread,

Dec 28, 2010, 6:59:09 AM12/28/10

to Google Chrome Developer Tools

- To save present DOM content into HTML, you can invoke context menu
on the root DOM node and choose Copy as HTML.
- Saving modified CSS is only supported in Chrome 9 (that is currently
available on Beta channel). You should open Resources Panel there,
locate modified file and copy its content.

hamp...@gmail.com

unread,

Dec 26, 2012, 8:57:25 PM12/26/12

to google-chrome-...@googlegroups.com, pfel...@chromium.org

I have to say, it is really dumb that you can edit stylesheets directly in developer tools, but not html pages. For pages, you have to copy revisions and paste them into your text editor.

hamp...@gmail.com

unread,

Apr 21, 2013, 12:30:05 PM4/21/13

to google-chrome-...@googlegroups.com, pfel...@chromium.org, hamp...@gmail.com

yup, still incredibly dumb

John J Barton

unread,

Apr 21, 2013, 4:39:02 PM4/21/13

to hamp...@gmail.com, Google Chrome Developer Tools

You compare style sheets to the elements panel, but these are not similar. Style sheets are source code. Elements panel is the result of parsing and JavaScript operations.

CSS is a long list of rules, so updating CSS based on edits is relatively easy. HTML is a tree combining parsed source and computed branches. Updating HTML based on source edits is much, much more difficult.

jjb

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

beor...@gmail.com

unread,

Jun 24, 2013, 9:06:55 AM6/24/13

to google-chrome-...@googlegroups.com, socrat...@gmail.com

I def agree hamp...@gmail.com, I am making a newsletter which is going to be viewed by millions of people so I HAVE TO BE CAREFUL. I am starting off with another template which I have already created for the same company. I just want to go through the html DOM and delete sections I dont need. Now I have to do it manually and there is greater chance of messing it up :/

Timothée Boucher

unread,

Jun 24, 2013, 8:01:24 PM6/24/13

to google-chrome-...@googlegroups.com, socrat...@gmail.com, beor...@gmail.com

Hey beor...@gmail.com

I was testing that very quickly, so it might not work exactly as intended, but…

`document.documentElement.innerHTML` seem to give you what you want. (or `outerHTML`)

Or in the Elements panel, right click on the <html> tag and pick "copy as HTML".

You'll have to save to a file, but that's better than redoing it by hand.

Cheers,

Tim

Paul Irish

unread,

Jun 24, 2013, 8:59:17 PM6/24/13

to beor...@gmail.com, Google Chrome Developer Tools, socrat...@gmail.com

Aye, for your purposes this will be a very useful choice:

There is a fundamental difference between HTML markup and a DOM.

The DevTools and Firebug have long made a DOM look like HTML with a bunch of angle brackets, but that's just so it looks more natural that what DOM nodes really are:

For instance, if you used jQuery to hide any element, do you want <div style="display:none"> to be saved back to disk in your HTML?

Anyway, assuming JS doesn't manipulate your DOM significantly... doing this in the console is your best bet:

copy(document.documentElement.outerHTML)

--

image.png

Timothée Boucher

unread,

Jun 25, 2013, 1:23:57 AM6/25/13

to google-chrome-...@googlegroups.com, beor...@gmail.com, socrat...@gmail.com

Hi Paul,

thanks for the update on my reply.

But I'm not sure I know for sure which does which.

Are both methods ("Copy as HTML" and "document.documentElement.outerHTML") doing the same thing/giving the same output?

Both do give out the markup, right? But are they different with regards to manipulation through JavaScript? It sounds from your email that manipulation from JS won't necessarily show in the outputs of these technics, but I'm wondering if that's all or nothing or if just some stuff won't be reflected. For example, I could imagine that being the case that if I delete a node through JS it will be reflected in these methods, but if I modify some style, it won't…

Also, if I delete some nodes from the Elements panel, will both reflect that in their outputs?

Thanks!

Tim

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

PhistucK

unread,

Jun 25, 2013, 1:41:05 AM6/25/13

to Timothée Boucher, Google Chrome Developer Tools, beor...@gmail.com, socrat...@gmail.com

Yes, both of these methods are the same and, yes, generally, you get the JavaScript manipulated output.

Style changes within stylesheets are not reflected. Inline style changes are reflected (because they change the "style" attribute).

☆PhistucK

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

amanda...@gmail.com

unread,

May 10, 2014, 12:58:56 PM5/10/14

to google-chrome-...@googlegroups.com, Timothée Boucher, beor...@gmail.com, socrat...@gmail.com

This doesn't work for me. I have downloaded the extention and the server I have done everything that all the tutorials have told me to do, but I get no save options and no autosave. I am completely stuck and frustrated. I'm not an expert programer, but whenever I do css changes, they are only there until I close the browser or press refresh. Please help. I don't know what I'm doing wrong or what I need to do to get autosave to work. Even when I right click I dont get any sort of save or save as option anywhere, not in resources, not in sources.

Please Please Help!

Amanda

Pierre

unread,

Jul 29, 2014, 4:26:55 PM7/29/14

to google-chrome-...@googlegroups.com, timo...@gmail.com, beor...@gmail.com, socrat...@gmail.com, amanda...@gmail.com

I've been having the same problem as Amanda above since May.

I posted about it on the regular Chrome Product Forum and Chromium Forum and have been redirected here.

The Dev Tools window fails to save CSS changes when the window is closed & re-opened. Before May those changes would be persistent.

This is an issue if someone like me wants to make tons of cosmetic changes on-the-fly. One accidental window close and everything is lost, and it makes the Dev Tool window out of sync with the webpage window, where the changes are still applied.

CSS styling in Dev Tools in general also seems to be a little more temperamental recently; I used to be able to edit a value and immediately TAB out of it, and the CSS change would be applied. Now I have to wait a second or two before I press TAB, or else the edited value magically erases.

I'm currently on stable version 36.0.1985.125 m + Canary version 38.0.2107.2 (64-bit)

Andrey Lushnikov

unread,

Jul 30, 2014, 4:40:53 AM7/30/14

to google-chrome-...@googlegroups.com, timo...@gmail.com, beor...@gmail.com, socrat...@gmail.com, amanda...@gmail.com

Are you editing styles that come from style tag? If so, this is a known issue: https://code.google.com/p/chromium/issues/detail?id=394667

Otherwise, please file a bug.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/92462893-14f1-48d8-adec-1b512470b53c%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward