Using Chrome Dev Tools

Blame doesn’t fix bugs.

Basic info

Here we will mention basic stuff about Chrome Dev tools, why is it important for QA and what features do we use.

What the heck is it? Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. It is available in any version of Chrome browser. Every browser has developer tools, and they look similar for almost all browsers. Chrome web browser is the most common in usage that's why we write about it.

Why do we use it? We use it for easier testing, to improve our bug reports and help developers with bug fixing.

Etc. use Chrome Dev tools in this situations:

Practical stuff

How to use

You can open dev tools with F12 button or right click - inspector After that you will be placed in Elements tab.

MacDown Screenshot

Elements panel

In elements panel you can see page structure in HTML and CSS.

What is HTML and CSS Page contains of HTML and CSS code. HTML defines the structure of the web page and CSS defines visual representation of HTML elements. Every browser can render HTML and CSS code. Here is more info HTML and CSS:

Inspect element

Two most common ways of inspecting elements are:

Inspect element icon is placed in upper left corner of dev tools.

MacDown Screenshot

Device toolbar

Chrome dev tools provide the check on the multiple mobile resolutions via device toolbar. Device toolbar icon is placed next to inspect element icon in upper left corner of dev tools. You can use responsive design by clicking on Toggle device toolbar icon.

While it is preferable to check the issue on the actual device, there are some cases in which Device toolbar is acceptable to use:

Note that some bugs will appear only on actual device while with dev tools they wont

MacDown Screenshot

Styles tab

It is placed bellow the page. We use it to check the CSS property of selected element. Here we can add modify or remove CSS property of selected element and change the page UI. Changes you made will not be applied to actual page, you can refresh the page and return to old look

We use Elements panel when: * we want to check that the page is implemented by design (Check CSS property of the page) * we want to make improvement, move element left or right increase padding, change text or similar. * in automation when we want to locate the element

MacDown Screenshot

Console

There may be times that you don’t see any of your experiment changes on the UI part of the site. In console panel you will see errors marked in red. Errors are usually fatal when the page is not working as expected.

Note: there will be console error on every page but you need to report only fatal error

Use the console in following cases:

MacDown Screenshot

Network panel

The Network panel records information about each network operation on your site, including detailed timing data, HTTP request and response headers, cookies, WebSocket data, and more.

More seljački in network panel you can see all the data that is coming from the server. This data is needed for page to load.

When to use network tab:

MacDown Screenshot

Check the request status from network panel:

In case when you have to check response that you get from the server you should do the folowing:

  1. Click on network panel in inspector
  2. Reload the page
  3. You will see network requests
  4. Click on one of network requests

MacDown Screenshot

You can check request status and all kinds of request information in headers. You can also see the request content and preview it in one of the following options.

MacDown Screenshot

How to clear cache, cookies, session and local storage

Pages are cached in every browser. The main reason for that is that the operating system keeps a page cache in order to save the memory(RAM) and improve device and page performance.

Note: Emptying cache is very important during testing process cause new changes pushed to staging wont be visible on page that you are testing

There are few ways on how to clear the cache:

Clear local storage:

  1. right click and run inspector
  2. choose applications panel
  3. expand local storage folder
  4. right click on content in this folders
  5. click clear and storage will be deleted

Clear session storage:

  1. right click and run inspector
  2. choose applications panel
  3. expand session storage folder
  4. right click on content in this folders
  5. click clear and storage will be deleted

Clear cookies:

  1. right click and run inspector
  2. choose applications panel
  3. expand cookie folder
  4. right click on content in this folder
  5. click clear and storage will be deleted

using-chrome-dev-tools.gif