Chrome Dev Tools

Chrome Developer Tools or ‘Dev Tools’ for short are a set of debugging tools that are built into Google Chrome. Chrome Dev Tools allow Web Developers access to a Browser and Website’s internals, which is great for fixing layout issues and page styles. There are various ways to access Dev Tools, the easiest way is to right click any element on a page and click ‘Inspect’. Dev Tools should then open at the bottom, right-hand side or as a pop-up window on your browser. In the toolbar at the top of the window, you will see various ‘tabs’. These tabs interact with different things on the webpage.

 

Elements

The First Tab you will see is Elements. The Elements panel lets you see the pages HTML, CSS and DOM Elements. This is great for testing out changes in HTML and CSS values before adding them to the pages code with Dev Tools showing you a Live Page preview.

 

Console

Next, we have the Console panel. The Console panel allows you to interact with the JavaScript on a page. The $( ) function allows a developer to select particular elements on the webpage. The console can also be used to log Diagnostic Information in the Development process.

 

Sources

The Sources Panel lets you inspect all sources that have been loaded into the Inspected page. It allows you to see the full file structure and lets you interact with HTML5 Database, Local Storage, Cookies, AppCache etc.

 

Network

The Network Panel shows sources that are requested and downloaded over the network in real time. You see the Size and Loading Time in a waterfall chart.

 

Audit

The Audit Panel analyses a page as it loads. It then suggests how you could improve load time and how you could improve your CSS or HTML code.

 

Timeline

The Timeline Panel gives you a complete overview of where time is spent on load of the webpage. Including JavaScript and all Page Styles.

 

Below I have added a short video, where I changed the size of the title on my Project, using Chrome DevTools and Atom Text Editor.