Gabriel Luong gabrielluong

Understanding how DevTools multiprocess architecture works.

 ________________________________________________________________________________________
|                                   Parent process                                       |
|----------------------------------------------------------------------------------------|
|                                                                                        |
|  DevTools Toolbox (there can be multiple instances)                                    |
|                                                                                        |
|   - DevTools client code and panels (devtools/client)                                  |

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

More details here: https://developer.mozilla.org/en/docs/Simple_Firefox_build

Hacking Firefox

Get Firefox' source code:

git clone https://github.com/mozilla/gecko-dev.git
git checkout fx-team

Install dependencies:

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

Writing an Actor

A Simple Hello World

Here's a simple Hello World actor. It is a global actor (not associated with a given browser tab).

let protocol = require("devtools/server/protocol");

let {method, Arg, Option, RetVal} = protocol;

	╔═════════════════════════════════════════════════════════════════════════════════╗
	║ How to load/import a file in Firefox Devtools ? ║
	╚═════════════════════════════════════════════════════════════════════════════════╝

	╔════════════════════════╗
	║ SYNC FILE LOADING ║
	╚════════════════════════╝


	┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┌───────────────────────────────┐

	# Start a normal instance with the debugger server running
	./mach run --start-debugger-server 6080

	# Run the Browser Toolbox instance
	MOZ_BROWSER_TOOLBOX_PORT=6080 ./mach run --temp-profile -chrome chrome://devtools/content/framework/browser-toolbox/window.html --purgecaches --jsconsole