Skip to content

Latest commit

 

History

History
67 lines (39 loc) · 3.25 KB

videos.md

File metadata and controls

67 lines (39 loc) · 3.25 KB
Raw

Debugger Screencasts

Goals:

  • Help newcomers get started
  • Give a visual flavor of how the Debugger works
  • Show how some of the React + Redux concepts come together to create the Debugger
  • Introduce you to the team. The Debugger is a fun project and we don't take ourselves too seriously!

Getting Started

This video walks through the getting setup steps:

  1. starting the dev server
  2. starting chrome and firefox
  3. launching the debugger
  4. and then jumps in to debugger inception because it's too cool not to!

Event Listeners part 1

This video gives an overview of event listeners, a new feature we're working on that lists the event handlers on the page. After that, we jump in and make each event listener link to where the handler is defined.

Event Listeners part 2

This video adds additional functionality to event listeners, such as a checkbox that enables and disables breakpoints for that listener and a close button that removes the breakpoint entirely. Along the way, fetch breakpoints, refactor the component, and squash lots of bugs as they emerge.

Testing the Debugger

The Debugger is a complex React + Redux app used by millions of crazy people called developers all over the world.

This video covers fixing a small bug and adding a new integration test. It reviews some of the techniques we use to make sure the debugger works the way we expect it to.

Topics include:

  • writing an integration test that acts like a user and interacts w/ the dom
  • writing assertions and actions that take advantage of redux's Action and State APIs

Testing the Debugger (Pause on Next)

This video shows how you can debug a mochitest.

How the Firefox Debugger uses Babel to Know What's Up?

In this video, we'll look at how the Firefox Debugger uses Babel to parse the code that's run in the browser and know what's going on.