Hello, community! I know that you are all aware of the fact that all modern browsers have so-called developer tools (or dev tools), which provide numerous functions for designing, editing, testing, analyzing and correcting websites and web applications. In addition to front-end developers, screen, UX and UI designers are also increasingly using the dev tools to test visual or content adjustments directly on the website.
In this article, I will summarize the most important functions of the Chrome developer tools for designers and beginners. Its official and very extensive documentation is perfect for developers. And the most attention will be paid to CSS in Chrome and how to disable CSS attributes within the browser. But if you are unsure of your programming skills, better hire a CSS developer, that will make everything in a proper way for you.
How to open Chrome developer tools?
Right-click on any website to open the Chrome Developer Tools. In the context menu there is the entry “Inspect” or “Examine”, which shows the tools.
If the right-click does not work, you can alternatively navigate via the Chrome menu. The point can be found under “Ads → Developer → Developer tools”. The tools can also be opened with the keyboard shortcut Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows).
What can you do with the help of Chrome Developer Tools?
Test responsive design, smartphones and tablets
The test functions for responsive design are an important part of the dev tools. Different display sizes, operating concepts (e.g. touch), display resolutions and breakpoints can be tested with this.
The Responsive Design Testing Tools can be reached via the corresponding icon in the top left in the “Dock” of the developer tools.
When the Responsive Design Testing Tools are opened, the viewport of the website is reduced. A few configuration options are available above the preview. The options displayed here can be supplemented or reduced using the three small dots on the right corner.
The following functions are available for all options:
Viewport size or device simulation:
If “Responsive” is selected, the display area can be flexibly adjusted using the handles. If a specific device has been selected for simulation, Chrome will automatically set the options necessary for this device.Zoom factor:
This means that display sizes that are larger than the device used can also be tested.Media queries:
The breakpoints can be viewed here. Orange stands for Mobile First, blue for Desktop First, green for a media range.Simulation of the device type:
You can choose between mobile and desktop, each with mouse or touch operation.Internet speed simulation:
The network can be slowed down, for example to check how the structure of the website works when the Internet is slow.Display quality test:
1 DPR stands for normal display resolution, 2 DPR for high-resolution displays with retina quality, 3 DPR for ultra-high-resolution displays.
Design in the browser
Websites are increasingly being laid out directly in the browser – also thanks to the possibilities offered by the developer tools. In the areas for HTML and CSS code, adjustments can be made that are directly visible. This workflow is called “Design in the Browser”.
All changes in the Dev-Tools are (usually) only temporarily visible in the browser. After reloading the website, the adjustments, as a rule, disappear again. Nevertheless, the work of front-end developers and designers as well as their collaboration is significantly simplified.
Edit CSS
To edit the existing CSS code, all you have to do is click on the selector, property or value. Chrome suggests possible commands as you type.
If a new property is to be added, click to the right of the semicolon of the last command. Chrome then opens a new line and the new CSS property can be written. You can jump to the value on the right using the tab key.
Edit colors, shadows and transitions
If the CSS selector contains a color specification, Chrome shows the color as a preview. Clicking on the color opens the color picker. A color adjustment can be made here. The adjustment is confirmed with Enter and the color code is adopted. You can now either copy the color code to your own source code or communicate it to the developer.
A small icon is also displayed if the CSS selector contains shadows via box-shadow or transitions via transition. By clicking on it, another control panel can be called up for adjustment.
Find and fix CSS errors using the developer tools
Chrome also helps to find and correct mistakes. An exclamation mark is displayed when a command is incorrect. With a mouseover you can also find out whether the property or the value is wrong.
As mentioned above, a line with a line through it and grayed out without an exclamation mark does not mean that the command is wrong, but that Chrome is ignoring the command.
How to disable CSS attribute: several ways to do it
As you know, the page that we see on a particular site consists of several elements. These include html markup, which tells the browser what is on the page and where, and CSS, which is a set of styles that tells how these elements should look. You can hire a CSS developer and ask him to explain this theoretical part for you.
Let’s imagine a situation: you have created your first or twentieth website, it looks great, but for some reason the CSS styles of the visitor did not load. Perhaps he will leave the site immediately, since everything has turned into a mess, or maybe he will remain to read, since the appearance of the site remains tolerant.
To find out how your web page will look without css-styles in Google Chrome, it is convenient to use the Web Developer extension.
Instructions:
- Open the Google chrome add-on store: https://chrome.google.com/webstore/category/apps, in the search box, and then you have to enter Web Developer.
- Open the Web Developer extension page and click Install.
- Go to the web page where you want to turn off CSS styling in Chrome.
- After installation, an icon similar to a gear will appear in the upper right corner, you need to click on it.
- In the window that appears, click on the CSS tab, and then click on “Disable All Styles”.
What are other ways to disable CSS?
- In Chrome, you can do this in the developer console.
- Bring up the developer console with CTRL+SHIFT+J or Menu > Tools > Developer Console.
- In the developer console, go to the Sources tab.
- In the upper left corner of this tab there is an icon with a drop-down triangle. Click on it.
- Navigate to <domain> -> css -> <css file you want to delete>
- Select all text and hit delete.
- Flush and repeat for each style sheet you want to turn off.
- Bring up the developer console with CTRL+SHIFT+J or Menu > Tools > Developer Console.
- For pages that rely on external CSS (most pages nowadays), the simple and reliable solution is to destroy the head element:
document.querySelector (“head”). remove ();
Right-click on this page, select Inspect, paste the code in the devtools console and press Enter.
The bookmarklet version of the same code that you can paste as the bookmark URL:
javascript: (function () {document.querySelector (“head”). remove ();}) ()
Now clicking a bookmark in the Favorites bar will show the page without any CSS styles.
Removing the head will not work for pages using inline styles.
Conclusion
To sum everything up, developer tools in Chrome have many interesting possibilities for developers. Hire a CSS developer or start learning CSS yourself in order to create fascinating, stylish and aesthetic website designs for different purposes. I hope that this article was a helpful guide for you that helped you to figure out how to disable the CSS attribute in Chrome dev tools.