Chrome Dev Tools

28/12/2020

Overview

Chrome DevTools are an excellent set of tools built directly into the most popular Web Browser, Google Chrome. The best thing about the Chrome DevTools is that these are really easy to use and must have for Web Developers today. From diagnosing common issues you’re facing in your project to tracking the speed and performance of each component of your application, Chrome DevTools can help you get a very deep insight about how your project is performing. Everything for free!

In this lesson, we will take a look at what all DevTools are present in the Google Chrome browser.

Chrome DevTools

Chrome DevTools are a really powerful set of tools. With these tools, it is even possible to modify websites you don’t own for a specific session itself. Let’s try to change the Google website colour. Open the DevTools with Cmd + Shift + C and add a background color in body:

Adding background color

Now, when we close the DevTool window, we can see the effect:

Google Color update

Let’s try these tools now.

Installation

A very good thing about Chrome DevTools is that you don’t have to install anything apart from a regular web browser i.e. Google Chrome. If you have that already, excellent, you’re ready to start straight away!

Viewing And Changing CSS

To start with, we will begin by just modifying an element’s CSS. We will start with LinuxHint’s elements itself. Here, we right click on one of H1 tags to find the inpect option:

Finding inspect option

Next, when the source for this element is highlighted, we can edit the CSS properties simply by editing the source:

Edit element CSS

As soon as you hit enter, the CSS will be applied to the selected element.

Debugging JavaScript

In every programming language, most developers learn to code and debug their programs by adding a lot of print statements to see what output their code is producing and what path it is following. In JS, we use console.log() commands for the same purpose.

We will make use of a sample project on Google Chrome Github repository. Click here to open this demo in new tab, followed by which open DevTools with Cmd + Shift + C. Once the console is open, it will look like:

JS Console

On the sources tab, we can even see the JS source for the JS.

JavaScript Source

If you try the number addition right now, you’ll see that results are incorrect. Let us add a breakpoint in the program:

Using breakpoints

You can even use the JS console provided to print the values available in the proghram right now. This is how JS Source and Console makes it so easy to run, debug and modify JS programs with the help of Chrome DevTools.

Running JavaScript Console

JavaScript Console is another awesome tool to debug JavaScript source. It has two main uses:

  • Viewing data about the page which was embedded by the original web developer to see diagnostic information
  • Running JavaScript. We can run JavaScript on the console and actually modify the DOM of the page by the code we write!

To make use of this tool, just open any webpage or the one you defined, like Stackoverflow Android questions page. When you open any page, you will see messages like these:

Console Messages

We can even adjust message log level to only see the messages we’re currently interested in:

Console messages level

Analyzing Runtime performance

Above were some simple uses for the Chrome DevTools. With them, we can even track performance for the page. We can switch to the Performance tab and start recording the performance profile:

Start Performance tracking

Visit any page you like and hit the mentioned button. Once you’re done with profiling, hit the stop button and you will be presented something like this:

Page Performance

We can even select a snapshot of the performance about what was the page doing and how was its performance at a particular instance when the page was switching to another link:

Snapshot for performance

We were even able to see at what time, the page was at which link and how much time it took for Loading and scripting purposes. This way, we can have a deeper insights about how much time our client scripts are taking and if there are some blockages due to which page rendering is slow.

Conclusion

In this lesson, we looked at how we can use Chrome DevTools to track the performance for our web applications and perform debugging in much more efficient way.

ONET IDC thành lập vào năm 2012, là công ty chuyên nghiệp tại Việt Nam trong lĩnh vực cung cấp dịch vụ Hosting, VPS, máy chủ vật lý, dịch vụ Firewall Anti DDoS, SSL… Với 10 năm xây dựng và phát triển, ứng dụng nhiều công nghệ hiện đại, ONET IDC đã giúp hàng ngàn khách hàng tin tưởng lựa chọn, mang lại sự ổn định tuyệt đối cho website của khách hàng để thúc đẩy việc kinh doanh đạt được hiệu quả và thành công.
Bài viết liên quan

Installing Google Chrome on Debian 10

Firefox is the default browser of Debian 10 Buster. But, Google Chrome is many peoples favorite web browser. If you really...
29/12/2020

Install Google Chrome on Ubuntu

Google Chrome is the most used web browser on the internet leaving behind likes of Mozilla Firefox that used to rule the...
29/12/2020

Install Google Chrome on Arch Linux

Google Chrome is one of the fastest and popular web browsers in the world. On distributions like Ubuntu, Debian, Red Hat...
28/12/2020
Bài Viết

Bài Viết Mới Cập Nhật

Reliable IPv4 and IPv6 Subnet Rental Services: The Perfect Solution for Global Businesses
23/12/2024

Tìm Hiểu Về Thuê Proxy US – Lợi Ích và Cách Sử Dụng Hiệu Quả
11/12/2024

Mua Proxy V6 Nuôi Facebook Spam Hiệu Quả Tại Onetcomvn
03/06/2024

Hướng dẫn cách sử dụng ProxyDroid để duyệt web ẩn danh
03/06/2024

Mua proxy Onet uy tín tại Onet.com.vn
03/06/2024