W01 Learning Activity: Testing and Evaluation
Overview
In this course, you are expected to continuously test your development work against established standards in the industry and specifically for this class in the areas of design, structure, usability, and accessibility. This module provides some tools that can be used to test your development work.
Tools Used in this Course
Page Audits
Many assignments have an audit report that you can use to check for compliance to development standards. These audit tools are linked in the Testing section of the assignment. The report provides information on required elements and some content. Notes are provided to prompt you on what needs attention.
- Items marked with a '✅' appear to meet the standards.
- Items marked with an '❌' need to be fixed.
- Items marked with '👀' need to be further reviewed for content.
- Some items are just informational and are proceeded by the character '📑'.
Browser DevTools
Every modern web browser includes Developer Tools (DevTools) that provide comprehensive information about the page being inspected. These tools are essential in the development process.
- Reference: Browser DevTools
- Device Simulation – Device Mode - Approximate viewport simulation for responsive design review.
- Panels used in this course
- Elements: Inspect elements with detail for both HTML and the CSS cascade/specificity application.
- Console: View the console output for the document.
- Sources: Debugger tools to step through programs using breakpoints and watches.
- CSS Overview: A summary of the CSS used on the page. Helps identify contrast and unused CSS issues.
- Lighthouse: page auditing on accessibility, best practice, and search engine optimization in different viewport sizes.
- Network: Determine overall page weight. Remember to empty cache and hard reload the page when testing.
- Application: Monitor the Storage object including localStorage.
- Animations: The Animations tab automatically detects animations and sorts them into groups.
- Show Coverage helps identify unused CSS and JavaScript by showing overall usage on the document.
Web Developer Extension
The Web Developer browser extension provides access to some endorsed validation and page checking tools including:
This extension also provides access to local file validation when you are running Live Server locally.
Instructions
Complete the Web Developer Extension activity.
Optional Resources
- What are browser developer tools? – MDN
- Browser extensions – Wikipedia