Working with Chrome Developer Tools.
Wall Script
Follow Me:
Tuesday, March 03, 2015

Working with Chrome Developer Tools.

Nowadays it’s hard for Front end designers to develop and test the applications. They need to design the screens, make changes in the source code and deploy the changes each and every time. Here we learn are going to discuss about how to debug web application, analyze the performance of it and making it as responsive by using the Chrome Dev Tools. Which is helpful for the Developers to minimize their work and give the deep knowledge about their web applications.

Working with Chrome Developer Tools.

Venkatesh Krishnamoorthi
Venkatesh Krishnamoorthi

UI Expert
Living in Atlanta, USA

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

We can use the developer tools to

• Track down layout issues
• Debug the JavaScript using breakpoints

Ways to Access Dev Tools
• Click on Hamburger Menu Select Tools Developer Tools
• Right Click on the Page, Select Inspect element
• Just press F12 to open the Dev tools

About Dev Tools window
Dev tools have different Panels, it is organized based on the type of the operations.

Working with Chrome Developer Tools.

• Elements
• Resources
• Network
• Source
• Timeline
• Profile
• Audits
• Console

Inspect using Elements
Elements panel will give us the structured information about the current page.

Using Elements we can do the following tasks:
• Inspect HTML & CSS
• Test and edit different layouts
• Live-edit CSS

Using the Resource tab, we can able to see and interact with the HTML files, Scripts , Database, Local Storage, Cookies, AppCache, etc.

Working with Chrome Developer Tools.

Using the Network we can able get the information about each network operation in our application, including detailed timing data, HTTP request and response headers, cookies, WebSocket data and the required resource files to load the page like HTML, Script, CSS and the images.

Working with Chrome Developer Tools.

Using this we can record and analyze the activity in our applications. Also we can check the performance issues if we have anything in our application.

We can able to see the step by step actions like how the application executes the resource files, how it renders/paint the pages, and how it hits the service calls. We can analyze how much it takes to load and execute the functions when an event is fired by the user.

Working with Chrome Developer Tools.

Two modes of console is available
• Console to debug and log the errors and warnings

The Source panel let us to view source files like HTML, CSS and JS
• Using Source tab we can see all the sources which associated with the page/application.
• We can add the source files and edit the files on the go

Working with Chrome Developer Tools.

We can also drag/drop the files from the file location to edit on the go. So your browser will work as like the IDE.

Device Emulation
Using the Developer tools we can emulate the screens for the Android, iPhone and tablets. We can test our web application for the devices specific.

Media Queries
Media queries are an essential part of responsive web design. Device mode makes media queries readily accessible and easy for us to inspect.
We can categorize the media queries based on the colors as follows
Blue – Queries with Max width
Green – Queries with in the specified width range
Burgundy – Queries with Min width

Was this article helpful?
Thanks! Your feedback helps us to improve


  1. Firebug seems more useful to me to debug an Internal server errors and inspecting elements. Though chrome render fastest, firebug is still worth a shot !

  2. I have followed tutsplus chrome dev tools screencast. But this one seems more simple.

  3. hy srinivas...
    i see some tutorial for deobusta javascript, i can't found tab script in chromee 41...
    im sory, i can english little ... =D

  4. Does Chrome have a JSON renderer? Still using firebug to see the AJAX JSON structure.

  5. You can use postman. It is available on chrom web store

  6. Firebug have a one basic advantage - live change in DOM tree - when I change code HTML in Firebug I have immediately preview on site.

  7. firebug is simple to use than using chrome dev tool may be becoz i am used to it

  8. Hi,

    I always prefer to use firebug.. Its simple to use & it has loads of features than google chrome dev tool


  9. Informative post indeed! I am also using firebug. Which I like most is, you explained each and everything very clearly. Thanks :)

  10. I'm developer and I really like this post. I have used this tools for testing GUI on multi screen and it's helped me save more time. Finally, I thank you for share this tips for using Chrome Dev Tool

  11. Chrome is my favorite browser, and the post and information you have shared will prove very valuable for me...Thanks Tamada Sir

  12. Hi Srinivas,

    Well thank you so much for sharing such an amazing post along with video tutorial, indeed you have nicely explained how to effectively use Chrome developer tool. I am using Firebug which is also an spectacular tool.

    Many thanks for informative share :)

    Keep writing.



Make in India