Firefox debuts new developer toolbar

https://blog.mozilla.org/blog/2012/10/09/firefox-debuts-new-developer-toolbar/

by lforrest • 14 years ago

196 74 14 years ago

blog.mozilla.org

welder• 14 years ago

That's great! It's much better than the prev Firefox dev toolbar. I wonder if people will take the time to learn the Firefox specific console commands?

senorcastro• 14 years ago

I might be more impressed if I didn't use FireBug.

ttaubert2• 14 years ago

What do you mean? It doesn't use Firebug at all.

CrazedGeek• 14 years ago

He means that Firebug is better than this new toolbar in his opinion.

fletchowns• 14 years ago

They aren't mutually exclusive, they complement each other. At the end of the video, using the new developer toolbar, he enables Firebug, and shows off that there are now Firebug specific commands that have been added to the toolbar.

pjmlp• 14 years ago

Same here, but now I wonder what the FireBug developers will do.

acomjean• 14 years ago

wonder if it will play nice with pentadactyl or vimperator or any other of the keyboard based browsing add-ons.

Looks good though.

danneu2• 14 years ago

Plays nicely. Just pops you into insert-mode when you bring up the devbar and pops you back into normal when you exit.

jvm3• 14 years ago

Would be cool if Vimperator integrated it though! E.g., :! could give you access within the Vimp command line itself.

james33• 14 years ago

I'm really pleased to see that Mozilla is finally stepping up to the plate and trying to bring web developers back into the fold that have been enjoying the much better Webkit dev tools. I hope they continue with this momentum.

callahad• 14 years ago

Favorite feature of the dev toolbar: it has a "screenshot" command to dump a PNG of either the entire page or a specific block.

ed209• 14 years ago

Is this one better than the extensions that already existed for taking screenshots?

no_news_is2• 14 years ago

Don't know about parent poster, but I think:

a) It's better to have it baked into the browser in general, if it's something you use. Worse if it's not, though.

b) Screenshots with selectors are pretty awesome, and I don't think most extensions would provide that

pbhjpbhj• 14 years ago

Which extension are your referencing. I'm currently using Page Saver but previously used Awesome Screenshot Plus until they started intercepting pages and spamming adverts to them by default. Having it in-browser is good.

Also I've not seen a screenshot tool that allowed an id to be specified before as someone said this will/does.

state2• 14 years ago

It's really nice to see an approach that's different not just in UI but in concept. Smart.

cicloid3• 14 years ago

Lately Firefox started looking more atractive again. Mostly because of Chrome's feature creep. But probably I'm just overthinking it.

sumone4life2• 14 years ago

Made the switch today because of this, and a few other features and improvements since I last used firefox.

st3fan2• 14 years ago

What improvements did you like most?

state2• 14 years ago

I agree. There's something good going on over there. Seems like it's a good thing to be under pressure from Chrome.

ch0wn2• 14 years ago

> Mostly because of Chrome's feature creep.

I think I'm actually quite sensitive to that, but haven't felt about Chrome that way yet. Could you explain what features you mean in particular?

azakai4• 14 years ago

Some things Chrome includes that other browsers do not: Pepper, Native Client, Chrome Web Store, WebSQL (Safari might have that one too), a native PDF viewer, SwiftShader, etc.

(People of course disagree on which of those are bad and which are good.)

cicloid3• 14 years ago

Besides the reply to your comment. Anecdotally I could tell you that some months ago, Chrome felt much faster at loading.

And I'm talking about barebones Chrome. Sometimes using extensions or activating/deactivating some flags can hinder/improve the performance.

The only thing that keeps me here, is the extensions not available on Safari (my other favorite webkit browser).

But overall it seems more slow on launch (even on clean install).

snogglethorpe• 14 years ago

Firefox has been improving noticeably faster since Chrome came into the picture. Not just lately either. FF has gotten much faster, much less memory hungry, and added a lot of new features (many inspired by chrome).

