Everybody Wants DevTools

The Man Who Answered Before The Question.

Who is this guy?

Hi! I'm espadrine. Or Yann. Or Thaddée.

Whichever fits your fancy.

I do DevTools work.

espadrine.github.com

You mean Firebug, right?

The Firebug UI
Nope.

Firebug:

DevTools:

Sh*t up and take my money!

The debugger in action
The Debugger, the Toolbar

Edit ALL the sources!

Editing CSS and JS
The Style Editor, the Scratchpad

Using Open Source

The home page of Orion

Try it at orionhub.org.

Install it on localhost.

Use the embedded version. Contribute.

Orion Code Editor

Orion: Y U AMD?

Alternatives: CodeMirror, Ace.

The Quest for Autocompletion

Andrew Eisenberg's blog.

Welcome to Dependency Hell

Surely this is the fastest way to implement autocompletion?

Look, ma, no hands!

No hands on the clock!

I've still got time, right?

When does this internship thing end?

Ok, it's time to start from scratch.

Esprima Reflect.parse()

The code for Reflect.parse.
Because non-JITted JS is not yet as fast as C++.

The User Experience

Autocompletion UI
Going modeless
  1. Be discoverable.
  2. Be unobtrusive.
  3. Be familiar.

Heuristics: because users find features by accident.

The Engine

Babbage's differential engine

Three levels

  1. Keywords
  2. Dynamic lookup
  3. Static analysis

Static analysis:

  • Tokenizer
  • Parse tree visitor

The future is now

And pretty soon…

Thanks for watching!

I'm sure you have questions.

My thanks to