HN Explorer

Ask HN: Webdevs, designers: what devtools should we (Mozilla) build in Firefox?

470 points by paulrouget ↗ HN
I'm @paulrouget. I'm part of the Firefox Developer Tools team (we are working on the builtin tools and Firebug). I believe that the HN community includes a lot of web developers and designers, so I guess you can help us.

We have recently added a bunch of new builtin tools in Firefox (please try Firefox Aurora or Firefox Nightly to see a recent version of these tools). We also redesigned the way we show these tools (screenshot here: http://paulrouget.com/e/toolboxTesting/).

We are now working on defining what should be our next moves, and I'm trying to gather as much feedback as possible.

The current plan is to build a bunch of performance-related tools (see https://groups.google.com/forum/?fromgroups=#!topic/mozilla.dev.developer-tools/L9vfZ1-smUI), improve the user interface (better theme), make the tools remotable (for mobile development), and drastically improve the WebConsole (see an experiment here: http://paulrouget.com/e/jsterm.v2/).

But we really want to get as much feedback as possible to make sure we're going into the right direction.

What do you think we should add/remove/fix in our tools? Anything you miss from Chrome or Opera? Or anything you haven't seen yet you'll like to see part of the browser?

PS: because a lot of people have raised concern about "cluttering" Firefox: we are considering providing some of these tools only as addons, to keep the Firefox DevTools as simple as possible.

359 comments

[ 3.2 ms ] story [ 335 ms ] thread
waterside81
Hi Paul, how about when serving pages that are https, but contain mixed content, highlighting somewhere exactly what the offending requests are. Currently, I have to scan the network pane and see what's coming from the http:// domain, but it'd save me a few seconds if this was more automated.
nsomaru
this sounds like a "plugin" use case?
JoeCortopassi
Honestly, the absolute best thing you could do for any dev, is lighten the footprint FF currently has on my ram, and continue to improve the api for add-ons/plugins. The more stable, extensible and fast FireFox is, the more useful I will find it for development. But if more kludge is added to it, and it continues to get slower/bigger, the less likely I am to continue to use it, regardless of what amazing plugins are available (FireBug, Web Developer Tool Bar, etc)

If you are just looking at what's best to add to the browser itself, just look at the plugin market to see what's in wide use.

prg318
Your comment is somewhat self-contradicting. Baking plugins into firefox will increase Firefox's memory footprint. Plugins are plugins for a reason -- some people will want the functionality and others will not.

How would you like to see the API for plugins/add-ons improved?

JohnBooty
Dynamically-loaded libraries (.DLL, .so, etc) have been around for decades. A feature can be "baked in" and still loaded (and unloaded) on-demand.
paulrouget
We already have a team working on memory consumption (and we already made some gigantic progress). We also have a team working on improving addons APIs (see the new builin SDK).

We are also looking at existing extensions.

[deleted]
(comment deleted)
gcp
How exactly does this help web developers?

This has been considered and rejected as inferior to the current approach. The Android browser used this and it was rewritten to get rid of it.

Let's focus on doing things that improve the user experience rather than blindly copying features from other browsers without considering if they make sense.

Moreover, it has absolutely nothing to do with the question asked.

jlgreco
I'm not sure what he said, but I assume he said something about Electrolysis.

Didn't they ditch Electrolysis because of issues with many nsplugins? I am not aware of other reasons it was shitcanned.

gcp
Plugins and add-ons AFAIK. There are also memory/performance implications, which apparently were not insignificant on mobile platforms. Given that Chrome uses more memory than Firefox, it's perhaps not insignificant on desktop either.
kevincrane
Meh, if you're referring to making every tab its own process, I personally don't like that. I'm sure there's performance or stability reasons for Chrome's decision, but I also don't really like having 30 different processes open for the one application.
nawitus
Why not? I'd say 30 processes is a lot better than 1 process. You also need to take into consideration that the number of cores is increasing pretty quickly. Pretty soon consumers will have 32 cores and whatnot. I'm a Firefox user but really it's the largest weakness Firefox is having. If I open two new tabs simultaneously, the whole browser can freeze for a bit.
kevincrane
Honestly (and I'm fairly certain this is a bad reason), it's a cleanliness thing. If I use top or the process manager, it gets annoying to scroll through countless variations of 'chrome'. Maybe if the process manager could group those into one heading where I just see "Chrome (30 processes)", I'd feel better about it?
nawitus
That's what my "process manager" called pstree on Linux does:

├─firefox───36*[{firefox}]

saraid216
My favorite thing about Chrome is that I can open up "View background processes", get a list of which tabs are using up how much memory, and then click-and-kill selectively.

But this is an end user experience, rather than a web dev experience.

subsection1h 

    Why not? I'd say 30 processes is a lot better than 1 process.
1 process is better than 300 processes, and I sometimes have more than 300 tabs open. (I always have more than 100 tabs open.)

    If I open two new tabs simultaneously, the whole browser can freeze for a bit.
People who prefer one process per tab tend to mention that tabs freeze up their browser, and I believe them, but this never happens to me. Maybe it's because I use NoScript and have all plugins disabled, except for Flash, which I block with Flashblock.
shurane
What about an easy way to redistribute customized versions of Firefox? What im thinking about is something like a software pack or plugin bundles, similar to ninite. Very much like the spf-13 vim distribution. Or like some of the bundled eclipse distributions, like PyDev or Aptana. It's a batteties included idea.

There are a lot of cool plugins, but new users don't always know what to get. But if if it was easy to fork Firefox and add some plugins and redistribute it in whatever forums or communities they prefer, that would be cool.

So there may end up being a Firefox for reddit, for image processing, for web design, for web dev, etc.

baby
This and tabs on the left. It feels like using Tree Style Tab is not really fully optimized.

I don't think you need to add a more things for developers. The tools already present are good enough, I saw someone suggesting a built-in sFTP. That's just too much.

darkstalker
Tree Style Tabs should be a core feature IMHO. It's the single most important feature for me.
baby
I still don't understand why it isn't. We have wide screens and we use more and more tabs.
holloway
Yeah it's not a developer feature but I'd love this too. It's just a good way of managing lots of tabs and developers do have lots of tabs open.

Tree tabs are the more conventional way of understanding lots of items (and tabs are hierarchical -- parent tabs are where you opened the current tab from).

mehrzad
I thought that the latest browser tests showed that FF used less ram than Chrome. http://lifehacker.com/5976082/browser-speed-tests-chrome-24-...

Unfortunately, reputations stick.

[deleted]
(comment deleted)
lelandbatey
Indeed, everything I've seen recently points to FF as having a slim lead over Chrome. It's just that for many of us, the last time we used FF was right before we switched to Chrome, so our perspective is frozen at that point.
datadiver
I am back to using FF for my everyday browsing as Chrome takes about 2x as much ram with my 50 tabs (casual observations, not benchmarked).
UberMouse
This is my current Chrome memory usage

  Browser	                                    	       
  Google Chrome 25.0.1364.97

  Memory 
  Private      Shared  Total
  3,950,040k 12,805k 3,962,845k

  Virtual memory
  Private      Mapped
  4,728,936 k 937,320 k
This is with 18 tabs and ~20 extensions. Chrome isn't really light on memory usage anymore. 1.5GB of that is split between Google Reader and the Spotify web player though, anything Javascript heavy seems to use an absurd amount of RAM after it's been left open for a few days.
pmarsh
How much RAM do you find FF using? And how much do you have in your machine?

Just curious because I rarely find FF creeping up towards a gig and RAM is so ridiculously cheap most of what I have just sits around doing nothing. (Edit: shouldn't have said nothing, but I'm not maxing out even with 4GB unless I am working in Photoshop/Illustrator)

frewsxcv
Firefox uses much less memory than Chromium does on my Linux machine. How much memory is Firefox using compared to Chrom(e/ium) for you?
rschmitty
When is the last time you compared memory use?

I have this thread, HN home, espn, and techcrunch open in both FF and Chrome right now

Chrome 454,920K Firefox 487,156K

a 30 meg difference is really _not_ a big deal.

Anywho I find myself using chrome for dev while FF is for browsing. The AngularJS and Speed Tracer addons are nice for Chrome. I browse with FF because they support tags with bookmarks, which I'm addicted to

gkanai
Mozilla is working hard to manage memory/RAM in the most efficient manner. In many 3rd party tests, Chrome uses more RAM than Firefox for the same set of tabs. Mozilla is tracking this here: https://areweslimyet.com/faq.htm
kohlerm
What about memory analysis tools for javascript? Im my experience ATM most developers don't have a clue about whether they have memory leaks and where the could optimize (javascript) memory usage. Chrome does have heap snapshots https://developers.google.com/chrome-developer-tools/docs/he.... Also chrome has some tools to analyze thos snapshots they are still far from what the Eclipse Memory Analyzer http://eclipse.org/mat/ can do for Java apps. Fortunately chrome heap snapshot support will be coming soon for the Eclipse Memory Analyzer. IE BTW now has similiar heap analysis tools.

Regards, Markus

makepanic
I really love what you're doing with the developer tools in Aurora. But I'm missing a network tab.
paulrouget
Thank you :) Network tab is our next tool.
moofish
Support V8's debugger protocol so we can use the WebKit Inspector.
chaudruc
Would love to see integrated ftp/sftp client and in-browser tabbed editing for quick site edits.
thurn
How about exposing an API for dev tools similar to the "swank" protocol that Emacs uses for editing Lisp code? I know there are people doing stuff like this already, but it would obviously be a lot easier if there were a nice protocol for it (ideally standardized across browsers...). I want to be able to seamlessly interact with a running Firefox instance from my editor or IDE, sending it snippets of code to evaluate and seeing my page change in real-time.
paulrouget
That's interesting. I'll look at that. Thanks.
grayrest
If using swank is impractical, the Clojure community is in the process of shifting from swank to nrepl. I haven't looked into the details of either but wanted to point out another option.
mweibel
Websockets inspection would be very nice. To my knowledge no browser does support this and it would be very handy IMHO.
[deleted]
(comment deleted)
TrisMcC
The JavaScript object browser mini-windows do not behave properly on Awesome, a tiling window manager. There is no way to close the windows without closing the entire web console. If I try to close the window like I close any other window, it will close the full browser window.
paulrouget
We are already working on that (we call the "variable view"). It won't be a window anymore.
TrisMcC
Thanks! I am running a current Nightly, do you know when this might land?

I am remarking today that on my system, Firefox must use less ram today than it did in 2005. Great work!

padenot
As a workaround, you can close and reopen the console to get rid of the object browser. I also use Awesome, and it works for me.
rebugger
Prettyprinting/unobfuscating the JavaScript sourcecode (like in chrome and opera) would be nice.
paulrouget
Sourcemap support + unminification are coming.
thehumantorch
The guy is asking for suggestion to the DEVELOPER TOOLS... no to the firefox browser itself.

I have to admit that i changed my dev browser to chrome. The chrome developer tools are great. I like to have everything on one panel instead of the console in one place and the html and css in another.

potch
If you viewed the above screenshot, you would see that in fact the current Firefox developer tools do the same thing.
pstadler
The main reason I'm still using Firefox as my main browser is Firebug, which is still better than the competition. Unfortunately it's a memory hog and dramatically slows down the whole browser. So my vote goes to performance improvements for Firebug.
the7nd
It would be great if response bodies were easier to view. I have to enable logging and scroll to the bottom of the network request window to view them currently.

Also, thank you. The updated tools in FF20 beta have been fantastic.

timw4mail
My request would be a way to plug into the developer tools, similar to Firebug. That way things like Firephp logging woule be possible without the overhead of Firebug.
Mahn
Excellent initiative! I'd personally kill for a tool akin of Chrome's timeline, where to debug performance issues not related to javascript, like rendering e.g. things that trigger a complete screen redraw and whatnot. I'd really like to see this happen because at the moment if an app is super snappy on Chrome but slow on Firefox and javascript is not the culprit, I'm left basically to guess how to improve the performance.
finnnnnnnnnn
I really dislike how chrome display :before & :after in the styles pane. More often than not these pseudo selectors contain quite important styling that's hidden away in the styles. Not sure how you can fix this, but there must be a better way.

Any chance you could remove the animation that appears when using the element selector? I find the flicker very distracting.

yesimahuman
I think I'm just used to the WebKit dev tools, but I find it requires more work to get to the Script tools, etc in Firefox than Chrome. For example, in FF I have to go to Tools -> Web Developer -> Debugger to get to the debugger. I can't just get there by doing "Inspect Element".

I'd like to see all the tools combined into one mode and allow me to pop it out into a new window. If I can do that right now, it's just not intuitive.

Also, it'd be great if FF pushed people away from Firebug, as I didn't know FF had built in tools and I was resorting to Firebug each time.

Just some thoughts. Great work!

paulrouget
All you said has been implemented in Firefox Aurora.
gverri
What about some "livereload" capabilities?

http://livereload.com/

I know a lot of people who use it. And I think it would be great to have it native on firefox.

timme
Make the native 'Inspector' tool go away. Accidentally opening that thing (because they're next to each other in the context menu and the labels are similar) instead of Firebug is infuriating.
paulrouget
There's an option in Firebug to disable the inspector button.
drivingmenuts
I would say make Firefox as light and fast as possible by keeping ALL developer tools as addons. Most users aren't going to need them at all, so it's just eating up space for no reason.

I personally prefer Firebug over Inspector, so I would rather see you throw more resources into integrating it fully with FF.

vinhboy
That new Inspector thing is really annoying. I always accidentally open it instead of Firebug. From a developer stand point, Firebug stills beat all other browser dev-tools by a mile and is the main reason I still have Firefox on my dashboard.
paulrouget
Firebug allows you to disable the builtin Inspector button.
Jemaclus
You can turn off the built-in Inspector by going to about:config. There's an option in there (I forget the name of it off the top of my head... probably something like "inspector"!) and you can change the Boolean value to 0 and it will no longer appear in the context menu.
paulrouget
The developer tools don't slow down Firefox if not used (lazy loaded), and the space used is very small.

Firebug allows you to disable the builtin Inspector button.

jmathai
> Firebug allows you to disable the builtin Inspector button.

I believe the parent was saying it should be a joint effort and all the resources should be pooled into one. I prefer Firebug as well and would love to see it get better, faster.

pwnna
I find that firebug slows down the browser after a while of debugging. Memory leak? Make it faster :)
nkron
I would love to an allocation profiler that reports garbage. .Net has the CLRProfiler which tracks allocations over time and can show where you are creating a lot of temporary allocations. CLRProfiler is a great tool and I haven't found anything like it in the web world yet.
rebelde
Maybe this is provided and I haven't found it yet: - Rendering speed - show what slows it and what we can do to improve it. (Too many DOM objects, external files, redrawing?).

Thanks!

paulrouget
We do have a profiler now (alpha stage in Firefox 21).
silon3
It would be nice to have a latency profiler that would dump stack traces (or break) when execution takes more than 0.1 seconds (or 0.01...) for both js and native/html and xul.

Also, realiable support for "break on throw exception".

Benferhat
It would be great if it was easier to debug errors like this:

    [12:11:02.525] Empty string passed to getElementById(). @ https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
Especially when Firefox throws the error and Chromium doesn't.
bzbarsky
For what it's worth, it's a warning, not an error. And Chrome doesn't have this warning at all, hence it not showing up there.
Benferhat
Sadly, it's the only clue I have as to why my form's submit button isn't working.
bzbarsky
The chance that this warning has anything to do with the submit button not working is low, unless it doesn't work in all browsers.
therealunreal
The console certainly needs some love. I love that it opens so fast and feels so light compared to Firebug. I don't use it because:

* I can't select and copy text from the console's output (it's a listbox now)

* The autocomplete is not as good as Firebug's and hitting enter does not complete it

* The inspector does not remember the width of the two panels (left with DOM/right with CSS rules)

You get the idea. You've completed the 90%, now fix the 10% left.