Google Chrome Developer Tools can help you save more time and effort when building your web page than using programs such as PhotoShop exclusively to make it. Some of the best reasons to use Chrome Developer tools is because the application has more features than a program such as PhotoShop as well as allows you to view your site live and make live edits.
Awesome Features of Google Chrome Developer Tools: HTML
The Chrome Developer Tools application allows you to make live edits to your web site. Some web designers build their site from the ground up using the app almost exclusively. The application allows you to see everything in the documentation object model, or DOM for short. The DOM display resembles a tree that allows you to quickly and easily locate what you are looking for in the HTML document. Using the “Inspector Tool” provides you with the option to hover over the DOM element in the tree pattern to highlight relevant tags on the site. Using this tool saves you so much time because it allows you to inspect the attributes of the element such as the HTML tag type, I.D.’s and classes. This tool will also let you drag the HTML documents around the page.
Working with images is simple and easy with the Chrome Developer Tools as well. By hovering over an image on the site you can inspect the dimensions of the rendered image as well as the original size of the image.
More Reasons Chrome Developer Tools are Helpful: CSS
As a web designer using Google Chrome Developer Tools you can expect to cut your work time considerably. By using this application you are cutting out part of the Middle Man’s job since the bulk of your work can be completed in the browser and not through a program like PhotoShop and then transferred.
Live editing of the site is also available with the Developer Tools application in Google Chrome. The application will also save any revisions you make so that you can revert back if necessary. The “Styles Inspector” provides you with the option to find your style sheet quickly.
By building your website from the ground up in the Chrome browser or when editing your page using the application you are able to inspect how the site is viewed by the browser. Sometimes web designers have found that the site does not transfer properly in the browser. The undesired design must then be taken back to PhotoShop to be edited again, but not when it is being produced in the browser. By making the web design in the browser you are able to see what the site will look like correctly.
Hands down the best reason to use Google Chrome Developer Tools, or any application that allows you to build the website in the browser, if your ability to see what the site will look like when it is officially “online”. Programs such as PhotoShop do not allow this guarantee. When you design the entire site in PhotoShop you are not always certain every aspect of the design will transfer properly in the browser. Styles and colors may not be read in the browser the same as they appear in PhotoShop. The tools available in the application will save you time, help you with any CSS bugs, and provide you with a clear image of what your site will look like correctly when it goes live.
This post is written by John Lewis and he works at PriceCollate as a writer.
