Hacker Newsnew | comments | ask | jobs | submitlogin
Ask HN: Webdevs, designers: what devtools should we (Mozilla) build in Firefox?
457 points by paulrouget 409 days ago | comments
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.



mbell 409 days ago | link

This is a big request:

Improve "design in the browser" capabilities. i.e. pushing CSS/HTML and maybe JS changes made in Dev Tools back to the source files without manual shenanigans in the middle.

I probably waste more time copying CSS / HTML tweak diffs from the browser back into the related source files than anything else with in browser dev tools. Due to the nature of 'losing changes' if I happen to hit refresh or if the page has some automatic polling mechanism I also tend to do this very often as some sort of manual 'save' action.

There have been a couple attempts to do this (http://www.cssupdater.com/ or https://code.google.com/p/backfire/). But, I'd really like to see a standardized protocol for pushing changes to the server such that server side frameworks can implement it appropriately.

For example a server side implementation for Rails needs to understand the asset pipeline to know how the final file was created so it can work its way back to the correct file to save changes to. This also means you probably need source map style support for LESS and SASS also. Also to change HTML template files the server side needs to know how the page was constructed so it can find the correct partial / template to save changes to. Which is probably really hard depending on how much state based conditional rendering there is in your templates, maybe the server side caches the last response and associated state to work around this.

-----

ryanackley 409 days ago | link

I'm the author of http://tin.cr, it tries to solve this exact problem for Chrome Devtools. (someone else mentioned this in this thread).

I've spent some time thinking about the problem. In an ideal world a standardized protocol to push changes to a server would be awesome. I think it's unrealistic though to expect widespread adoption especially for existing frameworks to add code just for doing this. For example, have you ever heard of WebDAV? It was thought up along the same lines and it's virtually dead now.

A better solution for now would be for source maps to tell you the full local path to the original source file. Yes, in a world where we all develop from Chromebook-like devices against files in the cloud, this won't work. We are a long way from that world at the moment.

-----

cabbeer 406 days ago | link

When I try to install the extension I get the following error: "This application is not supported on this computer. Installation has been disabled." I have a Thinkpad T420s running windows 8 with Chrome Version 25.0.1364.152 m, any idea what's not compatible?

-----

spullara 409 days ago | link

This was the original intent of the PUT method in HTTP.

-----

wamatt 409 days ago | link

Neat. Out of interest, how does Tincr compare to LiveReload or CodeKit?

-----

ryanackley 409 days ago | link

At the moment, it has two big drawbacks compared to those two

* The live reloading doesn't support full refreshes. You can only do live updating inside the running page. Chrome has built-in support for this. Works awesome for css. JavaScript support is a little flaky. * It doesn't support re-compiling Sass, LESS, CoffeeScript, etc. on a file change.

I'm actively working on fixing both problems.

-----

possibilistic 409 days ago | link

This is quite honestly the best new feature we could be given. It's not an easy task, but such a tool could save millions of man-hours.

Mozilla guys: if you implement this--even partially--I'll switch back to Firefox in a heartbeat.

-----

paulrouget 409 days ago | link

A lot of people are asking for that. I guess sourcemap is (part of) what you're describing. We're working with Google on this, and we'll soon have builtin support at least for JavaScript (not HTML/CSS yet).

-----

kevinSuttle 409 days ago | link

Something like this, but for all (standard) source files, not just JS.

http://remysharp.com/2012/12/21/my-workflow-never-having-to-...

-----

pixelcort 409 days ago | link

If a browser supported PUTting the modified resource back up to the server, we'd be off to a good start. Server-side frameworks could then add functionality to split the modified resource back into the files that created it.

-----

timdorr 409 days ago | link

What about pre-processors (SASS, Less) or templating engines (ERB, Haml, Slim)? That would seem to be a huge task to "un-pre-process" an asset. Going backwards is immensely difficult. These are not easily reversible processes.

Instead, why not make something like IntelliJ/RubyMine/WebStorm/etc.'s Live Edit plugin a native part of the browser. Allow the asset pipeline to tell the browser it has changes available, rather than try to have it regurgitate all the processed assets. That would be relatively easy to add and very straightforward to implement.

-----

pedalpete 409 days ago | link

Your Live Edit idea is a good one, but I think the assumption about "un-pre-processing" would be part of the pre-processing development tools understanding what was being pushed to them, therefore, the need for an open standard as has been alluded to above.

-----

btown 409 days ago | link

Love this idea, it would make source modification a piece of cake for every browser-maker to implement. To allow for compatibility, this feature could be activated only when a X-Source-Modification-Enabled (or something) header is present on the original page. The header's value could even be the (relative) endpoint to call!

The simplest middleware that would pop up would be a diff generator. But with source maps, web frameworks could track what exact source files were used.

-----

mbell 409 days ago | link

My crazy idea is to just use git + some sort of source map style overlay on both ends to track changes and pass them back and forth.

-----

paddy_m 409 days ago | link

A lot of these ideas could be supported via a proxy system. Something like charles http://www.charlesproxy.com/ on steroids. If you wanted to edit yahoo.com , you would checkout your local repo, have charles point to the local repo, and then your on the fly css/js fixes would go to your local repo. Yahoo's server wouldn't have to support it.

-----

yesbabyyes 409 days ago | link

It seems to me, that with source maps in the browser, the browser should be able to PUT the original source file, with the correct file hierarchy. So, downloading assets.min.js, editing models/Foo.coffee, PUTting models/Foo.coffee.

That would be really something.

-----

Ironlink 409 days ago | link

I'd be happy even if this was limited to the local file system! I've already got build and deployment set up, and modifying the web servers seems like a hassle.

-----

julian37 409 days ago | link

Isn't that the wrong way around? Instead of pushing to the web server and let it figure out where to put the changes, change the local file (or file on the server, via NFS or such) and push the changes to the browser as well using tools such as swankjs [1] or, once it's ready, Kite [2] (that's my pet project).

For higher-level languages like Coffeescript or SASS, run a local compiler on the file or function so you can push the compiled code to the browser.

A nice side effect of this approach is that you can use a real code editor instead of the Notepad-style editor embedded in the browser.

In that regard, my #1 feature request for the Firefox devs is to finish and implement the remote debugging protocol [3] and, preferably, work with the WebKit devs towards unifying the two protocols.

[1] https://github.com/swank-js/swank-js

[2] https://github.com/jscheid/kite

[3] https://wiki.mozilla.org/Remote_Debugging_Protocol

-----

callmevlad 409 days ago | link

(Disclaimer: I'm working on http://www.webflow.com to try to solve this exact problem.)

I've been thinking about this issue a lot over the last year, and it's really as hard as you state (and then some). We ended up having to create our own supersets of the DOM/CSSOM in order to keep track of individual elements/selectors as they are created/removed/changed. I would be very surprised (and pleased) if Mozilla was able to implement this in a way that works without lots of additional/manual inputs. If you think JS source maps are a hard problem to solve, I'd say this one is at least an order of magnitude harder.

-----

mbell 409 days ago | link

My thought is that this is really most useful for CSS and the transformations that SASS/LESS are capable of are relatively mundane in comparison to CS -> JS. In addition I only see this as a tool for development, not something that I would want running in production so you don't have the concerns over increased file size or still supporting minification that you do with source maps, assuming you want source maps in production for error reporting.

I can envision simply using structured CSS comments to pass the needed information to the browser. The browser only needs a structured pushing protocol, baseline comment format, probably handling of comments that indicate file boundaries (used for pushing to the correct resource) and a 'plugin api' to allow plugins to parse other comments in a meaningful way, SASS/LESS could provide a 'Dev tools' plugin to parse the comments and support whatever editing features they wanted. They would also have to support generation of the comments in the preprocessor.

The important bit is a standardized pushing protocol, a standardized way to provide additional mapping information and a standardized 'plugin' style system to allow things like SASS to add to dev tools additional editing support.

Just one theoretical approach, still a ton of work, but I really think there is a lot of developer time spent dealing with this issue so it may well be worth it.

-----

codegeek 409 days ago | link

I tried to enter my email address to get notification of your launch. Nothing happened when I clicked the button (using IE 8)

-----

callmevlad 409 days ago | link

Woah, oops - thanks for letting me know. Trying to stand up a VM right now so I can see what's going on.

Edit: Should be fixed now.

-----

pedrox 402 days ago | link

I'm having similar problem on firefox 19 on ubuntu 12.10 x86-64. After some seconds it says "Hmm, that email address doesn't look right...".

-----

Arelius 409 days ago | link

I'm not sure I would say that JS source maps are a hard problem to solve.

-----

callmevlad 409 days ago | link

Fair point. However, it has taken years to get to where we are today (CoffeeScript just shipping support, limited browser support), so it doesn't seem to be an easy problem either.

-----

mintplant 409 days ago | link

The delay in CoffeeScript support had to do with the design of the compiler more than anything. CoffeeScriptRedux [1] has had this in for quite some time.

[1] https://github.com/michaelficarra/CoffeeScriptRedux/

-----

Arelius 409 days ago | link

Indeed the ecosystem and support around source maps isn't super easy in total, but I wouldn't call any particular point in isolation particularly difficult. It's just that there is quite a few of them.

-----

nailer 409 days ago | link

+1. I can't even add an element directly in the Chrome dev tools - you can only edit an existing elements HTML and append something after it.

My kingdom for a '+' button.

-----

mbell 409 days ago | link

You can, sort of.

Right click on an element and choose "edit as HTML" and you can add whatever you want, granted it offers no reasonable formatting, its just a wall of text, not even tabs / line breaks.

It is also broken in that when you do this Chrome rebuilds all the sub elements of what your editing so if there were event hooks or anything like that on the elements they will be gone.

-----

paulirish 396 days ago | link

> It is also broken in that when you do this Chrome rebuilds all the sub elements of what your editing so if there were event hooks or anything like that on the elements they will be gone.

This may not be completely true. In Edit As HTML mode every effort is made to retain the original elements. If you move some tags to another location, the real element (and handlers) should actually be retained.

-----

modarts 409 days ago | link

Not to mention dragging over text to select it usually results in the entire HTML fragment getting destroyed when Chrome decides that you're actually attempting to drag the text to move it somewhere else.

-----

nailer 408 days ago | link

It really seems like you didn't read my post before you replied to it.

-----

ephemient 409 days ago | link

My workaround is to click an element, then type into console

    $0.appendChild(document.createElement('tagName'))
but yeah, a [+] button would be nice…

-----

nnnnnn 409 days ago | link

If you're using Chrome, try out: http://tin.cr/ It seems to be at least very similar to what you're looking for!

-----

collypops 409 days ago | link

I wrote a post about a year ago, to open up a discussion about what browser vendors can do to encourage rapid prototyping designing in the browser, by giving them tools for visual design that they would opt to use over software like Photoshop/Fireworks.

I'd love to see more tools that enable rapid prototyping, including the ability to craft CSS in a more visual manner.

Here's the post, for any who are interested:

http://blog.colin-gourlay.com/blog/2012/03/how-can-browser-b...

-----

sambeau 409 days ago | link

Just being able to hold down a modifier key to move an element up down left and right would be great. You can do this in one dimension at a time at present but to be able to exactly place something would be a tremendous time saver.

-----

pbhjpbhj 409 days ago | link

>You can do this in one dimension at a time at present //

In FF dev tools?

-----

mnazim 409 days ago | link

+1. I know it's not the main line of discussion here but I wonder how can this feature be leveraged for CSS preprocessors like Less/SASS where CSS reaching the browser is never edited directly.

Edit: Gramer and language improvement.

-----

nc 409 days ago | link

It's not always possible to push changes back to LESS or SASS due to ambiguity at which level changes should be applied - if you're editing CSS values. The browser would have to display SASS or LESS in the inspector for what you're suggesting to work.

-----

apavlov 409 days ago | link

Chrome Canary (perhaps, the Dev channel, too) supports navigation to CSS selectors, property names and values (Ctrl-click them) in the corresponding Sass resources (the Sources panel). You can edit Sass and save it to disk (right-click the editor, "Save as...").

Now, if you have the "Support for Sass" experiment enabled, you'll see the "Auto-reload CSS upon Sass save" timeout setting to reload re-generated CSS files after "sass --watch in:out --sourcemap" (or equivalent) has updated them on the local disk.

-----

the_french 409 days ago | link

If you could somehow get sourcemaps for haml/sass/whatever it would make debugging css/html in the browser so much easier when working with serverside templates.

-----

aquanext 409 days ago | link

Yeah, I think it would really set Firefox above everyone else is if it had its own web IDE (live WYSIWYG and code editing) built right in. It'd have to be a good one and you shouldn't try to force people to use it who don't want to. But I agree with other folks here: We all would kind of like the option to use something like that right in the browser.

-----

vsync 409 days ago | link

aaaaaaand then we'd be back to SeaMonkey.

Not that there's anything wrong with that.

-----

maufl 409 days ago | link

Not perfect but what I did last time I played with backbone:

* As I used sass, coffeescript and haml, I used guard (https://github.com/guard/guard) to watch the source files and automatically compile them

* Used serve (https://npmjs.org/package/serve) to serve the directory over http, could use python -m SimpleHTTPServer too

* Used live.js to pull for changes (http://livejs.com/)

As I said it's not perfect though, while CSS changes get applied transparently, changes in javascript will reload the page (you can also watch only for CSS changes). Still for working on CSS, especially together with LESS or SASS it's quite pleasant. Also it spams your Firebug console pretty bad.

-----

JoeCortopassi 409 days ago | link

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.

-----

mehrzad 409 days ago | link

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.

-----

lelandbatey 409 days ago | link

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.

-----

UberMouse 409 days ago | link

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.

-----

datadiver 409 days ago | link

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).

-----

paulrouget 409 days ago | link

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.

-----

shurane 404 days ago | link

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.

-----

[deleted]
gcp 409 days ago | link

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 409 days ago | link

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 409 days ago | link

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 409 days ago | link

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 409 days ago | link

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.

-----

subsection1h 409 days ago | link

    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.

-----

kevincrane 409 days ago | link

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 409 days ago | link

That's what my "process manager" called pstree on Linux does:

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

-----

saraid216 409 days ago | link

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.

-----

prg318 409 days ago | link

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 409 days ago | link

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 409 days ago | link

We do lazy load the devtools.

-----

JohnBooty 409 days ago | link

Mozilla rocks!

-----

baby 409 days ago | link

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 409 days ago | link

Tree Style Tabs should be a core feature IMHO. It's the single most important feature for me.

-----

baby 409 days ago | link

I still don't understand why it isn't. We have wide screens and we use more and more tabs.

-----

holloway 409 days ago | link

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).

-----

gkanai 408 days ago | link

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 395 days ago | link

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

-----

pmarsh 409 days ago | link

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)

-----

rschmitty 408 days ago | link

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

-----

frewsxcv 409 days ago | link

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?

-----

oneandoneis2 409 days ago | link

I have to be honest - I find the developer tools a pain: They aren't even close to replacing Firebug, yet they're more obtrusive. So I can't stop using Firebug, and I can't remove the unwanted built-in menu options.

So for me personally, what I'd really like to see is either one of:

- Match Firebug feature for feature

- Allow for the dev tools to be completely removed from the interface

Sorry, but it really does come down to those two: Whilst the Dev Tools can't replace Firebug, I won't use them. So either allow me to get rid of them, or allow me to switch 100% to them.

Sorry it's not more constructive, but I've no interest in having to juggle between two different debug tools because they both have awesome features. So I don't care what amazing new stuff you might be lining up, I won't use them until all of the functionality I use in Firebug is also available in FF's builtins.

-----

paulrouget 409 days ago | link

> They aren't even close to replacing Firebug

That's why we still work on Firebug :)

> yet they're more obtrusive

It should be better in Firefox 21.

> I can't remove the unwanted built-in menu options.

Firebug allows you to do that. But seeing the number of comments about this specific issue, I think we can do something smarter.

> Sorry it's not more constructive

It's actually a great comment :)

-----

OmarIsmail 409 days ago | link

> That's why we still work on Firebug

To be quite frank, this is really ridiculous to me. Why in heck are there TWO separate developer tools for one browser that are both in-house? Supporting both tools means that neither one moves as quickly, and there's a ridiculous amount of confusion as to which one to use.

Imagine the noobie developer that has cut their teeth on the elegant Chrome dev tools. Now they need to do some Firefox compatibility work and the first thing that happens when looking at the documentation they see both "Firefox dev tools" and "Firebug" being referenced, each with different use cases and slightly different functionality.

I don't think any other issue is matters as much until you can solidify your efforts and officially support just one set of tools. Once you do that, then I think it's worth talking about all the other improvements that need to be made.

-----

campd 409 days ago | link

> To be quite frank, this is really ridiculous to me. Why in heck are there TWO separate developer tools for one browser that are both in-house?

I tried to clarify this in another comment: https://news.ycombinator.com/item?id=5326873 - let me know if I can clarify further.

-----

shuzchen 409 days ago | link

That still doesn't why there are two separate developer tools. Is there something that an in-house tool tied into firefox is capable of that is impossible for a plugin to achieve?

-----

robin_reala 409 days ago | link

Firebug isn't in house, it just has contributions from Mozilla employees.

-----

chr1 409 days ago | link

More than 2/3 of work on firebug is done by 1 mozilla employee, and there 2-3 other people we contribute to firebug from time to time. So it's pretty much in house.

IMO starting complete rewrite of firebug, in form of devtools, was very wrong. 2 years ago firebug was order of magnitude better than chrome devtools. Now it can't keep up with chrome. But firefox devtools only starts to become barely useful, If all that work have gone into improving firebug, Firefox would be ahead of chrome now.

-----

OmarIsmail 409 days ago | link

If Firebug isn't in house then I have no idea how a Mozilla employee could justify working on Firebug while their own "official" dev tools still has such a long way to go.

-----

fletchowns 409 days ago | link

Why do both Firebug and the built in tools exist, if you guys are committing to both? Why not just put everything behind Firebug?

One thing I don't like about the Firefox debug tools is that they are split up into different tools. Developer Toolbar, Web Console, Debugger, Error Console. Why do we need all these to be separate?

-----

vsync 409 days ago | link

> > I can't remove the unwanted built-in menu options.

> Firebug allows you to do that.

Please please tell me how to do this. I want the "Web Developer" menu gone. I want Firebug as a first-class entry in the Tools menu again. And while you're at it, it would be really nice to have "View Source" and "View Page Info" in the View menu again.

Perhaps I'm a little bitter, considering I saw the DOM Inspector ripped out of Firefox, relegated to Firebug, kicked around, and now that Firebug is awesome, I see weird versions of a Firebug subset getting in the way. Why couldn't it be part of the browser, and why not just put Firebug in the browser if you want it back in?

-----

joecorcoran 409 days ago | link

I couldn't agree with this more. I work primarily in Chrome and find it very frustrating nowadays when I have to switch to Firefox to debug. Back in the days when Firebug was the only show in town, I loved working in Firefox. Dev Tools gets in the way.

I appreciate the flashy experiments like Firefox Command Line but there's little chance of them entering into my everyday workflow unless I have the chance to learn them properly. I won't get the chance to learn them properly until I reach for Firefox as my main development browser.

On another note: The Chrome Network panel is invaluable to me and streets ahead of the Firebug Net panel. I find it hard to explain why I prefer it as the features are fairly similar, but the experience is much better. Maybe it's about the layout and clarity vs. density of information.

-----

joecorcoran 409 days ago | link

Just wanted to follow up this comment by saying that I've been playing with the latest Firefox nightly this morning and it's much more inline with what I want out of a browser's inbuilt dev environment. I'm really impressed.

Two things that still stand out as lacking when compared to Chrome are the JS console output and the Net panel output (really hate those popup windows).

But these things can be ironed out. Well done for getting Firefox moving in the right direction.

-----

steffoz 409 days ago | link

Couldn't agree more on this.

-----

Su-Shee 409 days ago | link

My needs exactly.

-----

criley 409 days ago | link

Firebug has a "disable built in tools" feature that prevents Inspector from loading already.

-----

cllns 409 days ago | link

Btw this is done by opening about:config and setting devtools.inspector.enabled to false

-----

darkstalker 409 days ago | link

Firebug key is "extensions.firebug.hideDefaultInspector"

-----

grayrest 409 days ago | link

Webkit dev tools timeline in frame mode is bar none the most useful tool for tracking down performance issues. Looks like it's on your roadmap but it's far, far more useful in tracking down actual perf issues in large codebases than any other tool in any developer tools toolbox because it's cross-cutting and bottlenecks tend to be a combination of factors and the frame-sizing lets you find what's on the critical path when it's on the critical path. I use it 10 times for every one use of all other perf profiling tools (I consider network/pageload to be a different set of problems).

I don't see it on the roadmap but the firefox console is SO terrible at printing objects. In most apps I work on I'm shipping around 2kB+ JSON objects and the current console is absolutely worthless for these.

Related, but I think there's room for improvement in object printing in general. I find myself not really caring about most fields in an object but I'd like a couple fields printed inline before expansion. I like that the firebug console prints a few fields with the option to expand objects but would like to have control over which fields those are. FWIW, my preferred pretty printer is node's.

I find CSS errors/warnings to be absolutely useless in both the firefox dev tools and opera's. Pretty much any modern site is using vendor prefixes and the result is hundreds or thousands of errors which makes the console fall over.

Due to the above, I've been taking the approach of trying dev tools out again every time Aurora updates and then going back to using firebug and chromium after 15 minutes or so. I completely missed the jsterm addon despite following you on a couple channels. It looks reasonable so I'll be giving it a go today.

When you're doing your network cascade panel, please set it up to load HAR files. You can get HARs from a variety of sources but there isn't (yet) a convenient way to view them locally.

For the debugger, I don't know of an equivalent of webkit's source view cmd+o / cmd+shift+o, which are extremely useful. The cmd+p filtering is decent but most of the time I do actually know what file and function I'm looking for. I also use the reformat button and break on caught/uncaught exceptions on a regular basis. Actually, now that I think about it, I use every single function except for the editing functionality on the chromium sources panel at least once a week.

For the style editor, the side list of stylesheets isn't mousewheel scrollable on my machine (I'm on Aurora).

I find dock right to be the most useful attached view for chrome tools. Screens (and particularly laptop screens) are wider than they are tall and dock right takes advantage of that.

Edit: For a larger feature, I would very much like the ability to edit code when the browser hits an exception and then continue execution using the new code. I've only seen this in smalltalk demos so I assume it's difficult but being able to flip a variable to tweak an if statement when stepping through the debugger saves the effort of getting back into the correct state from pageload.

-----

ptgloden 409 days ago | link

Agreed on the console not displaying objects well. I find that to be especially true with DOM nodes.

FF:

  >>> document.getElementsByTagName('div')
  (pocs:({}), pocs0:({}), pocs1:({}), pocs2:({}), cst:({}), mngb:({}), ... )
Firebug:

  >>> document.getElementsByTagName('div')
  HTMLCollection[div#pocs, div#pocs0, div#pocs1, div#pocs2, div#cst, div#mngb, ... ]
Chromium:

  >>> document.getElementsByTagName('div')
  [<div id=​"pocs" style=​"display:​ none;​ position:​ absolute;​">​…​</div>​, 
  <div id=​"pocs0">​…​</div>​, 
  <div id=​"pocs1">​…​</div>​, 
  <div id=​"pocs2">​Press Enter to search.​</div>​,
  <div id=​"cst" style=​"display:​none">​</div>​, 
  <div id=​"mngb">​…​</div>, ... ]

(edit: formatting)

-----

ianb 409 days ago | link

I think a general pattern is that the console should be smarter about the specific stuff people do in a console, in the browser. Every kind of DOM node should have specific representations appropriate for that DOM node, not just what falls out of some generic printer. There are array-like objects that get printed out funnily because they aren't real arrays – but {0: x, 1: y} is no more clear about the actual nature of the object than [x, y].

Why people won't code vendor prefixes into CSS tools I don't know; the obvious thing is for Firefox to ignore everything but "-moz-*" – and even then, to warn selectively (i.e., if there are old versions of Firefox that require a prefix, even if the new version doesn't, don't warn about it). Or hell, crowdsource the whole thing, when you encounter something invalid fall back on a community edited document about what is valid in other browsers, or represents a common and acceptable CSS hack. There's often good information in the CSS warnings, but there's too much useless information to find it. I'm annoyed things like LESS and SASS don't treat vendor prefixes specially either.

-----

sisk 409 days ago | link

Hey Paul. First off, thanks for reaching out to the community like this.

A few things:

Visualized event bindings. Would be awesome to have a visual indicator of event bindings right on the page. Color-coded bounding boxes drawn around elements with a label denoting the event type. Clicking on that box (or label in the case of an element with multiple bindings or nested elements with bindings) would direct you to the code that does the binding.

An aggregate repaint view. Chrome lets me view repaints but it clears after every one. If I have a method that is doing a lot of dom manipulation, I have to step through the code to view all of the repaints. Would be great to have the repaint bounding boxes drawn with a low opacity background so that I could see (and clear out) an aggregate view (with highly redrawn areas having higher opacity due to there being multiple layers).

An intelligent debugger that would automatically step over certain files (selectable per debugging session). I occasionally want to step into jQuery but less often than not. I know I can step over those methods but would be great if I could just keep stepping in without accidentally stepping into something when I don't want to.

I'll edit this as I think of more.

EDIT:

Breaking on navigation or on a particular request in order to manipulate headers. Breaking on the response from those requests for the same reason (plus manipulating the body).

The timeline and profiles sections in Chrome are under-utilized but infinitely useful. Anything close to those would be much appreciated.

Throw warnings for potentially orphaned event listeners. Granted, the number one offender recently introduced methods to address this (backbone's #stopListening) but it's still a easy mistake to make. This might bleed into too much hand-holding and open up a can of worms but just a thought.

Throw warnings for overloaded event listeners that fire a lot. Like the last suggestion, this may be heading in a direction you don't want to go in (educating the developer by means of the dev console) but, all too often, I find pages that overload, e.g., the scroll event. If there was some way to inform the developer of this potential problem, I think the web at large would greatly benefit. Perhaps this and the last suggestion would better reside in an auditing section?

-----

theallan 409 days ago | link

> Visualized event bindings. Would be awesome to have a visual indicator of event bindings right on the page. Color-coded bounding boxes drawn around elements with a label denoting the event type.

A bit of shameless self promotion - I wrote a bookmarklet to do that asking talking to a couple of Mozilla folks a few years back: http://sprymedia.co.uk/article/Visual+Event+2 . Source is available on GitHub: https://github.com/DataTables/VisualEvent .

The biggest problem I faced with this is that there is no DOM method to get a list of the events that have been bound to a node. Possibly a Firefox plug-in would have the ability to access that information, but it can't be done through the DOM at the moment, so I had to resort to parsing the information available from the libraries, each needing its own integration file...

-----

eric_bullington 409 days ago | link

Thanks so much for the plugin -- I use it frequently. It's the one bookmarklet I actually use enough to keep on my bookmarks bar.

-----

sangnoir 409 days ago | link

Thanks for the awesome tool! I've found it handy on more than one occasion to trace jQuery/vanilla JS listeners. Any plans for Dojo support?

-----

theallan 409 days ago | link

Hadn't been planning it, but it sounds like a very sensible idea! Added an issue in GitHub which you can follow if you like: https://github.com/DataTables/VisualEvent/issues/26

-----

paulrouget 409 days ago | link

> Visualized event bindings

Yeah, we've been thinking a lot about that lately. Not a priority though (yet?).

> An aggregate repaint view

I filed a platform bug just about that today :) I think it can be done soon.

> An intelligent debugger that would automatically step over certain files

That's interesting. I never thought about this. I like that.

-----

campd 409 days ago | link

> > An intelligent debugger that would automatically step over certain files

> That's interesting. I never thought about this. I like that.

You haven't been reading your mail, paul!

We discussed this briefly in https://groups.google.com/d/topic/mozilla.dev.developer-tool... and are planning to work it in to our schedule.

-----

padenot 409 days ago | link

Regarding repaint view, go to about:config, nglayout.debug.paint_flashing to true, and you can catch some repaint problem. Agreed, it is not the most discoverable feature. afaik, we don't have a tool for overdrawing. Hopefully this will change.

-----

gee_totes 409 days ago | link

Last time I used the Firequery plugin for Firebug (way back in FF3), it would show the elements on the page that were also represented as jQuery objects... that plugin might be a jumping-off point for how to show visualized event bindings

-----

More



Lists | RSS | Bookmarklet | Guidelines | FAQ | DMCA | News News | Feature Requests | Bugs | Y Combinator | Apply | Library

Search: