How do I save my html/css edits in Dev Tools?

#1

Hi,

Total beginner but I have searched for the answer to this question and haven’t seem to have found a definitive answer.
If I am using Dev Tools (Chrome in my case) to edit and test my code how do I save the progress to my local machine?
I am following the Odin Projects web development 101 and am currently in the very early stages of the Google Homepage clone project. There was a module on using web tools to improve productivity but none of the resources given offered any guidance as to how to actually save your code as you go when you use dev tools. When you refresh or escape out all your progress is lost!
I really want to nail this because using visual studio code and constantly refreshing another window is not proving very productive for me.

Thanks in advance and i’m sorry if this is an obvious question - I did search the forum beforehand for anything similar but apologies if I missed a solution.

#2

DevTools wouldn’t save changes to the disk as (for security reasons) browsers do not have such permissions. You need to download code editor, like VSCode or Atom to save files on your disk and then open files with the browser.

Alternatively you can use online IDE, like Codepen, REPL or CodeSandbox.

#3

Thank you for your reply Snigo!
So, to be clear, the working practice would be trying out and playing with your code in Dev Tools for easy debugging etc and then copy pasting your changes into one of the IDE’s you mention above?

#4

Hey there,

you are totally right!

#5