Automatically Save CSS changes made in Chrome DevTools (Using Workspace)
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- When you open your inspector and change some of the CSS of your website, you want all that code to automatically save on your CSS file instead of copying and pasting the code. This is possible and it just takes a couple of minutes to setup using Chrome DevTools Workspace.
- Ask Me Anything: pensight.com/x/ieatwebsites
- Follow me on Twitter: / ieatwebsites
This video was perfect!!! Thank you for tackling such a small but important problem!
You are very welcome!
Thank you man. I had to search through 5 videos befor finding yours .Your a life saver.
Dude, this video is 🔥🔥🔥! Thank you for teaching this! -- I shared this video to a development group I'm a part of. Hopefully it will drive some traffic to your channel. Thanks again.
Awesome! Thank you so much for sharing !
Perfect. While working, suddenly this idea came to mind. Cause it takes lots of time to copy and paste. Thanks, dude. Help me perfectly. +1
You are very welcome! 😁
Simple and very useful. Thanks!
Awesome Tutorial thank you! Is there a way to get this to work with SCSS/SASS?
Fantastic! simply amazing!!! I didn't know it was possible to do this, I did some tests through inspect, but I always lost the code after refresh, so I had to copy everything... your tip will save many hours of work from now on. Thank you very much and congratulations!
This isn't working as expected. If I go into the sources tab and make edits to the file from there, it works. But if I'm in the elements tab, I can make changes, but they don't save. If I hot cmd+s from the sources area, it saves fine. If I hit cmd+s from the elements area, it tries to save a new version as if I'm downloading the webpage.
were you able to find a solution to this?
@@brettrobin10 No. I haven't even tried since.
That's a fantastic way to improve the workflow! Does a similar feature exist for Firefox as well?
awesome tutorial! very helpful
I think I remember somebody in the DevTips Discord showing this off a while ago. It's pretty cool! I haven't used it yet
Hi timo! Yeah. A lot of people don’t use it and I think is very helpful.
Is it possible to have "I" buttons that explains why css values don't work like in the firefox?
You're a lifesaver. Thanks!
Is there any way to save html changes as well?
Can we edit and save data in read only google sheet?
is there any better way than this for react? tried it out in react wasnt the best.
can we undo the recent changes in devTools if we want previous data?
Is there a way to get this functionality without autosaving? Like, i wanna experiment with the CSS, and if it works, then i want to manually save it?
Hi there hope you are well. I have started to use devtools but I have an issue, wonder if you could help me please? Those arrows to the right side (style section) which you can toggle on/off , well on my system those tick boxes are just not there at all. Is there a setting to make them appear? Ps I use chrome .\thanks in advance
Hello, Do I need to do some additional setting to make this work for web frameworks like Angular (because it is currently not working in Angular)?
I didn’t tested using frameworks. Sorry.
Can we do this for react?
hello brother whether this can be said to change permanently and whether it also requires additional software or what ? ... please explain. thank you very much
Awesome as always 👍😀
Thank you Ranga! 😄
are changes made in chrome devtool saved automatically with some AUTO SAVE? because I need to use CTRL+S for saving changes. If Yes, how you set AUTO SAVE mode in Chrome Dev Tool ?
I have a page I use daily online and I removed a lot of the clutter using the dev tools. How can I save those changes and load them whenever I view that page? Is this even possible?
I work remotely and the files in my IDE use SFTP. Looks like this only works on a local website on one's machine correct?
Thanks for sharing 😄
It's very helpful 👍
You welcome!
Great tutorial. Thank you!
Thanks! And you welcome 😃
can i do this to other websites that i dont own ? like facebook ?
I have a wordpress website. It looks totally different than your example. Can this method work on a wordpress site?
bro how to get the root folder of any website please tell, i do not have any idea about root folder
Sir agr ye kam nhi kr rha ho to kya error ho skte h
Are the changes saved in the main theme or Child theme?
I watched your video, It's actually a lot simpler than I had expected, but for some reason as soon as I close the page all of my edits return to their defaults. I redesigned this page 3 times since yesterday with the same results. Any thoughts or ideas would be greatly appreciated. Thank You
Did you figure it out? I'm having the same issue.
Awesome man you made my day
I’m glad! Thanks.
It doesn’t work for me. My files do not show up green
Can i apply this on wordpress website?
does it work in pdf images?
Great content sir ❤️
Thanks!!
Where you het that files? Please answer
Great video, I followed all the steps but when I click on the + Add folder to the workspace it doesn't show index.html, main.js, and style CSS. How do I add those? Thank you for the video and help.
what a question😁
Why am I not getting the green dots?
Does it work with WordPress?
Nice bro it's working good!
A brilliant lesson !
Thanks!
Good evening, will it be possible to edit my files from Devtools, but directly in my server and not locally?
Not sure. But thats not a good idea
Hi, do you know a work arround I wanted to modify text on an web app or login page if I dont have access to the HTML file? I would like to translate many parts which aren't translated on this one & find a way to save all modification & give it to anyone else who uses the same webapp. Great video by the way & thanks in advance.
can someone please tell me how to find a root folder of my page? i am absolutly not fluent in any of this type of stuff and google isnt helpfull.. is it a folder i should create? i have my page on woocommerce/wordpress, please help :)
This is wonderful! Thank you. This worked perfectly for my CSS file, but for some reason, when trying to edit my html file, instead of the little green light, I simply get an asterisk next to the file name and it doesn't sync my changes. Anyone else have this issue? For example, it will just show index.html*
Hi,did you find a solution for this?🥲
Not working on my PC. No automatic saving happening.
Ye elements pr kam nhi kr rha h
Not working in react app
it's really awesome.❤✨✨
That works well but I was hoping that it it would just save my changes to a file, when I'm playing around I don't like to touch source code just in case of a major boo-boo.
Thank you!
sir i can't edit ?
Thanks a lot man, you save my time. :D Greetings :)
Thank you, you are my man !!!!!!
Thanks 😁
Helpful 👍
Does this work for SASS changes
I just tried and was only working in css files :(
it doesn't work with react
Thanks dude !!!
No problem!
cool, it works even after 3 years later
I never knew you could use chrome as a web IDE
tnq so much bro
You welcome!
thank you
You welcome!
undo?
ty G
Thank u
Now, to get it to work with CSS-in-JS :)
Pavel!! Yesss
Thanks
You welcome!
dharman 😳
Great but no jobs
best thing in the internet you should have some kind of bitcoin wallet you know this is GRET!!!!
Thank you!! A Bitcoin wallet for donations?
Who is here from nen ninja? Djangonautic? Mr Shaun?
From where!?