About the course
Modern web applications are increasingly complex, and gaining deep insights into how they perform and behave from the user's perspective directly within the browser is essential for delivering high-quality, responsive experiences. The Chrome Developer Tools are an indispensable suite of powerful tools integrated directly into the Chrome browser, providing unparalleled visibility into the inner workings of web pages and applications. They enable developers to effectively inspect, debug, profile, and analyse everything from layout and styling to network activity, performance bottlenecks, and memory usage. This 2-day intensive hands-on training course is designed to empower developers to master the Chrome Developer Tools and leverage them systematically to analyse, debug, and significantly improve the performance, user experience, and overall quality of web applications.
The workshop begins by introducing the comprehensive capabilities of the Chrome Dev Tools suite, positioning it as far more than just a JavaScript console. Participants will gain hands-on proficiency in navigating and utilising key panels, including the Elements panel for inspecting and modifying the DOM and CSS, the Console for debugging JavaScript and interacting with the page, the Sources panel for stepping through code, setting breakpoints, and live editing. We will explore the dedicated CSS Dev Tools features in depth, demonstrating how to effectively inspect, understand, and make informed styling decisions based on the tools' insights. Participants will learn the fundamentals of using the Network panel to analyse resource loading, understand request waterfalls, and diagnose network-related performance issues.
Building on the core inspection and debugging skills, the course delves into using the Dev Tools for more advanced analysis. Participants will master the Performance panel to record and analyse runtime performance, identify bottlenecks in rendering, scripting, and painting, and understand the factors that affect perceived user speed. The Memory panel will be explored for diagnosing memory leaks and optimising memory usage. We will cover practical techniques like simulating mobile devices and different network conditions directly within the tools and examining client-side storage options. Crucially, the workshop focuses on connecting the data generated by the Dev Tools to broader web development concepts – understanding the impact of different HTTP versions (HTTP/1.1, HTTP/2, HTTP/3), exploring how Dev Tools relate to concepts like Progressive Web Apps (PWAs) and Accessibility, making informed decisions about DOM/BOM rendering based on performance analysis, and bridging the gap between JavaScript coding strategies and the actual client-side performance observed in the browser, enabling participants to generate actionable metrics and insights to drive meaningful improvements in their web applications. Through hands-on exercises using live examples and participants' own sites, attendees will gain practical experience applying Dev Tools techniques to real-world analysis and debugging scenarios.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Navigate and effectively utilise the primary panels within the Chrome Developer Tools
- Inspect, understand, debug, and modify HTML and CSS in real-time using the Elements and dedicated CSS Dev Tools panels.
- Debug JavaScript code effectively using breakpoints, the Console API, and the Sources panel.
- Analyse network activity, resource loading, caching, and security using the Network panel, and understand the impact of different HTTP versions.
- Utilise the Performance and Memory panels to record, analyse, and identify runtime performance bottlenecks and memory leaks in web applications.
- Simulate mobile devices and different network conditions using the Dev Tools.
- Understand rendering engine strategies (DOM/BOM) and factors affecting perceived performance, using Dev Tools to analyse rendering performance.
- Apply Dev Tools to explore concepts related to client-side storage mechanisms and their usage.
- Understand how Dev Tools can assist in exploring concepts related to Progressive Web Apps (PWAs) and basic Accessibility testing.
- Connect JavaScript coding strategies and performance optimisations to actual client-side performance metrics observed in the tools.
- Generate actionable metrics and insights from Dev Tools data to inform development, design, and optimisation decisions.
-
This 2-day intensive hands-on training course is designed for web developers and technical professionals who want to master the Chrome Developer Tools to effectively analyse, debug, and optimise the performance and user experience of web applications. It is ideal for:
Frontend Developers
Full-stack Developers
Web Performance Engineers
Quality Assurance Engineers involved in web testing
Developers and technical leads responsible for the performance and quality of web applications.
Anyone involved in building or maintaining web applications who wants to gain deep insights into client-side behaviour and performance.
-
Participants should have attended our HTML & CSS and Modern JavaScript training courses, or have equivalent experience:
Experience with web development, including a good understanding of HTML, CSS, and JavaScript.
Basic understanding of how websites and web applications work.
Familiarity with using a web browser.
While prior experience using Chrome Developer Tools is helpful, it is not required as the course covers fundamentals and progresses to advanced use.
-
This Web Performance Optimisation course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to the Chrome Developer Tools
What are the Chrome Developer Tools?
More than just a console: Overview of key panels (Elements, Console, Sources, Network, Performance, Memory, Application).
How to access and navigate the Dev Tools interface.
Customising the Dev Tools window and settings.
Hands-on: Opening Dev Tools and exploring the interface.
Core Dev Tools - Inspection and Manipulation
The Elements Panel: Inspecting and understanding the Document Object Model (DOM).
Modifying HTML structure and attributes in real-time.
Using the Element selector.
The CSS Dev Tools: Understanding and working with the Styles, Computed, Layout, and Event Listeners panes.
Inspecting applied CSS rules, origins, and specificity.
Overriding and adding new CSS rules dynamically.
Box Model inspection.
Making reasoned decisions about CSS based on the dev tools insights.
Hands-on: Inspecting and modifying HTML and CSS on live websites.
Basic Debugging and Interaction
The Console Panel: Making the most of the console.
Logging messages and inspecting variable values (console.log, warn, error, info).
Executing JavaScript code in the console.
Using the Console as a debugging aid.
Hands-on: Using the Console for logging and basic scripting.
The Sources Panel (Introduction): Overview of viewing page source code.
Setting simple breakpoints to pause JavaScript execution.
Stepping through code, inspecting variables.
Hands-on: Setting and hitting breakpoints in the Sources panel, stepping through code.
Basic Performance and Network Analysis
The Network Panel (Introduction): Overview of analysing resource loading.
Understanding the Network request table.
Viewing request headers, response headers, and timing.
Filtering network requests (XHR, JS, CSS, Img, etc.).
Hands-on: Basic network analysis on a simple page.
The Performance Panel (Introduction): Overview of recording runtime performance.
Understanding the timeline.
Identifying basic performance metrics.
Hands-on: Recording a simple page load performance profile.
Advanced Network and Performance Analysis
The Network Panel (Deep Dive): Analysing the request waterfall and dependencies.
Understanding resource prioritisation and blocking.
Throttling network speed to simulate different conditions.
Understanding caching mechanisms (Browser cache, HTTP caching headers).
Analysing security aspects (HTTPS, mixed content).
Understanding the impact of different HTTP versions (HTTP/1.1, HTTP/2, HTTP/3) on network behaviour observed in the tools.
Hands-on: Detailed network analysis, using throttling, and inspecting caching.
The Performance Panel (Deep Dive): Recording and analysing complex performance profiles.
Understanding key sections: Network, Timings, Main Thread (scripting, rendering, painting).
Identifying long tasks and bottlenecks.
Understanding factors which affect user’s speed perception (e.g., perceived loading time vs actual).
Generating actionable metrics from performance recordings (e.g., First Contentful Paint, Largest Contentful Paint).
Hands-on: Performing and analysing detailed performance recordings to identify bottlenecks.
The Memory Panel: Understanding memory usage in web applications.
Taking Heap snapshots to identify memory leaks.
Analysing Dominators and Retainers.
Profiling allocation.
Hands-on: Taking and comparing heap snapshots to find memory leaks.
Using Dev Tools for Specific Tasks
Mobile Simulation: Simulating mobile devices, screen sizes, and orientations using Device Mode.
Testing responsive designs.
Throttling CPU to simulate lower-end devices and observe performance impact.
Hands-on: Using device mode and CPU throttling.
Client Side Storage: Overview of the Application Panel.
Why client side storage matters (Cookies, Local Storage, Session Storage, IndexedDB, Cache Storage).
Inspecting and manipulating client-side storage mechanisms.
Hands-on: Inspecting and working with client-side storage.
Connecting Dev Tools Insights to Web Concepts
The Document Object Model (DOM) and Browser Object Model (BOM): Understanding rendering engine strategies and the critical rendering path.
Factors which affect user’s speed perception.
Making informed decisions about rendering content based on performance analysis.
Code Performance: Exploration of ECMAScript coding strategies and their performance implications.
Ways to use the Developer Tools (Performance, Memory, Console profiling) with ECMAScript development.
Bridging the gap between coder-derived performance expectations and actual client experience observed in the tools.
HTTP/1, HTTP/2 and HTTP/3: Brief overview of these protocols. Metrics to support a strategy based on web site size, geographical distribution, update frequency and target platforms (how Dev Tools can help inform these strategies). Brief overview of what HTTP/3 will bring (QUIC in place of TCP).
Progressive Web Apps (PWAs): How this term has evolved, what it means today. Deciding if it matters for your site. Using Dev Tools (Application panel - Service Workers, Manifest; Lighthouse panel) to explore PWA capabilities and identify relevant metrics.
Accessibility: Meeting the requirements (WCAG). Meeting actual expectations. Using Dev Tools (Lighthouse panel, Elements panel - accessibility tree, colour contrast) to identify basic accessibility issues.
Making Sense of the Generated Data: Consolidating insights from different panels. Generating actionable metrics and recommendations for improvement.
Review of concepts and Q&A.
-
Chrome Developer Tools Documentation: The official, comprehensive, and regularly updated guide to using all features of the Chrome Dev Tools. This is your primary reference.
MDN Web Docs: An essential and authoritative resource for HTML, CSS, JavaScript, DOM, BOM, Web Performance APIs, and general web development concepts.
Web Vitals: Google's initiative providing crucial metrics (like LCP, FID, CLS) and guidance for understanding and improving the user experience on the web, directly measurable using Dev Tools.
Resources on Web Accessibility (WCAG guidelines, ARIA): Understand the principles and techniques for building accessible websites. The W3C Web Accessibility Initiative (WAI) is a good starting point.
Trusted by
