Hi fellows! Today, I am going to tell you about how to save all changes in Chrome developer tools into a CSS file. First of all, let me explain to you everything in order.
What is CSS?
CSS is an acronym for Cascading Style Sheets.
What can you do with CSS?
CSS is a language that defines the display of HTML languages. For example, CSS works with fonts, color, margins, lines, height, width, background images, element positioning, and more.
HTML can be (incorrectly) used to design web-sites. But CSS provides more features and is more accurate and sophisticated. CSS, today, is supported by all browsers.
What is the difference between HTML and CSS?
HTML is used to maintain the content of a page. CSS is used to format and design this structured content.
I agree, it sounds kind of smart. But soon everything will start to clear up.
Once upon a time, when Madonna was a virgin and a guy named Tim Berners-Lee invented the World Wide Web, HTML was used only to display structured text. The author could only mark the text: “this is the title” or “this is a paragraph” using HTML tags such as <h1> and <p>.
As the Web progressed, designers began to look for ways to format online documents. To meet the increased demands of consumers, browser manufacturers (then Netscape and Microsoft) invented new HTML tags, such as <font>, which differed from the original HTML tags in that they defined the appearance rather than the structure.
As a result, original structuring tags, such as <table>, have become increasingly used for page design instead of text structuring. Many new design tags, such as <blink>, were supported by only one browser. “You need an X browser to view this page” – this refusal has become commonplace on websites.
CSS was created to fix this situation by giving web designers accurate design capabilities supported by all browsers.
What benefits will CSS give you?
Benefits of CSS:
- control the display of multiple documents using a single style sheet;
- more precise control over the appearance of pages;
- presentation for different media (screen, print, etc.);
- complex and elaborate design technique.
With CSS is everything clear, I hope. We move to Chrome developer tools.
What can Chrome developer tools offer to you?
- Sometimes, to activate one or another element on the site for testing, I use a small script on JS. The console tab allows you to run scripts, I even studied Java Script in it at the time.
- You can easily edit or delete cookies in the resources tab.
- Reduce the connection speed to see how the content of the page will behave when the Internet is slow or when there is no Internet at all.
- It is possible to substitute fake geolocation data, it is quite convenient when testing different services based on maps and routes. In this mode, you can test the usability of the mobile version of the site.
How to change all changes in Chrome dev tools into a css file?
Regardless, not many people know how to save style changes from the Chrome console.
Generally speaking, this is a standard Chrome feature, available since 2011, but still sometimes little-known to this day.
Chrome allows you to associate a remote file opened in a browser with a file on the local file system. And all the edits made to the styles and html on the page through the Chrome inspector will be saved here. This is great, especially if you want to save quick edits.
So how can you save the style changes from the Chrome console?
This can be done in several simple steps:
- Open the Sources tab of the chrome inspector, right-click in the left field, where the list of files is displayed, and select Add folder to workspace.
- After adding the folder, you need to allow chrome to work with this folder.
- After that, you need to associate the remote resource with the local one. To do this, select the required file. Right click -> Map To file system resource.
- After reloading the page, Chrome will save and sync all the edits made to a local file.
Difficulties that may occur
There are some problems with how chrome saves modified files. No formatting, everything is compressed and reduced, reading and working with it is generally not convenient. Moreover, all browser styles are saved, including the default ones for the browser, which are not in the source code of the edited site, which also brings a little confusion to the result. But, whatever one may say, this is a way to save and not lose the work done. After such synchronization, you can bring the code to life with the help of code cleaners and beautifiers. After that, isolate the default styles and leave only the current version of the code that we really need. Not very convenient, but it works without additional gadgets, which, by the way, also don’t work very well.
What else must be considered?
Workspaces allows you to use DevTools as your IDE. It maps your repository code to network code using source maps. The real advantage is that if you minify your code or use code that needs to be passed through, such as SCSS, then the changes you make to DevTools are (usually) reverted back to the original source. Overrides, on the other hand, allow you to modify and save any kind of file on the Internet. This is a good solution if you just want to quickly experiment with changes and keep those changes on page load.
