Even the best web designers sometimes run into coding or styling issues they can’t solve. That’s why there are so many developers’ tools out there. I’m not just talking about things like Dreamweaver and Photoshop. I’m also talking about lesser known tools.
One of my favorite ones which I’ve had around for a long time but have recently found myself using more of lately is a chrome browser tool called Chrome DevTools. It is bundled into the browser and one of the most fabulous things about this extension is that you can tweak a websites code and CSS and see the changes reflected live on the screen. Let me give you an example.
I was recently working on a site and was finding that my CSS styles were not being applied correctly. I knew I had the styles coded right but somehow there was one or many CSS entries elsewhere that were conflicting with the changes I wanted to make.
Using the developer frame I was able to view the HTML of the section I wanted to change and in the right window I could look at all the CSS entries affecting the particular block I was looking at.
It didn’t take too long for me to identify the rogue CSS code causing me problems. What’s more, I could disable the offending code just to be sure, and watch the web page automagically redo itself using the correct code.
So rather than me spending tons of time going through multiple style sheets this tool not only helped me find all the different CSS styles in all the style sheets affecting my code, but also gave me the option to make and preview changes.
Once I was satisfied with the changes I simply went into the actual CSS and applied the new code. I then switched back to my chrome browser, refreshed the page to load the new CSS and confirmed that I had indeed fixed the problem.
This extension has other cool features too. Such as a page speed checker tool which you can install. With the page speed checker you can learn of ways to improve your sits speed through sometimes simple changes.
If you are like me and hate trying to wade through raw HTML or css line by line you may want to check this free and easy extension out.
How to use the Developer Tool
To access the DevTools, open a web page or web app in Google Chrome. Then take one of the following actions:
Select the “Hotdog menu” 
at the top-right of your browser window, then select Tools -> Developer tools. Then right-click on any page element and select Inspect element. The DevTools are organised into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you work with a specific type of page or app information, including DOM elements, resources, and sources.
As you can see in the above example, a div tag is highlighted in the left pane. In the right pane, the CSS used to render that tag is also shown. When you on the color in the CSS, a color picker window is opened and you can chose a new color. When the new color is chosen the visible web page is changed to reflect the new color.
You will also notice checkboxes beside each CSS element. By unchecking the box you can disable that style element to see what impact it has on the page.
You will also see lines of CSS stroked out elsewhere in the right pane. These are lines of CSS which are over-ridden by other styles found elsewhere in the CSS. Simply scrolling the right pane up and down will show you all the CSS that is currently active on your chosen block of HTML code.
When you find the style you want to change simply note the CSS file and line number affected and switch to the actual file to make the change. Once you’ve made the change reload your page to see the change now live. You can then use the DevTools to confirm the change worked by highlighting the block you wanted to change and confirming the browser is showing the correct CSS.
