Using Chrome Developer Tools for Quicker HTML/CSS Workflow

More web designers are turning to Google Chrome Developer Tools for the quicker HTML/CSS workflow. Using the Developer Tools provides designers the ability to inspect their web site live as they build it as well as provide numerous shortcuts that save time. The features of this application have become exponentially popular over the past couple of years and more web designers are opting to do a majority of their page development in the browser than in programs such as PhotoShop.

Using the Styles Browser of Chrome Developer Tools to Save Time

Google Chrome Developer Tools will help a web designer to save time by using the many shortcuts available in the app. The application also is great at helping rectify CSS bug issues. It is not uncommon for CSS styles to collapse. This collapse caused an undesired visual effect to occur on the website. By using the Chrome Developer Tools to inspect the elements the designer is able to find the cause of the bug and fix it. This saves time and reduces frustration caused by trying to figure out what the root of the problem is.

The Local Modifications feature allows the web designer to make changes to the website in the browser and saves any changes made. All revisions made to the website are saved so that if a mistake is made the designer can use the Local Modifications feature to revert back to the correct style sheet.

Using the HTML Tools Available Through Chrome

Most of the time spent by the webdesigners using Chrome Developer Tools will be in the Elements Pane. This feature of the application allows them to see all that is in the DOM (document object model). The app displays the DOM like a tree allowing the user to easily navigate around the HTML document. By using the “Inspector Tool”, the DOM element in the tree will be highlighted showing the relevant tag on the site being viewed.

The magnifying glass is located in the bottom left corner of the inspector. The magnifying tool will tell the designer the name or type of attribute an element has.

Double clicking the DOM nodes allows the web designer to edit the HTML. Changes can be made to the attributes with this feature. Edits can be done on the values, I.D.’s, and classes of the tag types. The tool also allows the HTML elements to be moved around the page.

Working with images is much quicker and effective using Google Chrome Developer Tools as well. By hovering over the image tag the designer will receive a popup of the image, its dimensions, and the original size of the image.

By using Google Chrome Developer Tools web designers are able to do a bulk of their HTML/CSS web design work in the browser. By building the site in the browser the designer is able to see what the site will look like and if the HTML/CSS are correct. Sometimes when using programs such as PhotoShop the site may not be received by the browser the same way it is seen in the program. Using the Developer Tools not only ensures the site appears as the designer desires but also saves more time than building the entire site in a program such as PhotoShop.