Web Developer Tools in Firefox

Firefox adds powerful built-in developer tools that let developers change the look and feel of websites in real-time.

With Page Inspector, developers can peek into a page's structure and layout without having to leave Firefox. This also means they can quickly navigate between page elements and view the HTML document structure for the page. Firefox also makes editing the style of websites easier with Style Inspector. Now developers have quick access to CSS properties and can view or change values for their website within Firefox. We also enhanced Scratchpad using the Eclipse Orion code editor to provide syntax highlighting and other features that make it easier and simpler to write Javascript.

Download the latest Firefox to take advantage of these awesome new developer tools!

• Category

  Science & Technology

[Rydn]

Thanks :D

[TeknoVenus]

They've moved it. To find it:

1) Open Inspector

2) Select the element you want to view the html for

3) Click the button 3 from the left. It is 3 horizontal lines, just to the left of the breadcrumbs.

Hope this helps! :)

[Rydn]

Hey this is awesome, but. I have the 16.0.1 version, but I don't have the "HTML" button on the right at 0:41 :(

[Harry Edgeworth]

I was wondering the same thing, the $ is jQuery syntax which requires the jQuery script hook

[riz chelsea]

thanks for presenting this great video.

[Grannymuncher]

This has been really useful in my web classes :)

[Binweevils James Arthur]

THIS IS COOL

[warnerfriends]

but i cant edit the html5 source code in nightly!!!!!!!!!!!!

[MrRigRar]

Using these breadcrumbs I can find Hansel and Gretel.

[Jamie Lievesley]

Aurora is the fastest released Firefox. Behind the Aurora release schedule is beta and then there is the official releases. By downloading Firefox Aurora you do get the newer Firefox releases faster, but they can be prone to many more bugs and lack functionality.