# Power Hour - Dive into Browser Developer Tools with Alan Richardson and Viv Richards **URL:** \ **Category:** Archive\ **Tags:** power-hour\ **Created:** [10 May 2019 10:57 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444 "2019-05-10T10:57:49Z")\ **Posts on this page:** 20\ **Page:** 3
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:32 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/42 "2019-05-16T18:32:17Z")
Yeah, I learned by clicking on everything. I didn’t realise that the responsive view helps me test css breakpoints until I was clicking about and experimenting. Click, Right click, and double click on everything! ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:32 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/43 "2019-05-16T18:32:19Z")
Oh I almost forgot - if you haven’t already you may want to check out Umar Hansas DevTools blog where he posts the latest tools within Dev Tools being released by Chrome /[https://umaar.com/dev-tips/](https://umaar.com/dev-tips/) ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:33 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/44 "2019-05-16T18:33:30Z")
> [@srinivasskc](#): > > 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? Hello, the Device Toolbar I use as a quick test to simulate devices in order to quickly get initial feedback on whether the page adapts based on the CSS media rules applied. Whilst it may be good to give you a quick visual indication of any potential issues on smaller displays I tend to use the ‘Remote Debugging’ within Chrome DevTools (this lives within the more tools menu) if I want to be really certain of how things render on physical devices. It may be worth looking at something like BrowserStack rather than relying on the device toolbar alone depending on your needs. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:33 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/45 "2019-05-16T18:33:50Z")
You’ve spotted a really good ‘technical puzzle’. I should really just leave clues so that people would have to investigate the reasons using the dev tools. But… - What you’re seeing on the left is the actual file - What you’re seeing on the bottom is the content type that the server told the browser the file represented, some of the images are sent as ‘content-type: image/png’ and some as ‘content-type: image/png’ As an exercise: - Right click on the image and choose “open in new tab” - Open the network tab so you can see the traffic - Refresh the page - Have a look at the HTTP message and see if you can spot the difference between one listed as “image/png” and one listed as “image/jpeg” ---
**Author:** ![jvickery88](https://avatars.discourse-cdn.com/v4/letter/j/49beb7/32.png) [@jvickery88](https://club.ministryoftesting.com/u/jvickery88)\ **Post date:** [16 May 2019 18:34 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/46 "2019-05-16T18:34:08Z")
Hey guys, thank you for your time. You’ve mentioned manipulating CSS - can you elaborate on using dev tools to do this? And provide an example of how you’ve done that? Many thanks, ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:35 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/47 "2019-05-16T18:35:49Z")
Yeah the ‘live’ facility on the selenium grid tools might help as well - Saucelabs have a ‘live’ plan, and I think some of other grid system do as well. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:36 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/48 "2019-05-16T18:36:41Z")
Agreed - I read that and follow on twitter as well. ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:36 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/49 "2019-05-16T18:36:59Z")
> [@professorwoozle](#): > > What features don’t browser developer tools currently offer that would be of benefit to testers? Hello, for me currently Dev Tools offers me the tools I believe I need. I’m guessing over the next few months or year though they will release even more fantastic tools which I didn’t know I needed 🙂 I find that if DevTools doesn’t offer something I think I need I’ll either try to get an extension for Chrome or failing that, if I cannot find an extension for what I need I’d attempt to make my own or help others develop one. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:37 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/50 "2019-05-16T18:37:18Z")
Thank you 🙂 … added padding because post must be 20 characters… ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:37 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/51 "2019-05-16T18:37:51Z")
> [@professorwoozle](#): > > What features don’t browser developer tools currently offer that would be of benefit to testers? Hi Adam, To answer that I’ll have to limit functionality to ‘what would I expect to be implemented in a browser’. Because I never expected Firefox to implement amending HTTP messages in a browser and if I don’t limit it, I could be listing stuff all day 🙂 - HTML, CSS and JavaScript validation could be useful (because the browser has a habit of ‘fixing’ HTML, and ignoring CSS errors) - I find the memory monitoring and performance tools a bit of a hassle to use, they could be simpler. I’d rather see it real time than creating profiles. ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:37 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/52 "2019-05-16T18:37:55Z")
Oh and on that note - Alan has created a cool extension here which I contribute to which you may wish to check out [https://github.com/eviltester/usefuljssnippetextension/](https://github.com/eviltester/usefuljssnippetextension/) ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:38 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/53 "2019-05-16T18:38:31Z")
… oh… and… - Having the tabs viewable at the same time e.g. seeing traffic while browsing DOM - JavaScript event hook indicators on the page so I can see what has JavaScript events attached without having to hunt through the DOM view - Breakpoints on cookie changes - Custom alerts on certain headers I expect over time some of this will make its way in over time, and some of these are probably available as Chrome plugins if I really wanted them. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:39 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/54 "2019-05-16T18:39:32Z")
> [@elizafx](#): > > 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) Hi Elizabeth, I listed the addons that I use further up. I haven’t tried Lighthouse (I’ll have to research it, thanks for mentioning it). The plugins are easier to use the less JavaScript heavy the app is. With a JavaScript heavy app, because the DOM is changing so much, I have to remember to use the tools more often. ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:41 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/55 "2019-05-16T18:41:07Z")
> [@elizafx](#): > > 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) As I mentioned above, whilst I do use some extensions for non-test related stuff, I think the majority of add-ons/extensions I use are for accessibility testing. - Lighthouse - I like using this built in audit tool to get quick feedback on potential accessibility issues as an initial check. - aXe - I like using this add-on to get further feedback on potential accessibility issues - WAVE - I tend to use this extension to compare the findings within aXe to quickly check some of the accessibility issues the add-ons believe they have found - Chrome Lens - this is really cool extension for checking to see how people with visual impairments view your site. For example if you have a web form and you rely on colours to indicate errors and do not also display a message with an error this tool would help you identify an issue for a person with a visual impairment. It also offers a built in tool to check how your page flows to ensure it tabs for example in a logical flow across the page. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:42 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/56 "2019-05-16T18:42:56Z")
> [@penny](#): > > Do you prefer CSS or xpath locators and why? Hi Penny, I prefer CSS locators because they work in the find functionality of all browser DOM views. Xpath, only works in firefox (I think) I only tend to use XPath for extreme situations like navigating back up the tree i.e. finding a child and then traversing up to the parent. And CSS locators tend to be understood by the front end programmers, and no-one seems to really understand XPath anymore unless you have some XSLT technology in your app. ---
**Author:** ![vivrichards](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/vivrichards/32/5594_2.png) [@vivrichards](https://club.ministryoftesting.com/u/vivrichards)\ **Post date:** [16 May 2019 18:43 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/57 "2019-05-16T18:43:58Z")
> [@penny](#): > > Do you prefer CSS or xpath locators and why? Hi Penny, I tend to never use XPath but similarly to Alan I could be tempted to use it in extreme cases for example where I couldn’t use an ID or CSS locator. Wherever possible I’d always try to work within my team to make the UI easier to test by getting unique selectors where possible implemented to help with the teams automation efforts. Like Alan, I prefer CSS locators. I prefer them because I find they help me write cleaner code when attempting to implement and maintain tests where as XPath can become quite a pain not only in initially attempting to locate the element you wish to interact with but also to maintain that test should the UI change. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:46 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/58 "2019-05-16T18:46:12Z")
> [@penny](#): > > What are the best resources you can suggest to guide a deeper understanding of the capabilities of the Browser Developer Tools you favor? Hi Penny, thanks for multiple questions… I rely on the official developer site: > **[Outils pour les développeurs Chrome  |  DevTools  | ...](https://developer.chrome.com/docs/devtools/)** > > Déboguez et optimisez vos applications Web à l'aide des outils pour les développeurs Chrome. But I’m also trying to use a feature that Viv showed me, which is the release notes link in the dev tools itself. The help menu in the dev tools has links to “documentation” which is the link above and the release notes for the current version. And I follow the developer tool twitter accounts. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:47 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/59 "2019-05-16T18:47:54Z")
> [@pniroula](#): > > How do we perform REST API snooping using Dev Tools to make sure we can catch high risk issues? You can see the calls that the browser makes to a REST API via Ajax. I’ve used this to reverse engineer APIs for applications to help me automate my marketing work. These APIs are often not public but are usually stable enough for the type of work I do. I normally use a Proxy tool for this and make API calls from Insomnia or Postman through the proxy to capture the requests. I also feed my mobile device through the proxy to see what traffic is being sent over HTTP. I normally rely on a proxy for API testing. Then I can fuzz the requests. ---
**Author:** ![alan](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/alan/32/5618_2.png) [@alan](https://club.ministryoftesting.com/u/alan)\ **Post date:** [16 May 2019 18:49 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/60 "2019-05-16T18:49:23Z")
> [@jamesvickery88](#): > > Hey guys, thank you for your time. You’ve mentioned manipulating CSS - can you elaborate on using dev tools to do this? And provide an example of how you’ve done that? Many thanks, Hi James, The CSS view are on the right of the DOM view or the Inspect view. And I find it useful to switch on and off different CSS styles. And I can amend them which is useful when raising a defect and suggesting a potential fix. It also has the ability in the dev tools to force element state - e.g. toggle hover , active focus etc. Which I find useful for testing and taking screenshots when there is a problem. And using the dev tools to block requests to prevent CSS being loaded can be useful to see just how much work the CSS is doing. ---
**Author:** ![AdyStokes](https://sea2.discourse-cdn.com/flex020/user_avatar/club.ministryoftesting.com/adystokes/32/14440_2.png) [@AdyStokes](https://club.ministryoftesting.com/u/AdyStokes)\ **Post date:** [16 May 2019 18:49 UTC](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444/61 "2019-05-16T18:49:54Z")
I literally have all of these installed and can second this recommendation 👍 [Previous page](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444.md?page=2) [Next page](https://club.ministryoftesting.com/t/power-hour-dive-into-browser-developer-tools-with-alan-richardson-and-viv-richards/25444.md?page=4)