CODEWITHSUNDEEP
htmlgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
Cnorwood7641
Cnorwood7641

Reputation: 336

Save Chrome dev console html changes

The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.

Thanks

Upvotes: 5

Views: 10707

Answers (3)

Volkan Sen
Volkan Sen

Reputation: 63

You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree. So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.

Upvotes: 0

jaredwilli
jaredwilli

Reputation: 12348

You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.

Upvotes: 1

Gideon Pyzer
Gideon Pyzer

Reputation: 24068

Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.

Upvotes: 0

Related Questions