6

These days I noticed the features in Chrome Dev tools(especially in 60+ versions) are increasing day by day and in every tab, there are a lot of options which most of us QA engineers are not fully aware of, so not utilizing it up to a full extent.

Could you please share few lesser known useful tips/bits which you personally found very useful as QA in Chrome Dev tools.

Small concrete one-liner practical tips are most welcome which is directly helpful to us QA engineers in daily testing activities.

Improve this question

3 Answers 3

Reset to default
5
+100

Chrome Dev Tools - Aug 2018 (they will keep changing)

enter image description here

Customize the tools themselves - "dots" menu on the right
Most common use is to change where the tools are "docked" (right, below, etc).

enter image description here

The Tools

Elements

Show the source code so you can see if it is what you expect and to see what elements you can use in automation, what id's are being used, etc.

enter image description here

Console

Show a command prompt in the browser so you can try out javascript command, page element selectors, jquery locators, etc. against the current DOM.
Note finding elements has changed over the years! find in the console used to search the DOM as expected. Now it searches the page itself. To work with the DOM use document.querySelector for individual elements and document.querySelectorAll for arrays of elements.
Luckily we have another trick here to avoid typing all that - the jquery style interface is available in the console (regardless of whether the page uses/loads jquery). This means you can just use $("...") for css locators and $x("//...") for xpath locators.

enter image description here

One of the most useful and very commonly used things here for QA folks is seeing web page errors

enter image description here

Sources

So you know where the browser is getting (or trying to get) content from. So you can verify calls are coming from correct locations, e.g. prod pages are using prod calls and not staging environment calls by mistake.
enter image description here

Network

So you can see the http get, post, etc. calls and how long they took. You visit this tab and then reload the page and then you can see what's taking the most time. Allows you to see any sites that are particularly slow including resources such as media and content servers.

enter image description here

Performance

Note Folks often actually want the network tab (previous point) for 'performance' information.
The performance tab is for examining the performance of the browser itself. You start a profiling tool, perform browser actions, stop the profiling tool and then examine the results. They can show any issues with the rendering of pages

enter image description here

Memory

Browser memory usage, helps to show if inefficient or resource intensive code is being run.

enter image description here

Application

Manifest, service workers, useful for stuff 'stored in the browser'

enter image description here

Security

enter image description here

Audits

New tools to diagnose performance, best practices, accessibilty and SEO

enter image description here

enter image description here

enter image description here

Improve this answer
2
  • 1
    Thanks, Michael, I also know the tab names and have rough ideas about their functionality but small concrete tips will be more useful for QA folks in general.
    – Vishal Aggarwal
    Commented Apr 14, 2018 at 11:35
  • I've removed the headless parts from here too. I've added a bunch of screenshots because often just seeing examples (like network - once you reload a page...) says it all. Same for audits, showing the results page is something anyone can do. The fact I've done it and captured a screenshot of some results says a lot just by seeing the screenshot.
    – Michael Durrant
    Commented Aug 4, 2018 at 12:52
3

I prefer to use Chrome Dev tools for (some of them are available in More Tools menu)

The most often:

  • Testing my xpath queries. I found this feature the most useful of all the dev tools.
  • Introduce my own elements to the page to test simple attacks to the server
  • Watching for JS errors
  • Executing my own JS in the context of opened web page which help me to troubleshot situations like this: How do I get particular textNode value of a DOM with Selenium
  • Block requests to particular sources to watch how would that unavailability be handled by the page scripts

Quite Rarely:

  • Watching network traffic since I prefer to use external sniffers
  • Examine the styles of the elements on the page if they look strange to me.
  • Test how the page would look with different screen sizes
  • Network Throttling to test how the page would behave in different network conditions
  • Search over all the page resources

Other tools personally I do not find useful for my tasks. However they are definitely valuable for web development.

Improve this answer
2

Not just Chrome developer tool, Chrome extensions can be useful too.

  • Weight and Height Display, we have found a few bugs that are specific to browser window size.
  • Check My Links, this extension will navigate through all links on a given web page and locate those dead ones.
  • Bug magnet, it is a point and click tool that allows you to generate inputs right away, e.g. valid and invalid email addresses.
  • Window resizer, good for checking your browser on mobile devices' screen sizes.
  • Page ruler, good for measuring distance on screen. More than often, an item needs to be exact N mm.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.