Debug CSS (using Microsoft Edge)
The Microsoft Edge browser has powerful debugging capabilities, especially for CSS.
The debug tools, shown here on the right of the browser can look daunting at first. For this post concentrate on CSS debugging. Other posts will go into more detail about the other options.
By default the rules are applied from the bottom up so in the above screenshot the rules were applied to the page body (.page_body), then the heading (h3), then the title (post_title) and then the link (a) before finally overriding some settings for the title, especially around the action when hovering over or visiting the link.
Viewing States
By clicking the :hov button you can display a list of states that the component can handle. If you check on of the states the component is forced into that behaviour, allowing you to see the style rules being applied.
Developer Tools
There are three ways to access the developer tools:
From the Menu
- Click ... (top right)
- Click More Tools
- Click Developer Tools
From a Web Page Component
- Open a web page
- Right click a component
- Click Inspect
From the Keyboard
- Press CTRL-SHIFT-I
You can also use F12 to access the same tools if enabled in your browser settings.
The debug tools, shown here on the right of the browser can look daunting at first. For this post concentrate on CSS debugging. Other posts will go into more detail about the other options.
Select Component
If possible us the right click approach as this takes us straight to the CSS for the component we want to debug. If you can't do this you will need to click on the HTML definition pane to drill to the component instead.
Viewing Style Rules
The CSS pane lets you view the style rules being applied to the highlighted component.
By default the rules are applied from the bottom up so in the above screenshot the rules were applied to the page body (.page_body), then the heading (h3), then the title (post_title) and then the link (a) before finally overriding some settings for the title, especially around the action when hovering over or visiting the link.
Crossed out entries have been removed by later definitions while ▶ indicates a line is specifying multiple, related changes (you can click on that icon to see more details).
The blue link, top right of each entry, allows you to see the specific CSS file and lines of code that produced the effect.
Hovering the mouse over a particular definition allows you to interact with it in real-time.
We can temporarily edit the CSS definition by simply checking and unchecking the rules to turn them on and off. The browser automatically renders the page taking into consideration our temporary edits. You can even use the + button to add new rules to see what effect they would have.
Viewing Computed Results
Clicking on the Computed tab lets you see a full list of property values for the component.
It can be easier to work with than the other view, but if you want to see the rules that have been applied to a property simply click on it in this view and it will take you back to the styles view, finding the rules for that property automatically.
Viewing States
Back on the Styles tab you see what your website styling rules will look like when the user takes specific action.
Comments
Post a Comment