Firefox

Developer Edition

a browser for developers

Panos Astithas / @pastith

About me

  • Member of the Firefox Developer Tools team
  • Worked on the debugger, console, network monitor, profiler, scratchpad, Valence and more
  • Worked with JavaScript, Java, C/C++, Perl and more in 15+ yrs
  • Worked with amazing people

Agenda

  1. Why a Developer Edition?
  2. Latest updates on Devtools
  3. Latest additions to the toolset
  4. Q & A

Why a Developer Edition?

  • A better browser for experts
    • Removed security belts
    • Trim dark theme with more space for content
    • Smoother updates
    • Latest Web API updates
  • A better developer tool
    • More consistent UI with devtools
    • Has the latest & greatest devtools
    • Powerful authoring tool
    • Mobile-debugging ready

So what's new?

Storage panel

Storage panel

Network panel

Image thumbnails

Network panel image thumbnails

Security information

Network security tab

JSON response preview

JSON preview

Inspector

More accessible colors

Box model colors

Color picker

Color picker

Animation tools

Curves for CSS animations

More animation tools

Responsive Design

Responsive Design Mode

Test layout behavior in different screen sizes

Valence and WebIDE

Valence

Valence debugging Chrome

Valence and WebIDE

  • "The Web is the platform"
  • The cure for platform fragmentation
  • Develop, Debug & Deploy with WebIDE
    • Create, package, deploy, debug remotely
    • Familiar environment
    • Lightweight, free
  • Use one tool to debug ALL THE THINGS
  • Not a mandatory workflow at all
  • WiFi debugging

Available targets

  • Everything Firefox
    • Firefox Desktop
    • Firefox on Android
    • FirefoxOS
    • Firefox embeddings
  • Chrome Desktop
  • Chrome on Android
  • Safari on iOS

Performance

New performance tool

Performance panel

Event timeline

Performance panel

Memory measurements

Performance panel memory measurements

JS optimizations

JIT coach

Games development

Debugging WebGL

Your browser doesn't appear to support the HTML5 <canvas> element.

WebGL demo

More demos and docs

Canvas Debugging

Canvas debugger

Debugging Web Audio

Web Audio debugger

Thank You