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!
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?
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?
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?
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?
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
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.
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.