A Primer on Chrome Development Tools

Chrome Dev Tools was recently highlighted in a tutorial by Bootstrap Creative, in which the video maker uses the tool to inspect CSS code. It is easily accessible using the F12 key and it is included in any default Chrome installation.
Within the Dev Tools interface, you can easily visualize what each element is doing on your screen. It comes complete with a list of rule sets for each element so that you may be able to replicate its results.
With the Inspect Element tool, you can hover your mouse over different parts of the website to identify its element in the code. When you click on an object on the page, it will then inspect the element on the right-hand side so that you can see what the code looks like. From within the dev tools, you may modify, add or remove classes to change the elements on the website. This is a great way for beginners to experiment with CSS coding and to test their websites.
If you would like to change colors of elements, that can easily be done in the styles tab. Simply change the color codes within each element and you will see live changes of your color modification. Similar modifications may be made to elements for backgrounds and borders.
Since the code can be rather long, there is a built-in search feature to find elements on the page by name. You may even search for scripts by each part of the page, like the navigation bar or body. Files may be opened in new tabs or windows so that you may read through the various source codes of a website.
One of the most valuable assets of the Dev Tools is the ability to emulate the view of popular mobile devices. Clicking on the mobile device icon, you will be brought to the testing page. From the drop-down menu, there will be popular devices listed so that you may easily go through the different screen resolutions. You may even add your own devices by using the Edit menu item and add custom screen resolutions. For more information click here https://www.youtube.com/watch?v=s0RI4IXKE_o.