4

I know I can edit HTML elements in Chrome / Firefox inspector. But how can I save changes to the local file on my desktop?

  • Duplicate, https://www.google.com/url?sa=t&source=web&rct=j&ei=CnVDU9e_GfPp0QH-y4H4DQ&url=http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools&cd=1&ved=0CCcQFjAA&usg=AFQjCNHL01oRarSp6uYFaLZiEiGAxVRX1g&sig2=oLvQnPO21gOms0YzMr31Mw – Grady D Apr 08 '14 at 04:04
  • 1
    No duplicate. It's about HTML elements, not CSS sources. –  Apr 08 '14 at 04:06
  • Sorry, missed that detail. – Grady D Apr 08 '14 at 04:06

4 Answers4

1

Chrome is able to do some stuff via workspaces. Open devtools go to Sources add folder to workspace pick your index.html (or whatever) edit and save by clicking ctrl+s. Refresh browser and you'll see that changes are permanent. You can't however go to Elements/Inspector pick some tag change it and save because "DOM!==HTML".

daGo
  • 2,584
  • 26
  • 24
0

Yes you can edit a locally saved html file in IE9 by right clicking the page in the browser window, choosing "view source" which opens in notepad and editing the code and then go to file and save the changes.

You can do the same thing In Firefox by opening Firebug and then opening the Firebug editor which is notepad.

I just thought I remembered doing it by just right clicking the page and opening "view source" in Firefox just as I did in IE9.

KesaVan
  • 1,031
  • 16
  • 32
  • Thanks for the answer, but I didn't ask about IE9 or Firebug. And in Firefox the changes you make through the inspector doesn't seem to actually change the local file. –  Apr 08 '14 at 04:31
  • A workflow that many developers are used to is tweaking the rules in the Style Inspector’s rule view. Once they have the desired look in hand, they want to copy the changed rule straight out of the Style Inspector. Unfortunately, the rule view did not support copying of rules. I say did not, because this improvement recently landed – KesaVan Apr 08 '14 at 04:40
0

View Source in Firefox allows you to play around with your code and edit it but to save and edit the actual working file requires opening it up, making those same changes, then saving. I'd suggest using the developer tools and once you have what you want, copying and pasting the altered source code to use in the original file. If you have firebug and the firebug editor I think you may then be able to actually update the file itself. Chrome allows you to edit JavaScript like that but I'm not sure about HTML and CSS

Robyn
  • 91
  • 1
  • 9
0

I have the same problem, how to edit the DOM html and save the results. On my PC I can effectively do this operation using Scratchpad by changing the file type to all, open the file, edit it, do a save, then refresh the page. With a bit of messing around you can copy and paste from the Inspector to the Scratchpad. It's pretty hacky, but it does work.

However, one of my students who is using a Macbook AIR can't edit html files with ScratchPad, she can edit .js files, but all the html files are grayed out and can't be clicked. Bottom line is I don't know if this "solution" works for all systems.

RDoc
  • 185
  • 2
  • 8