Mallow's Blog

Chrome Dev Tools – A Basic Overview

Chrome DevTools is a set of web authoring and debugging tools which are built directly into the Google Chrome browser. It helps the developers in terms of providing deeper access into the web applications. Also it extends it’s support via editing website in realtime, diagnose problems quickly, performance measure and so on.

Inspect elements
The powerful tool which is hidden inside the browser is “Inspect elements”. It benefits in many ways and some of them are –  we can check the Page source code, Elements, Network request, Images and CSS  which forms it’s design, Fonts and Icons and Javascript code which is used for page animations. Also from the network tab, we can figure out the loading speed/time of the website, accurate colour of the text and the bandwidth used for download.

For the application developers, it helps to preview the look and feel of the website in mobile browsers and for the marketing analysts to find out the “keywords” used in the header of other websites to identify which are all faster in the “google page speed test”. 

Search : Xcode 
It helps to search the specific content and HTML elements used in the web page.

Elements
We can see HTML, JavaScript and CSS that builds a website page. This is similar to viewing the source code of a website but the major difference is that we can edit the code and see the changes in real-time on the site which is currently opened.

Emulations
It helps to preview the web page in mobile browser. It has pre-set devices and the option to change resolution and aspect ratio.

Network analysis reference
We can record, stop and clear the response. Also, we can save the request response across different pages using “preserve log” option and can take a screen shot with time details of the loading pages by clicking the checkbox of the “screenshot” option.

Changing loading behaviour
1. Emulate the first-time visitor by disabling the browser cache
By Disabling the cache checkbox, we can emulate how a user experience on our website when they visit for the first time. DevTools disables the browser cache and gives the exact scenario of the user visiting the website for the first time.  

2. Emulate them offline 
Some web pages are built as “progressive web apps” which can function offline with the help of service workers. To check those applications this option is more useful.

3. Emulate the speed of the network 
We can emulate the different connection speed like 2G and 3G by using this option. Also, we can custom the connection speed and check how our application responds to the different connection speed. 
We can also add “User-Agent” Example : different browsers in different platforms

  • 2G – 114 kbit/s of download and 20 kbit/s of upload data rate
  • 3G – 114 kbit/s of download and 20 kbit/s of upload data rate

Filter request
Using the filter option, we can filter the requests by properties such as domain or size of the request. 
Example:

  • mime-type: image/gif – lists all the requests with gif image.
  • mime-type: image/gif larger-than:1k – lists all the gif larger than 1kb. 

Note : Only AND operation is currently supported whereas no support is given for OR operation at the moment.

List of supported properties are

  • Domain – Displays all the domain names in the requests (.com)
  • Response header – Shows the resources that contain all the specified HTTP response headers. DevTools populates the autocomplete dropdown with all the encountered response headers.
  • Larger- than : It helps to filter the file by size.
  • Priority : Allows to search the requests based on the priority – low/high/medium.

Filter requests by type
We can filter the requests based on the request type by clicking XHR, CSS, JS, Img, Media, Doc, Font, WS, Manifest and others buttons in network panel. We can also enable the multiple filter by pressing the + filter typesin the panel.

Filter requests by time
Click/drag left or right on the Overview panel to display the requests that were active during that time frame.

Sorting the requests by waterfall method
We can sort the requests by 
Start Time : The request which was initiated first will be listed at the top.
Response Time : The request which started downloading first will be listed at the top.
End Time : The request which was finished first will be listed at the top.
Total Duration : The request which has the shortest connection setup request and response will be listed at the top.
Latency : The request with shortest waiting time for a response will be listed at the top.

Analyse the response
By default, The Request table displays the following columns:

  • Name : Filename of the resource.
  • Status : HTTP status code like 1** for continuing, 2** for success, 3** for redirection, 4** for client error, 5** for server error.
  • Type : MIME type of the requested resource like Text, image, etc.
  • Initiator : The following objects can initiate requests
    • Parser : Chrome’s HTML parser
    • Redirect : HTTP redirect
    • Script : JavaScript function
    • Others : Some other process, such as navigating to a page via entering the URL in the address bar or link.
  • Size : The combined file size of response headers and body as delivered by the server.
  • Time : The total duration time from the request start to the receipt of the final byte in the response.
  • Waterfall : A visual breakdown of each request’s activity.

Note: We can add or remove the different columns like web socket connections. 

Analyse the frames in web socket (conversations)
When we click on the web socket URL under the name column and then click frames, it lists the data, length and time. Here the messages are colour coded, 

  • Outgoing text messages are light-green
  • Incoming text messages are white
  • WebSocket opcodes are light-yellow
  • Errors are light-red

Preview : It is mostly used to preview the images.

Headers tab: It displays the response headers, query string parameters (view source and URL encoded)

Time to take first byte
Symptoms
A request waiting for long time to receive the first byte from the server.

Causes
There might be slow connection between the client and server or the server takes time to respond. To determine whether connection or server is slow, host the server locally. If we still get a slow TTFB  when running in local server, then we can say that server is slow.

Fix

  • If the connection is slow, host your content on a CDN else change the hosting providers.
  • If the server is slow, it is essential to optimize the database queries, implement the cache, or modify the server configuration.

Note : Page response time should be less than 200ms (normally it will be 100 – 600 ms) and TTFB time to first byte should be less than 1 sec. 

Queuing : It means that the response is queued based on the priority.

Stalled Time taken by the request to wait before the request is sent . It might be due to the queueing time of some conditions for proxy navigation and web socket pages.

Download content : If you notice lots of time spent in the Content Download phases, then improving server response or concatenating won’t help. The primary solution is to send fewer bytes.

Dom content loaded : The time taken to load completely the initial HTML document , without waiting for css, images, and javascript to finish loading. A very different event load should be used only to detect the fully-loaded page.

Ways to improve the speed and response
1. Order in which the elements are optimized : The elements with <head> section will load first and then the subsequent elements will get loaded in a logical way.

2. Minify and optimize the javascript codes : Line breaks, additional spaces, comments and increase the size of javascript files.

3. Asynchronous loading of Javascript : It will stop creation of DOM while javascript is executed.

4. Exclude the unused .JS libraries.

5. Using HTTPS protocol can minimize the load effect time.

Generally 

  • Time for the First Byte: 200ms – 350ms 
  • DOM Content Loaded: 1000ms – 2000ms
  • JS Load Event Fired: 900ms – 2200ms
  • Total Download Size: 1MB – 2MB
  • DNS Lookup: 10ms – 20ms
  • HTTP Requests per page: 50 – 75

Tester can use dev tools for 

  • Emulate the mobile view
  • Emulate for different network conditions
  • Emulate the application in different browsers in different platforms
  • Can check DOM content loaded time
  • Can check the TTFB.
  • To Check errors in console.
  • Check the behaviour of web app by disabling cache.

Hope you would have gained some knowledge on the basic fundamentals of Chrome Developer Tools. Stay tuned for the next blog on some interesting topic.

Arunkumar,
Testing Team,
Mallow Technologies.

Leave a Reply

%d bloggers like this: