Firefox Web development Tools

Who am I

Little Web Developer

MozTW labor

@kidwm at your favorites Social Network Websites.

Agenda

• Web Console
• Scratchpad
• Page Inspector
• Style Editor
• JavaScript Debugger
• Responsive Design View
• Developer Toolbar

Web Console

Since Firefox 4

A console that lets you interactively output information, run JavaScript snippets, and experiment with your content.

Web Console

Inspect Network Request

Web Console

• $()
  Looks up a CSS selector string, Shortcut for document.querySelector(). or calls the $ function in the page, if it exists.
• $$()
  This is a shortcut for document.querySelectorAll(), returning a list of DOM nodes that match.
• $0
  The currently-inspected element in the page.

Scratchpad

Since Firefox 6

A text editor built into Firefox that lets you edit and run JavaScript code.

Scratchpad

• Run
  When you choose the Run option, the selected code executed.
• Inspect
  An object inspector is opened to let you examine the returned value.
• Display
  The Display option executes the selected code, then inserts the result directly into your Scratchpad editor window as a comment.

Page Inspector

Since Firefox 6

A useful tool that shows you the HTML of the element you're currently pointing at with your mouse, in context.

HTML Panel

Since Firefox 10

HTML panel lets you look at the HTML representation of the element you've currently selected in the Page Inspector, as well as the surrounding HTML.

Style Panel

Since Firefox 10

Style panel lets you explore and manipulate the CSS for the page you're inspecting.

Style Editor

Since Firefox 11

Lets you edit CSS styles for the current page in real time.

3D View

Since Firefox 11

This view makes it easy to visualize the nesting of your content.

3D View

• Zoom in/out
  + / - Scroll wheel up/down
• Rotate left/right
  a / d Mouse left/right
• Rotate up/down
  w / s Mouse up/down

Layout View

Since Firefox 15

The Layout View provides information about the currently selected page element's layout.

Responsive Design View

Since Firefox 15

See how your designs will look on different screen sizes without changing the overall size of your browser window.

JavaScript Debugger

Since Firefox 15

Step through JavaScript code that is running in the browser (or even on a remote browser!) and watch variables to help track down bugs.

Developer Toolbar

Since Firefox 16

The Developer Toolbar provides a Graphical Command Line Interface (GCLI) to the Firefox developer tools and one click access to commonly used tools.

Developer Toolbar

Pressing F1 will make the pop-up help show straight away.

Developer Toolbar

Commands

1. inspect
2. resize
3. screenshot
4. addon

Conclusion

1. Firefox is powerful!
2. Just summon the Developer Toolbar.
3. Don't forget that Firebug is mighty!
4. You really need a bigger screen.

End

Thank you!

• Tools at MDN
• Firefox Developer Command Line

by WM