darkwing

The Firefox debugger has undergone a massive rewrite in the last two years, moving away from old Mozilla-specific technologies like XUL etc, to more modern technologies like React, webpack and babel.

[Babel][babel] is a tool for compiling Javascript into Javascript. It generates an [Abstract Syntax Tree (AST)][ast_wiki] which can be transformed, transversed or manipulated in various ways for use. Babel and AST's have played a major part in growth of the modern web tooling ecosystem.

Over the past year, we have used babel extensively in building the debugger, from disabling non-executable lines so breakpoints cannot be set to highlighting out of scope code and much more.

I felt it would be cool to write a couple of blog posts, documenting some of our coolest use cases and looking into some debugger internals as we go.

darkwing

var cycles = 0;
var loaded = true;
var minTime = 15000;
var int = 50
var loaded = false;

$(window).load(function() {
	loaded = true;
});

darkwing

<div id="fellows" data-url="/fellows">
  <!-- list of fellows -->
</div>

darkwing

var Templatizer = new Class({
	Implements: [Options, Events],
	options: {
		templates: {
			/*
			name: instanceOfSubtleTemplate
			*/
		},
		data: {}
	},

darkwing

/*
Script: Color.js
	Class for creating and manipulating colors in JavaScript. Includes basic color manipulations and HSB <-> RGB <-> HEX Conversions.

License:
	MIT-style license.
*/

function Color(params){
	var ptype = $type(params);