CODEWITHSUNDEEP
htmlgoogle-chromefirefox
user648340
user648340

Reputation:

Chrome / Firefox inspector to edit HTML

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

Upvotes: 4

Views: 4447

Answers (4)

daGo
daGo

Reputation: 2968

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".

Upvotes: 1

RDoc
RDoc

Reputation: 215

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.

Upvotes: 0

Robyn
Robyn

Reputation: 91

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

Upvotes: 0

KesaVan
KesaVan

Reputation: 1031

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.

Upvotes: 0

Related Questions