![]() ![]() When mirror editing is enabled, any change to the CSS done in the Styles editor will also reflect in the source document. With the browser developer tools inside Visual Studio Code, we have a new environment to think about this issue and we would love to hear what you think of the solution we have right now in the Edge DevTools for VS Code extension which we call CSS mirror editing. Often you will make a lot of changes until you end up at the desired outcome. And – even more importantly – it means that you have to undo all the changes you made during debugging. This can have annoying side effects if you’re using a live reload server. This solution has the problem that you are constantly changing the files. Chromium based browsers like Microsoft Edge or Chrome have a Changes tool, which shows you what you changed in each file:įirefox has a live version of this that changes whilst you tweak your CSS and has a “copy all changes” button that results in a CSS document with helpful comments.Īnother existing process is that you can set up a Workspace in Developer tools, which means that any change to the styles will also change the source file on the hard drive. The current solutions are suboptimal, as they mean you copy and paste what you created using the browser developer tools. One of the unanswered questions of this process is how you get the changes to your styles back into your source files. This means that whilst you can change the code that runs in the browser to find out what needs to get fixed, you are not actually fixing the source code. The big drawback of Developer Tools is that you do not work on the source code of your product, but instead you work with what the browser created from these source files. You get detailed insights into what CSS is applied to which element, and you get visual tools to aid you on your journey to create a beautiful and working interface. There’s a GitHub issue dedicated to feedback.ĭeveloper Tools in browsers are a fantastic way to debug, edit and tweak the CSS of your web product. We’d love to know what you think of it and what we can do better. Summary: With the release of 1.3.1 of the Edge Tools for VS Code we introduce a better way to get changes you made in the Styles tool back into your source code. ![]()
0 Comments
Leave a Reply. |