Unleashing: Mastering Chrome Developer Tools (DevTools)

We have published a brief guide on understanding Chrome Developer Tools (also called DevTools) before, where we provided a sneak peak into how these tools work. That post was nothing more than a “short intro” to one of the vital tools from a developer’s toolkit. The topic of Google Chrome Tools is a broad one, it employs tons of “hidden” or “not-so-clearly” seen tips, tricks, hacks and features. Don’t you worry though because we’re kick-starting series on the very subject called Mastering Chrome Developer Tools.

In past we have done a series on Features of Google Chrome. And one of the features of this series was this; Google Chrome Tools. I feel sorry for calling it back then as “a” feature, because in fact it is not just a feature, rather a bunch of features packed together. So starting from today a post outlining tips, tricks, hacks & features of DevTools will land at Softstribe, everyday.

Today’s post is here. Shall we dive in?

Introduction

As complexity of JavaScript increases, so do bugs that occur. The Chrome Developers Tools or DevTools is a web authoring and debugging tool made specifically to help Web developers analyse, inspect & debug their code. It works by providing a good deal of tools, functions & insights into the way browsers work and how browsers render a Web application or a Web page.

Tip: Getting over excited? Want to be the first to use new features? You might like Chrome Canary.

How is it organised?

The DevTools is divided into task-oriented sections. It has been organised into 8 tabs called panels, each focusing on a specific aspect of Web page. These are the tools with their focus described:

Elements: This is where you can alter HTML and play with CSS and see changes in real-time. Elements panel allows you to view structured information about the current Web page. It is an efficient tool to test & find definite CSS values like margin’s, padding’s, etc. It provides a handful of features that makes making a perfect layout easier than otherwise. Playing with HTML & CSS real-time may be a powerful debugging tool. Besides that user interface is real-friendly and lets you: (i) resize dividers in any way you please, (ii) collapse panes you’re not using, (iii) highlight any element of the page by hovering over corresponding code.

Network: The Network panel is all about operations taking place over network in your Web application/Web page. It records information such as detailed timing data, HTTP request, response headers, cookies, WebSocket and much more. It works automatically while the DevTools is open. It provides answers to queries such as how much time did it take HTML document to be downloaded and parse it’s first byte.

Sources: Sources panel lets you view & debug all the associated JavaScript of a Web page. It employs graphical interface provided by v8 debugger. It offers functionality such as Pause/resume, Step in/out/over, Toggle breakpoints, etc. To the left is a file navigator, which provides display of all open scripts.

Timeline: The Timeline panel is a bit similar to Network panel, but it’s focus is more at performance side. It analyses and records all the activity as your application runs. It has been categorized into three groups: an overview section at the top, a records view and a toolbar. It helps perceive & fix performance issues. It has specially been designed for Web performance junkies.

Profiles: This panel lets you determine the execution time memory. It is categorized into two profilers: a CPU profiler for showing where execution time is spent in page’s JavaScript functions and a Heap profiler showing memory distribution by page’s JavaScript objects and related DOM nodes.

Resources: This is a panel that makes inspecting local resources of a Web application easier. Among it’s inspecting skills are that it can inspect application’s local data sources including IndexedDB or Web SQL databases, local/session storage, cookies and Application Cache resources. With it’s help you can also inspect application’s images, fonts & stylesheets.

Audits: An audit is official examination of a website or web page to see and identify bottlenecks that are hindering Web performance of a web page. The Audits panel is where you can ask for an official audit from DevTools. It will list issues and suggest solutions. Btw, you can hire me for speeding up your WordPress website.

Console: Last but not least, the Console panel provides two primary tools for developers testing web pages and applications namely a shell command prompt to enter commands and engage with document and DevTools, other tool is a place to log diagnostic information using methods by Console API.

Ready? Let’s access DevTools!

If you’re wondering how can you put such a tool to work and looking for a download link, I’ll tell you that you already have it. I mean it comes by default with every Google Chrome install. You just have switch it on. There are various ways to turn this feature on. Here they are:

• Press CTRL + SHIFT + I (or CMD + OPT + I for Mac) to open DevTools
• Press CTRL + SHIFT + J (or CMD + OPT + J for Mac) to run DevTools with focus on Console (a section of DevTools)
• Select Chrome menu, from the drop-down menu go to Tools > Developer Tools.
• Right-click anywhere on the page and select Inspect element.
• Use F12 key

These should make things a bit faster.

Conclusion

This is it. Our philosophy about these series is that smaller, regular pieces of digestible information are way better than lengthy, boring textbooks or detailed tutorials. In today’s post we learned:

• What is Chrome Developer Tools (or DevTools)
• How does it benefit?
• The way DevTools is organised
• Learned what each panel does
• How to access DevTools
• & learned a couple of keyboard shortcuts

This is just the start, so we kept things light. We will be going advancd as we move forward, as new posts land into our Mastering the Chrome Developer Tools.