Chrome Developer Tools

For any developer, inspecting and testing different elements on a webpage is of utmost importance. In order to access the Chrome Dev Tools, one needs to simply right click on a specific section of a webpage and select ‘Inspect’ in the Chrome browser. Alternately, windows users can access the Dev Tools by clicking Ctrl+Shift+I and mac users can access the Dev Tools by clicking Cmd+Shift+I.

On a quick glance, the Dev Tools can seem intimidating. But starting with the basics can not only help you demystify your bugs but also help you work quickly and effectively. The Dev Tools window consists of different Panels. The Panels are segregated based on different operations. The panels consist of:

  • Elements
  • Console
  • Sources
  • Network…. All the way up to…
  • Audits

For beginners, the Elements, Sources and Console panels are the most useful. In the Elements Panel, one can view the entire HTML syntax. Each element on the page can be separately inspected along with all the styles applied to it.

Below the Elements Panel resides the Styles Panel. One can inspect all the styles applied on parent and children elements. The Sources Panel allows developers to add different CSS to all or a single element of the web app. This is extremely used when making with Wwb app responsive. The CSS modifications are displayed on the left window. This window can be used to test whether the web app is responsive and to view the web app on different screen sizes.

The Console Panel is typically used to debug JavaScript. Clicking on the Console Panel brings up the console where developers can write and test JavaScript code for bugs and incorporating new features. Some useful console commands are:

  • Regular: console.log(“string”) => string
  • Interpolated: console.log(“There are %s dogs”, “5”) => There are 5 dogs
  • Style: console.log(“%c Turn me into italics”, “font-style: italic”) => Turn me into italics
  • Warning: console.warn(“Warn me!”) => (Warning symbol) Warn me!
  • Error: console.error(“Error message”) => (Error symbol) Error message
  • Info:“JavaScript rules the web!”) => (Info symbol) JavaScript rules the web!

I haven’t even scratched the surface of the things you can do with the Chrome Dev Tools. This list will be continually updated as and when I learn new tricks.

Credits to Wes Bos for the console tricks.