A Software Tester’s Guide To Chrome Devtools
Learn how to dig deeper into the Web with the use of Devtools
-
-
- Intermediate
- 10
- 14
561 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
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 features that can greatly assist in the day-to-day testing of web applications. Whether you're looking to test client-side validation, gain a better understanding of how to identify and debug errors, or simply run audits on your web applications, this course is designed for you.
Maybe you've heard about DevTools but have never used it, or perhaps you've used a few of the tools within some panels but aren't fully aware of how others could benefit you. In this course, I’ll highlight a selection of the most useful tools available in DevTools.
Each lesson will make use of a specially designed website to demonstrate how to make the most of these tools. After each video lesson, you’ll find a hands-on activity and/or a short quiz to reinforce your understanding before moving on to the next lesson.
To make your learning experience even more flexible, you have the option to either access the practice website online or run it locally on your own machine. I’ve made the code for the website public and included instructions for setting it up locally on GitHub. This way, you can practice using DevTools at your own pace and without relying on an internet connection.
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.
