Browser developer tools
You learn to inspect a page’s HTML, styles, network traffic and storage with Firefox developer tools and to track down where errors come from.
Level 101 · 15 lessons · 12 practice labs
Lessons
Inspecting the page
- Opening developer tools and moving between panels
- The inspector: the live DOM tree
- Editing HTML in place
- Rules and computed styles
- The box model and layout view
- Short task: change a page’s heading and colour
Console and network
- The console: messages, errors and commands
- The network panel: requests, timings and sizes
- A request’s headers, response and timing
- Simulating a slow network and disabling the cache
- Short task: find the missing file on a page
Storage and debugging
- The storage panel: cookies and localStorage
- The debugger: breakpoints and stepping
- Responsive design mode and device sizes
- Capstone: find three faults on a broken page
Practice labs
- Change a heading and colour in place: Use the inspector to change Bulut Bakery's heading and button colour, then reload to see it isn't permanent.
- Find which rule wins: A button has an unexpected colour; use computed styles and struck-out rules to find the selector responsible.
- Untangle an overflowing box's model: Measure an overflowing card in the layout view and prove which margin, padding or border value pushes it out.
- Read the error in the console: A button on the page does nothing; find the file and line of the red error in the console.
- Query the page from the console: Type commands in the console to count every link on the page and list those that point to another domain.
- Catch a wrong total with a breakpoint: The cart total is wrong; set a breakpoint in the debugger and step through the variables to find the faulty line.
- Find the heaviest file: Load Zeytin Restaurant's page in the network panel and list the three largest requests.
- Fix the path of a missing file: An image and a stylesheet return 404; find the wrong paths in the network panel and fix them in the HTML.
- Measure a page on a slow network: Disable the cache, load the page on a simulated slow 3G link and find the request that delays the first meaningful content.
- Find a cookie and a localStorage value: Find where the theme preference is stored in the storage panel, change it and watch the page react.
- Catch a menu that breaks on phones: In responsive design mode at 390 px width, find the overflowing menu item and the rule causing it.
- Find three faults on a broken page: Use developer tools to find three faults on Kırmızı Balon Toys' page: one in the styles, one on the network and one in a script.
About this course
You learn to inspect a page’s HTML, styles, network traffic and storage with Firefox developer tools and to track down where errors come from.
What you will learn
- Inspecting the page
- Console and network
- Storage and debugging
Prerequisites
No prior knowledge is needed; the course starts from zero.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at beginner level; every term is explained where it first appears.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.