background preloader


Facebook Twitter

WCAG Contrast checker. Firefox Add-ons. The Relationship Between Firebug and Mozilla Developer Tools « devtools. As manager of Mozilla’s Developer Tools team, people keep asking me about how our work relates to the Firebug project.

The Relationship Between Firebug and Mozilla Developer Tools « devtools

It has even come up in a tweet, but this is not really a 140 character kind of question. Johnathan discussed this a year ago, and what he says there still applies today. I wanted to provide some more thoughts on this topic since we’ve been ramping up our developer tools efforts and this will be very evident in coming releases. Firebug is an awesome project. It was groundbreaking at the time Joe Hewitt introduced it, and current leader John Barton and the project’s many contributors and extension authors have continued to push the project forward in innovative ways. Mozilla supports Firebug’s development directly, with a full time member of my team (Jan Odvarko) devoted to working on the project.

At this stage, Firefox needs to ship with a strong baseline set of tools for web developers. We think Firebug is awesome. . – Kevin Dangoor. FireCSS - See CSS edits in all browsers. David Baron's weblog: Improving font size readability on Firefox for Android. Web browsers on smartphones display Web pages in a way designed to handle Web pages that were designed for desktop or laptop computers.

David Baron's weblog: Improving font size readability on Firefox for Android

Instead of laying out the Web page at the width of the phone, smartphone browsers lay out the page on a canvas that's typically somewhere between 800 and 1000 pixels wide, then zoom that canvas out so that its width initially matches the width of the phone, and then allow the user to pan and zoom around using multitouch (and other) user interface. This means the user can't necessarily read the text when the page is initially displayed, but can zoom in to read it. Sometimes this model doesn't work so well, though. When the Web page contains paragraphs of text, the lines of text might be long enough that when the user zooms in so that the text is large enough to read, the lines are wider than the phone.

Pixel Perfect. Firediff - incaseofstairs. Firediff is a Firebug extension that tracks changes to a pages DOM and CSS.

Firediff - incaseofstairs

Change Tracking Change Tracking Screenshot Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as provide a record of the changes that were required to debug and tweak the page’s display. In addition to monitoring each change, Firediff also allows individual changes or sets of changes to be reverted, while leaving other changes intact.

Snapshot DOM Snapshot Also implemented within Firediff is a series of features that allow for a developer or designer to easily import their changes made in Firebug back into the source for their site or application. Through these collective snapshot features, the developer or designer can easily visualize and save all of the changes that have been made to the page, be it the current page state or any change in between.

Dependencies. Firebug.