QA can examine the web page and execute a few tests using the browser developer tool. They can see the response in the inspect panel for the request sent to the server. This helps in reporting bugs with the response status code. Inspect panel or Developer tool is an excellent tool for the developers, as they can modify the codes and see the results live on the web page. These modifications made in the web inspector are only temporary and will be lost once the panel is closed. This makes debugging incredibly simple and live, as the user may adjust the attributes right in the browser.
How to open Inspect panel
There are different ways used to open the dev tool in different browsers. The shortcuts used for chrome browser is-
Windows- Ctrl + Shift+ C
Mac- Command + Shift + C
However, the most common way which works for every browser is to right-click on the page, select inspect, and the inspect panel will open. You will see different tabs present in the toolbox such as Element, Console, Network, Security, etc. We will discuss more Elements, Console, and Network tab in this article.
Common features you should know
QA can inspect the elements of the current page by selecting the icon present on the left corner of the inspect panel. This icon will allow you to inspect the web element when hovering over it. If you hover your mouse over any element on the web page after clicking it, its attributes will be highlighted in the Elements panel. The icon is known as Select Element.
Testers can also check the responsiveness of the web page by clicking on the icon shown below.
This helps to know how the website will look on different devices. For eg. You can select the different sizes available from the top bar and check the UI of your website on different devices. If it looks good on all devices then this indicates that the web page is responsive
The dock view is nothing but the Inspect panel view. You can change the dockside view to the top, left, right, and bottom of the page. This can be done by clicking on the three dots at the right side of the Inspect panel and selecting the view which you find comfortable.
The Elements panel is an excellent tool for examining the CSS and HTML properties of a web page. You may view the element’s attributes highlighted in the code by right-clicking any element on the page and selecting Inspect Element or you can use Select element to inspect any element on the web page.
If you click on the Elements tab you will see sub-tabs of Elements. The HTML properties are there in the DOM whereas CSS attributes can be seen on the sub-tabs.
You can also search for an element in the Inspect panel. Open the Inspect panel and Press Ctrl + F and you will see a search bar at the bottom as highlighted below.
The criteria used to specify in the find tool are string, CSS selector, or XPath. Hence we can search for elements in the find tool by-
- specifying a String
- specifying CSS selector like HTML tag
- specifying XPath like an Id.
The Console tab shows how scripts on the page are working. Web developers log these messages to ensure that the code is executing in the right order and to inspect the values of variables.
If the website is not working properly then the console tab is an excellent tool used to figure out the cause of the issue. Testers can get to know the error if you clear the Console tab and run the function that displays the error. It really helps the developers and testers to see the logged errors. The console logs will show you the error type, the error location, and the line number.
You can view these console messages in a more categorized way by clicking on the Show Console Sidebar icon. This will divide the logged messages into User messages, warnings, errors, and No verbose. The errors are highlighted with red, warnings in yellow and user messages in white. If you want to know where the error is coming from then click on the source file on the right side corner and the Sources tab will provide the information on which file the error occurred.
Clear Logs: You can clear the console logs by clicking the clear button. Clear the logs and retest the functionality to see the specific logged messages.
Filter: The filter option allows you to filter the log messages by log levels and status code
How to read the console logs errors
To understand the root cause of the issue you need to have a correct understanding of error messages and HTTP response status codes. All HTTP response status codes are separated into five classes or categories.
- 100’s Informational codes indicate that the request was received, continuing process
- 200’s Success codes indicate that the request was successfully received, understood, and accepted by the server
- 300’s Redirection codes returned to indicate that further action needs to be taken in order to complete the request
- 400’s Client error codes indicate the request contains bad syntax or cannot be fulfilled
- 500’s Server error codes indicate that the server failed to fulfill an apparently valid request
There is a list of HTTP status codes that you can find on wiki.
These HTTP codes are really helpful for debugging. The testers can report the bug with the response they are getting from the console and developers can look deeper into it and fix the issue reported.
The network tab is used to ensure that all the resources on the page are uploaded or downloaded. It is very helpful in inspecting the properties of an individual resource, such as its HTTP headers, content, response, etc. To view network logs open the network tab and reload the page. Each log represents an API request.
Clicking on any of the requests opens a separate panel in which one can view all the information in detail. Headers tab will show the Requested URL (HTTP headers) of the resource, status code, its response, and also error messages if any. In Preview tab basic rendering of the HTML is shown. The HTML source code is shown in the Response tab. The Timing tab shows the breakdown of the network activity of the resource. There are other features available on the network tab.
Network tab functionalities
Stop recording Network log: With the red circle icon, one can stop recording the request.
Preserve Logs: DevTools stores all requests of the page in Network logs. It allows you to keep track of logs even if the page is refreshed as all console output is otherwise cleared, this is useful to investigate website bugs that require you to reload the page. When you enable this option, a new “Navigation” log opens in the console, which shows page refreshes and navigation events to other pages.
Disable Cache: With repeated visits, the browser serves a few files from its cache i.e local storage which helps to load the page faster. If we select disable cache then the browser will fetch data from the server. This helps the tester to test how the page loads for the first-time user.
Throttling: This is an important tool for the testers as they can simulate slower network connections. Click on the No Throttling (which means Online) dropdown in the network panel and select a different network range. It helps to verify how the website works in slow network connectivity. It also helps to test the behavior of the page functionality if there is no network by selecting the Offline option. You can test the web pages that function offline.
Filter: As a page may contain several network activity the filter option helps in filtering the resources. Click on the filter option in the Network tab to open the search bar. Testers can filter by string, regular expression, or by property. There are other options available too to filter the network logs such as-
More information on these topics can be found here.
- Ways to open Web inspector in different browsers
- How to locate an element by string, CSS select or Xpath
- Chrome DevTool Documentation
Let us know the errors you come across in the comments below. We will be happy to discuss this with you.