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:

Lots of pre-existing goodies
Honorable and venerable
Memory-heavy
Not built-in

DevTools:

Innovative tools
Pretty (thanks Paul! thanks Shorlander!)

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?

Esprima
Orion update
Require.js
A bunch of files from Orion…

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

Be discoverable.
Be unobtrusive.
Be familiar.

Heuristics: because users find features by accident.

The Engine

Babbage's differential engine

Three levels

Keywords
Dynamic lookup
Static analysis

Static analysis:

Tokenizer
Parse tree visitor

The future is now

And pretty soon…

CSS autocompletion
Better static analysis
Unifying with the WebConsole's autocompletion

Thanks for watching!

I'm sure you have questions.

My thanks to

Rob Campbell for his outstanding mentoring abilities!
Mihai Sucan for his magnifiscent reviewing skills!
Dave Camp for revamping the DOM tree (boy was it ugly)!
Nick Fitzgerald, fellow intern, for supporting me!
And all of our amazing team!