Debug CSS (using Microsoft Edge)
The Microsoft Edge browser has powerful debugging capabilities, especially for CSS. 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 app...