Help: Testing and Page Audits
Overview
Learn to use page evaluation tools and audits to assess your own work and provide feedback to others.
Activity Instructions
- Web Developer Browser Extension: Complete the Web
Developer Extension activity.
This browser extension is free and available for all major browsers.
- Browser Developer Tools (DevTools): DevTools let you audit a page and provide detailed
rendering information that can be used to test, debug, and improve the performance of the page.
These tools are built into the browser and do not need to be installed.
- Reference: Chrome DevTools – Chrome for Developers
- Device Mode: Simulate mobile devices – approximate viewport simulation for responsive design review.
- DevTools panels you will use:
- Elements: Inspect HTML elements and the CSS cascade and specificity applied to them.
- Console: View the console output and errors for the document.
- Sources: Step through JavaScript using breakpoints and watch expressions.
- CSS Overview: A summary of the CSS used on the page. Helps identify color contrast and unused CSS issues.
- Lighthouse: Audits performance, accessibility, best practices, and search engine optimization for mobile and desktop.
- Network: Determine overall page weight. Remember to empty the cache and hard reload the page when testing.
- Application: Inspect storage, including localStorage.
- Coverage: Identify unused CSS and JavaScript on the page.