A Software Tester’s Guide To Chrome Devtools

Learn how to dig deeper into the Web with the use of Devtools

    • Viv Richards's profile
  • Intermediate
  • 10
  • 14
521 already enrolled
An Introduction To Chrome DevTools
  • Explain what devtools is and what its purpose is
  • Explain how DevTools can be useful in testing web applications
Understanding and inspecting page markup
  • Describe what the elements panel is and how it interacts with HTML
  • Use the inspector tool to select an element
Putting client-side validation to the test
  • Describe at a high level the difference between client side and server side validation
  • Use the inspector tool to demonstrate how to modify an element in order to bypass client side validation
Testing For Accessibility
  • Recall what accessibility testing is
  • Find some of the features in DevTools to carry out accessibility testing
Simulating Mobile Devices
  • Locate the device toolbar
  • Use the device toolbar to simulate sizes in different device views
Network Throttling
  • Locate the network panel
  • Find and understand the network throttling features
Understanding And Using The Console Panel
  • Locate the console panel
  • Understand and use some of the console panel features
Undertaking Basic Website Auditing Using Lighthouse
  • Locate the Lighthouse panel
  • Describe the types of reports available as part of Lighthouse
  • Perform a basic accessibility audit
Capturing Screenshots
  • Describe at a high level why we might want to capture screenshots
  • Locate some of the features in Dev tools to capture screenshots
  • Capture screenshots with the support of Dev tools
  • Analyse a site for an issue and capture a screenshot using Dev tools
Generating New Test Ideas
  • Recognise the key learnings of this course
  • Reflect on how you will apply what we have learnt as part of your testing

Despite its name, DevTools isn’t just a tool for developers. DevTools contains many tools which can help you in your day to day testing of web applications. Whether you want to know how to put client validation to the test, gain a better understanding of how to identify and debug errors or just simply run audits on your web applications, then this course is for you.

Perhaps you’ve heard about DevTools but have never used it? Maybe you’ve used one or two of the tools within a few of the panels but don’t fully understand how some of the tools could help you. Throughout this course I will highlight a handful of useful tools that are available.

Within each lesson we will be using a website designed especially for this course to help demonstrate how to make the most of some of the tools within DevTools. Each video within this course will be followed by a hands on activity and/or a short quiz to ensure students understanding of what’s been taught before moving on to the next lesson.

By the end of this course students will gain a solid understanding of how to use the demonstrated tools within DevTools and how using them can assist in their day to day testing of web applications.

What knowledge or skill set do learners need to have before starting your course?
A basic understanding of HTML, CSS and Javascript in order to use DevTools to inspect code and debug some basic errors. An understanding of or some experience of testing web applications.

Are there any existing courses on the Dojo that they should complete first?
It may be useful to take the ‘Building blocks of the internet’ course before taking this gain a basic understanding of DevTools.

Are there any tools or programmes they are required to use?
Chrome DevTools. Students will be given access to the sweet shop project (URL) to test what they’ve learned and to follow along.

Accessibility Testing 101 - Crystal Preston
TestRail Jira Integration
Staying Tool Aware with Sujith Sukumaran
How to turn a 403 into a 202 at the API Party
ReTestBash UK 2022: Live Q&A with Julia Pottinger
Low Code Test Creation
Web Services
Are You Ready To Take The Test.Bash(); 2022 Challenges?
Testing Across The Stacks: An Intro to Testing Both The UI And API Layers Together
Explore MoT
Episode Four: The Practitioner
The Testing Planet is a free monthly virtual community gathering produced by Ministry of Testing
Automating API Checks With RestSharp
Learn everything you need to start automating API checks using RestSharp