Screencast script for the firefox devtools inspector

script

devtools inspector screencast script

1 - Load www.mozilla.com

2 - Accessing the inspector
	- from the firefox menu bar: tools / web developer / inspector
		-> switches the mouse selection mode ON
		-> or alt+cmd+c
	- from the keyboard with alt+cmd+i
		-> can be used to toggle on/off the inspector
	- or right-click on any element and choose "inspect element"

3 - Navigate the DOM tree
	- search for nodes using the searc input
		- type 'div' and hit enter a few times to cycle through
		- type 'div#tab' and show auto-complete popup, use it to select a node
		- select the mobile links at the bottom, then type ".mobile-link" and cycle through
		- get the unique css selector for a node with right click.
	- mouse selection of nodes
		- click on mouse icon
		- show the node#id.class tooltip appear on the hovered node
	- keyboard navigation
		- use the left/right and down/up arrows to navigate
	- breadcrumbs

4 - Edit nodes
	- dbl click on tag or attributes
	- when keyboard navigating, hit enter/esc to enter/exit edit mode
	- hit tab to move from tag to attribute, (including tabbing to the new attribute placeholder)
	- hit delete to delete a node

5 - Side panel
	- Style inspector updates on node selection
		-> show add/remove/edit
		-> select one of the a.mobile-links and show right-click show :hover
	- show other boxes