Firefox Web development Tools

WM Chang, MozTW

Firefox Web development Tools

開發工具大進化

by WM

Who am I

Little Web Developer

MozTW labor

@kidwm at your favorites Social Network Websites.

Agenda

Web Console

Since Firefox 4

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

Web Console

Web Console

Inspect Network Request

Network message window

Web Console

Scratchpad

Since Firefox 6

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

Scratchpad

Scratchpad

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.

Page Inspector

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.

HTML Panel

Style Panel

Since Firefox 10

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

Style Editor

Style Editor

Since Firefox 11

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

Style Panel

3D View

Since Firefox 11

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

3D View

3D View

Layout View

Since Firefox 15

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

Layout View

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.

Responsive Design View

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.

JavaScript Debugger

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

Developer Toolbar

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

Developer Toolbar Hint

Developer Toolbar

Commands

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

Conclusion

  1. Firefox is powerful!

End

Thank you!

by WM

Fork me on Github