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

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.

Honestly I would like to see firefox become more like google chrome in the fact that theres less of the browser and more of the page that takes up the screen for normal browsing. Firefox would be a lot nicer actually if you guys would keep the dev tools but they don't really need their own key command to get to them as you will not really need them on each and every page you visit and a basic user may get lost if they open it by accident.

Some random suggestions:

(1) Developers do A LOT of style tweaks using the dev tools. In Chrome, this flow has gotten smoother and smoother. For example, the little of feature of having key handlers to jog numeric style properties is huge as it allows you to look at your page and not the value you are changing. Along these lines, here are some things that would go beyond what is currently offered.

- Allow me to easily get a diff of the styles that I have changed. I tweak a lot of styles and then I painfully bounce back and forth between my editor trying to make sure I have everything updated. When I forget something, it's lost. (Another angle on this would be to keep a history of the styles that were tweaked so I can get that back after refresh).

- You have the beginnings of an awesome z-index debugger with the 3d-view. Make it more interactive. I really want to see the page from the side with the z-index values somehow visible. Debugging z-index issues are a royal pain in the ass and you have a great opportunity to be awesome here.

(2) Your network level debugging needs a lot of work to even reach par with WebKit browsers. There is a great opportunity here as well. Even with the features that Chrome offers, I still resort to a debugging proxy for many tasks. Specifically, I use Charles for throttling to test timing on slow networks, replace network resources with a copy on disk (for in the field debugging), visibility into compression and a lot of cache related issues. In fact, tooling that gives visibility into caching behavior would be great. Another area lacking for browsers these days is debugging WebSocket traffic. Chrome's WebSocket visibility doesn't give me the real time visibility I need for message-style traffic.

(3) Performance visibility. I worked on the performance related tools in Chrome for a while. In fact, I landed the instrumentation that gave developers visibility into reflow/layout. I want visibility into what is going on in the browser: Reflow, compositing, parsing, HTML tokenization, image decoding, message passing queues. I want to be able to see it all.

(4) Expand Scratchpad. I basically want to be able to write a user script without ever having to install anything or open a file. Let me open the scratch pad, write some code and check "run this when example.com/ loads". I have a lot of debugging-in-the-field issues where I end up jumping through hoops to get some custom script to run at startup.

Ok, that's a quick 4 off the top of my head. Hope this helps.

Firstly, I love the new Devtools. I use Firefox as my main development browser because of it.

First, I would like to request if the rules tab on inspector pane didn't change user value or unit. We can save that for the computed value tab. For example I would like to inspect the hex color and not rgb.

Second, I miss Firebug's colored overlay of padding, margin and border on inspect mode. Chrome inspect didn't have it either.

Third, is the performance measurement pane, like in Chrome.

Lastly, maybe an additional pane to edit/manipulate request header. Right now, I had to enable it every time I need to inspect the request header, and it couldn't be manipulated.

I would love to see something akin to YSlow's Statistics tab. http://d.pr/i/QC0g

I also support the idea of not competing with Firebug, and possibly absorbing it into the Firefox project. It seems wasteful to have developer resources tied to both in parallel.

To the existing dev tools in Firefox: - The UI layout could be improved quite a bit, expanding by default and taking up less screen real estate. e.g. the CSS panel could be part of the source view, like most devtools UI. Lots of space on the right side going unused in that panel anyway. - devtools.inspector.htmlHeight needs to at least be doubled - everything under devtools.inspector. needs to default to true (I realize this is contradictory to my earlier statement about real estate - Is the 3D view really needed? Seems like this could be an add-on also. - Picky one: I would prefer the toolbar/breadcrumbs to be on the top of the panel. Makes it easier to distinguish on a page that looks similar.

I do really like the :hover :active toggles, and the markup viewer mode though. :)