I find I use both regularly, and which I use by default changes often, depending on the circumstance. E.g. they're both pretty fast these days, but on different things. FF seems more memory efficient overall, but chrome's per-tab-process thing makes it easier to manually reclaim memory by closing a tab (the per-tab-process also probably makes chrome less able to share memory between tabs, so there seems an inherent tradeoff, and explains FF's win here).

So it seems a virtuous cycle, and chrome's to be lauded not only for a great browser, but for heating up the browser race in a way that seems to have resulted in every browser improving.

monkeypizza• 14 years ago

I just added fauxbar[0] to chrome, which fixes the worse feature of chrome - the bad history integration when typing in the url bar. I love both, too, but this addition to chrome puts it back in the lead.

[0]http://code.google.com/p/fauxbar/

no_news_is2• 14 years ago

Reminds me of: https://en.wikipedia.org/wiki/Ubiquity_(Firefox)

Tying this down to the specific domain of web development will probably help its longevity though.

I'm very excited about the add-your-own feature and hope it's similar.

codemac2• 14 years ago

If you have a HiDPI display (ips or retina mac), Jonathon Kew's patchset to add this feature to Firefox has landed in the Aurora branch.

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/lates...

There are 18a2 builds in there, I'm using it now! However, I haven't seen it mentioned on the main aurora release page, so proceed with caution.

cpeterso3• 14 years ago

Firefox's lack of HiDPI support was killing my eyes, but I've been using Nightly builds and they look great. The only problem I see is that Flash plugins get confused about screen sizes (so YouTube has tiny control buttons).

codemac2• 14 years ago

The plugin support hasn't bothered me yet, and it's almost surprising.

The amount of flash I use on a daily basis is so incredibly minimal these days. I've started using the built in plugin blocking with firefox. The only time I really turn it on is for Netflix and the occasional video that isn't part of the HTML5 beta on youtube is about it.

( not that any of this is an excuse to not fix the bug :P )

nsmartt4• 14 years ago

If Firefox had a GUI that didn't rely on the window manager's decorations (a la chrome), I would switch in a heartbeat.

As it stands, using Firefox on Linux (Openbox) feels like a huge step back from Chrome.

thristian• 14 years ago

That's interesting. Chrome's lack-of-integration with the rest of my desktop is one of the things that keeps me away.

nsmartt4• 14 years ago

On Linux, Chrome has an option to use system decorations. Does it lack that option on other systems?

oftenwrong• 14 years ago

In what way does it rely on the WM's decorations?

nsmartt4• 14 years ago

I misspoke. Most programs use system decorations, but I do prefer the way Chrome has an option to use its own alternative.

Spittie• 14 years ago

You can probably get something like chrome using "Hide Caption Titlebar Plus" (https://addons.mozilla.org/de/firefox/addon/hide-caption-tit...) to hide the titlebar and put the windows button directly into the window. You can even use Stylish to customize those button (so they'll fit your theme).

petepete• 14 years ago

Sorry, am I missing something - Why use Openbox if you don't like the window decorations?

nsmartt4• 14 years ago

I don't like the window decorations of most window managers. Openbox allows users to set keyboard shortcuts, customize a menu that's always a couple of keystrokes away, and the window decorations can be customized as well. It's worth tolerating, but I spend a lot of time in my browser. I've been spoiled by Chrome, and now I don't want to switch away.

That said, there are a couple of other things that keep me on Chrome such as its element inspector.

danneu2• 14 years ago

The shortcut to bring it up (fn+shift+f2) is pretty unwieldy on the Mac keyboard.

Anyone have any idea on how to change the shortcut? No luck in about:config.

cpeterso3• 14 years ago

You can remap individual applications' keyboard shortcuts in System Preferences > Keyboard settings. For this case, the keyboard shortcut should remap the menu item "Developer Toolbar". I like to remap CMD+Q to something harmless like "Hide Others" to avoid accidentally quitting apps. :)

antidoh• 14 years ago

You can also get at the menubar through the keyboard:

alt-T W v

which looks a little unwieldy, except you don't have to move from the home keys, and I find it much easier to type than

hands up, look for fn, left middle to shift and left index to fn, right middle float up and over to f2

You can muscle memory a short menubar keyboard sequence pretty quickly if you use it enough.

gizzlon• 14 years ago

Isn't it really just "shift+f2" ? But your keyboard doesn't have an f2 key, so you have to press "fn" to get "f2" ?

Of course that doesn't help you, but this has annoyed me on mac, and I think they deserve the blame ;)

BHSPitMonkey• 14 years ago

Who downscales a screencast to 480p before uploading to YouTube? It would be a much better demo to watch if they hadn't.

zobzu2• 14 years ago

can't read what he's typing indeed

sesqu• 14 years ago

Be sure to watch in 480p, not 360p. I can make out what he's typing, though it is a bit blurry. Plus, if you only care about the commands, he always mentions them - just not all of the parameters.

befuddled• 14 years ago

Captioning would have been nice too - the YouTube auto-generated ones are, as ever, gibberish: http://imgur.com/kKgPc

mariusmg• 14 years ago

Shift + F2 opens the command line but pressing Shift +F2 again doesn't close it. That's.....unexpected (and annoying).

st3fan2• 14 years ago

Please file a bug for a feature request.

cpeterso3• 14 years ago

Works for me with Nightly 19 on OS X.

zobzu2• 14 years ago

WFM Win 7 Nightly

past2• 14 years ago

This is fixed in Firefox 18.

polarix• 14 years ago

Ah, do they finally have a debugger again?

past2• 14 years ago

Yes, since Firefox 15.

zanny• 14 years ago

As a guy who writes software who doesn't write much html (because web is hard) I can't help but feel that having all these devtools built in by default, while nice for developers, seems silly to have wasting space on the hard drives of millions of users. They will never use the source viewers, live editing, page heuristics, etc, and it reeks of feature creep to me, and one product trying to be too many things at once.

tikhonj• 14 years ago

It may be a waste of space, yes, but space is cheap.

Also, it is extremely valuable to have these tools on every browser I happen to use. I can see what's wrong with my website--or anybody's website--at any computer. If you go to some page and something doesn't work, I can just open the developer tools on your browser and try to sort it out.

So while most people don't need these tools most of the time, they can still be useful once in a while and have a negligible cost.

RobAley• 14 years ago

Some stats: ~350 million users[1] ~17Mb download[2]

Lets assume a full 25% is dev tools (I think its likely to be much less), so 4.25Mb per user. That's 1418Tb, or just under 500 3Tb disks. Considering that's spread across 350 million users, I think that's not too much at all, and its probably much less.

[1]https://wiki.mozilla.org/images/e/ed/Analyst_report_Q1_2010.... [2]http://www.mozilla.org/en-US/firefox/all.html

gioele• 14 years ago

> seems silly to have wasting space on the hard drives of millions of users.

I'd be more worried about memory consumption, wasted CPU cycles, lost opportunities to let the CPU sleep, the cost of running CI tests...

I am also worried about the increase in the attack surface exposed to random pages downloaded from the Web.

mikeratcliffe• 14 years ago

All Firefox Developer Tools are lazy loading so they do not use extra memory unless you open them.

Also, having the tools built in means that they are tested every time any core Firefox code is changed leading to a much more stable environment.

jmcejuela• 14 years ago

Big congrats to the Mozilla team.

Lately they haven't stopped releasing new great things: Persona, lljs, WebPlatform (co-participation), now this developer command bar, ... sth else? Impressive.

89a2• 14 years ago

Jesus christ, Firefox is the definition of "over designed"

qoo• 14 years ago

Tried the CSS inspector in Aurora. As of today, there is still no keyboard nudge support (Click on the value of a CSS rule and then press keyboard up / down keys to adjust it +1 / -1).

Sticking with Firebug until this feature is added.

Firefox debuts new developer toolbar

Related Stories