Using Chrome Developer Tools for Quicker HTML/CSS Workflow

Google Chrome comes with a set of developer tools that can make your HTML and CSS workflow much quicker. In this tutorial, we will show you how to use Chrome Developer Tools to speed up your development process. We will also cover some of the more advanced features of Chrome DevTools, such as debugging JavaScript and profiling page performance. So whether you are a beginner or an experienced developer, this tutorial is for you!

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.

If you are not familiar with Chrome Developer Tools, don’t worry – we will cover everything you need to know. So let’s get started!

The first thing you need to do is open up Chrome and head over to the website that you want to inspect. Once you are on the website, press F12 or Command + Option + I on your keyboard to open up the Developer Tools panel. Alternatively, you can click on the menu icon in the top-right corner of Chrome and select More tools > Developer tools from the dropdown menu.

Once you have opened up the Developer Tools panel, take a look at all of the different tabs that are available. The most important ones for our purposes are Elements, Console, and Sources. We will also be making use of the Network tab, but we’ll get to that later.

Chrome DevTools – Elements Tab

The Elements tab is where you can inspect the HTML and CSS code of a web page. This is incredibly useful for seeing how a website is put together and for finding out what styles are being applied to specific elements. You can also make changes to the HTML and CSS code in this tab and see those changes reflected immediately on the page itself. This is a great way to experiment with different code without having to actually save any changes to your files.

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.

Chrome DevTools – Console Tab

The Console tab is where you can enter JavaScript commands and see the results of those commands executed on the page. This is very useful for debugging purposes, as you can test out different code snippets to see what effect they have on the page. The Console tab also shows any error messages that may be generated by your code, which can be helpful for troubleshooting purposes.

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.

Chrome DevTools – Sources Tab

The Sources tab is where you can view and edit the source code of your web page. This is useful for making actual changes to your code, as well as for debugging purposes. You can set breakpoints in your code so that execution will pause at those specific points. This allows you to examine the state of the variables at that point in time and see what might be causing an issue in your code.

Chrome Devtools – Network Tab

Lastly, the Network tab is where you can see all of the network requests that are being made by a web page. This is useful for debugging performance issues, as you can see exactly what is being loaded and how long each request is taking.

So that’s a brief overview of the most important features of Chrome Developer Tools.