Power Hour - Dive into Browser Developer Tools with Alan Richardson and Viv Richards

On the 16th of May Alan Richardson and Viv Richards will spend an exciting hour on The Club tapping away at their keyboards answering any of your questions related to developer tools in browsers and how to use them to support your web testing and automating. Even when you don’t know much about HTML, CSS and JavaScript. Ask your question to get it answered.

@vivrichards and I are here to answer your questions on Browser Developer Tools, for example, you could ask us about:

  • Testing responsive applications
  • Getting the most out of the tools
  • Browser application risks

Get all your questions in by 16th May before 7pm and we’ll do our best to answer them during our Power Hour!

10 Likes

In your experience, are there some browser tools that are better than others? Do each have their own unique capabilities? Or is there one that you prefer to go to above others?

1 Like

When is it acceptable (if it ever is) to use absolute xpaths in selenium?

Something like this, for example: /html/body/div[3]/section/div[2]/div[2]/div/div/div[2]/div/div/div/div/a[2]/i

  1. What are the top five browser application risks if you have to rank it?
  2. What process/strategy we can use to minimize those risks?
3 Likes

What can developer tools give you over and above exploring the UI?

I use chrome dev tools every day for the last few years, most for reviewing network calls and JavaScript errors.
Is there possibly features I don’t use or more effective ways of using it?

1 Like

There are browser extensions (at least for Chrome) that extend the built-in dev tools and/or add new tools to your browser.
Do you use any of them, and could you name some that you find particularly useful?

1 Like

Which are your preferred features of Browser Developer Tools that you use over and over again?

Do you have any tips that can help someone with learning Browser Developer Tools?

1 Like

When I was testing “Responsive Websites”, my developer used to say. Testing on Chrome Web Developer - Responsive is not 100% testing. Before logging a defect, compare it on mobile device.

So, should we use “Responsive Tool” on Developer Tools as Smoke Testing purpose?

1 Like

I was just playing around with web developer tools while on this page, I saw one of the image is displaying as .png and also as .jpeg

I am curious to know, is the website changing the extension of image?

What features don’t browser developer tools currently offer that would be of benefit to testers?

4 Likes

What are your favorite add-ons to put into dev tools for additional information?
What sort of applications do you find them best to test for?

(As an example, I like Lighthouse to uncover information about the more responsive and progressive features of browser based web apps)

Do you prefer CSS or xpath locators and why?

What are the best resources you can suggest to guide a deeper understanding of the capabilities of the Browser Developer Tools you favor?

OK, it seems like it is 19:00 hours. So I’m going to start working through questions.

1 Like

Hey everyone, I hope you’ve all had a great week.

Thank you to everybody who has left us some questions, myself and Alan are looking forward to answering them. Please feel free to add more questions throughout the hour if you have more :slight_smile:

I use Chrome because I’m used to it. The different browsers do have different functionality but I only tend to use what I can remember. And the hard part, for me, is remembering the unique elements. I do like Snippets functionality in Chrome - which is a mini built in JavaScript IDE.

Firefox does have extra HTTP Network functionality, like Viv mentioned, but when I need that functionality I tend to just use a Proxy. And I tend to use Firefox when I’m using Proxies because I find it easier to configure a proxy as it doesn’t use the system proxy settings.

I do like the fact that Firefox can validate the HTML when using “view source”, but I tend to use Total Validator Pro for HTML validation.

I find the Accessibility tools in Firefox easier to use than Chrome. I find the responsive layout tools in Chrome easier to use than Firefox.

I don’t know of an easy comparison matrix that compares the different browser functions. I follow FirefoxDevTools and ChromeDevTools on twitter to try and stay up to date, but very often the announce features that are in dev branch and then I forget to check in the release branch.

I also quite like Epic browser because it has a built in geo VPN which can make it easy to test from different world wide locations without having to configure a VPN.

Hey Heather, thanks for kicking things off.

Primarily I tend to use Chrome out of preference and rarely use any other browsers when wanting to use developer tools. The are I can imagine quite a lot of differences between different browsers and developer tools but off the top of my head some tool differences;

  • Firefox you can modify and re-send network requests where as in Chrome and IE you cannot do that. This is handy if for example you wanted to modify parameters in a GET or POST request to check what is returned from a service.
  • Chrome has an audits panel which is used for website auditing which you do not get in IE or Firefox. The audits panel allows you to check things like the performance of your website, accessibility as well as many other checks.
  • IE offers emulation of other IE versions, Firefox and Chrome doesn’t offer this. This can be handy when wanting to quickly emulate how your website looks in an older version of IE for example.