
Future of Firefox DevTools - paulrouget
http://paulrouget.com/e/devtoolsnext/
======
h2s
The right-hand-side docking looks absolutely amazing
(<http://i.imgur.com/duQOXq7.png>).

I have another bit of feedback. The web console has three positions available:
Above, Below, and Window. With Firebug, I like to have the console open in
another monitor and give the browser viewport maximum screen real estate in
front of me. Firefox's web console doesn't let me do this because in "Window"
mode it doesn't quite act the same as a fully-fledged window. For example, I
can't maximise it and it doesn't have the full complement of normal controls
in its window bar. <http://i.imgur.com/V7eWC1m.png>

~~~
woobar
While right-side docking is great, especially for widescreen monitors,
separate window for devtools would be much better improvement. In this case
anyone can 'dock' them any way they like it. More important, you can have dev
tools on one screen and page view on another.

~~~
paulrouget
> separate window for devtools would be much better improvement

Fixed in Firefox 20

------
stephen
A wire-protocol for debugging/live reload/etc. would be awesome, but
_especially if it's cross-browser_! As an IDE developer, I shouldn't have to
do one thing for Chrome, and one thing for FF, just to support the same
operations (like set debug point, step in, step out, etc.).

Obviously, yes, they'll be a different set of features at first, but for the
overlapping ones, the wire protocol should be the same.

Just look at how painful things were for Selenium/Webdriver; which I now see
is moving into the W3C. Hopefully that makes their lives (and our lives as
developers) easier if the browsers share a protocol.

(Cross-posted on the blog...how degenerate...)

------
quaunaut
At the moment, I really like Chrome because I just find the behavior of the
Omnibar superior to Firefox's Awesomebar.

But hot damn, you're making me question loyalties on my dev machine.

~~~
sergiotapia
Haha, I just switched from Chrome to Firefox because I hate how Chrome
prioritizes Google Search over my previous history. It's idiotic.

Here, let me show you a clear example.

<http://i.imgur.com/uNsh7Yv.png>

Firefox clearly has the superior bar.

~~~
quaunaut
I've personally internalized the downdown for going to things I've gone to
before.

However, I do brand new searches _constantly_. Often 20+ a day, that often
look similar to older searches, but aren't quite.

Now, whether I've developed that behavior because of Chrome, or because it
works well for me, is a question for itself.

Also, since I'm here- anyone get frequent fuckups lately in the Chrome
omnibar, not searching what you put in, to instead search something you HAVE
searched before?

For example, before, I've searched "javascript array"

But this time, I am wanting to search "javascript string concatenation". I
type that into Chrome, hit enter...

...up pops the search results for "javascript array". It started about a month
ago, and is really annoying.

~~~
kyrra
(this is on a Mac)

In Firefox, the hotkey "cmd-K" will put focus into the search bar at the top.

In Chrome they don't have a keybind set to this by default (though on Windows
they seem to). But if you open mac System Preferences, go to Keyboard, then
Keyboard Shortcuts, and add an Application Shortcut for Chrome, you set the
menu item name to "Search the Web..." and the keybind to whatever you want (I
used "cmd-K").

So that way regardless if I'm in Firefox or chrome, pressing cmd-K will put me
in a place I can search.

~~~
theevocater
also, cmd-l (go to the awesomebar) and start with a ? to always search.

you can also have different engines

    
    
        ?cat 
    

will search your default engine for cat

i have one for ddg so

    
    
        ddg cat
    

searches duck duck go for cat etc. its fantastic

------
gbadman
How about opening up a browser-based API for existing in-browser IDE-like
environments to leverage the debugging tools that are already present?

What I am talking about is instead of recreating jsFiddle in the dev tools,
how about letting jsFiddle (with appropriate user confirmation) control the
dev tools?

As the creator of Plunker (<http://beta.plnkr.co/edit/e5iLyQ?p=preview>), I
would love to be able to leverage the environment that has already been
created to allow adding breakpoints and inspecting of running code. Since
Plunker already has live-previewing and a working multi-file editing
interface, it would be really amazing to be able to take it to the next level.

Shameless plug: If you've never heard of Plunker, check it out. For free you
get live-reload of previews, transparent compilation (and sourcemapping) of
stuff like Coffee-Script, Typescript, Stylus, etc.., real-time collaboration
on the same code, live js/css linting and much more! Also, it is open-source
(<http://github.com/filearts/>).

~~~
paulrouget
Isn't the first paragraph exactly about that?

~~~
gbadman
Hi Paul,

What I understood from your article is that you're mostly exploring 1) the
possibility of opening up the dev tools to locally-installed applications like
SublimeText2; and 2) the integration of jsFiddle-like apps within DevTools.

Please correct me if I misunderstood.

What I'm asking about is creating an in-browser API for a website to interact
with the dev tools. Obviously, this would require a very thorough review of
the risks of having such an API from a security perspective (and how users can
opt-in in a transparent and well-controlled manner). That being said, I am
still hoping!

If this is already in the books, then Hooray! I can't wait to start
experimenting.

I hope I didn't come across poorly, because I really appreciate all the work
you've been doing!

~~~
gbadman
Paul, very cool indeed.

Stretch goal: How about having an in-browser API that could create such a
websocket?

That would open some interesting possibilities in terms of remote debugging by
piping socket traffic over another socket/WebRTC datachannel as well as
allowing websites to interact with the debugger.

~~~
past
Allowing websites to interact with the Debugger API is something we would like
to do, but, as you note, the security implications require much more thought
to get it right.

------
IgorPartola
One small thing that I haven't seen yet (in FF or Chrome) is a feature where I
could get the IP address that was used to retrieve a given resource in the
network tab. This would be hugely helpful when dealing with sites that are
backed by more than one server. Also, ability to reset DNS cache (BTW, DNS
cache seems to be shared between private and regular browsing modes).

<edit>The ability to lock onto a specific IP for a given domain would be
pretty kick-ass too. Not a replacement for /etc/hosts, but just choosing one
of the 2 IP's for example.com, etc.</edit>

Another nice feature would be to get the network tab to ignore resources
loaded from external domains, only show external resources, or show both.
Maybe even more fine grained with/without subdomains.

~~~
caipre
In Firebug this is shown in the 'Remote IP' column under the 'Net' tab. I
don't use FF or Chrome dev tools often enough to know if/where they have it.

~~~
IgorPartola
Ah, you are right. Such a useful feature!

------
risratorn
Really nice you are listening and responding to the community this well, that
said the progress made during hack week is impressive but we'll have to see
how fast and stable these suggestions leak through to nightlies and stable
release.

Keep up the stellar work, firefox is gaining momentum again, make good use of
it :)

~~~
paulrouget
You're right. That's the next challenge: delivering. It will take time.

~~~
MoOmer
Right on, you and your teams' attitudes are encouraging!

------
johnmw
What a stellar response to feedback. Thank you Mozilla. I'm currently a big
Chrome Dev Tools fan, but I, er, am currently thinking of that beautiful girl
I ditched again, if you know what I mean...

------
gotoY
I still don't get it way mozilla made it's own devtools, instead of
integrating and extending on firebug. Had the devs of mozilla and the one of
firebug diffs, which couldn't be solved?

~~~
bzbarsky
At the time, yes.

In particular, there were somewhat irreconcilable differences in goals and
priorities...

------
mikek
The #1 thing the Firefox DevTools group should be doing is integrating Firebug
into Firefox. Right now they have the same team maintaining two codebases.
That seems like a significant waste of time.

~~~
Aardwolf
I kind of disagree, I would rather see Firefox DevTools not be Firebug.
Firebug is not that great (compared to Chrome's debug tools) due to its UI. It
looks like Firefox DevTools is at least going for a much better UI, so being
constrained by Firebug would be a loss.

~~~
diminish
I still prefer Firebug, instead of Chrome dev tools. What are the reasons
which make you think, it is not great?

~~~
Aardwolf
Firebug:

-is slower

-has more glitches (things doing plain weird or not working sometimes)

-requires "activation" of each panel and reloading of the page

-sometimes suddenly opens for no reason when you visit a webpage without the intention to debug it

-is impossible to use if you want to debug a project with hundreds of js files (e.g. uncompiled JS of a large project) because it has a bad type of dropdown for selecting the JS file

-generally just requires more clicks and more frustration to get things done

The one in Chrome:

-is faster

-has a better console (easier to type commands, inspect variables, etc...)

-works immediately as soon as you open it (no "this panel was inactive during page load")

-has more features

Note that I was talking about Firebug here. Firefox also has its own dev
tools, at least an "Inspect Element", with even a 3D view of a page allowing
to see divs outside of it and so on, and that one is awesome!

I'm curious from your side (maybe also to learn a thing or two about Firebug):
How would you compare it to Chrome? What features make Firebug stand out?

Thanks.

EDIT: Why do I need to add multiple newlines between the "-" to make Hacker
News post them as newlines?

~~~
Mahn
This is unfortunately true, and that's why it's exciting to see Mozilla do
something about it. As it stands right now, Chrome is the better tool, and if
you prefer Firebug to it chances are you haven't tried Chrome for long enough.

------
kmfrk
Previous thread: <https://news.ycombinator.com/item?id=5325445>.

------
Mahn
Very, very nice. I'll happily end up switching back to Firefox again if you
can keep up the pace. Keep us posted mozilla.

------
xtreme
This is great, thank you Mozilla for your hard work.

I am looking forward to ditching firebug and use the native tools.

------
bargl
I've recently changed back over to Mozilla, this just proves that it was the
correct decision.

~~~
SG-
I'm not quite sure if a mockup proves anything, unless you mean the part about
them asking the community.

~~~
bargl
I think it is proof of quite a few things.

It proves that they are developing functionality that I've been looking for
and some I didn't even know I wanted.

It is evidence that they want to be a great tool for developers and that they
recognize their tool needs work.

It proves that I made the right decision (completely subjective which is the
nature of a comment like the one I made) in moving away from Google for a more
user centered and open-source browser.

And yes it proves that they listen to their users.

All of that is assuming they weren't lying or creating fake mockups (which I
feel is a safe bet). Sure that's not a lot of proof for a scientific theory,
but for a decision on which browser I want to use and which company I want to
support I think it's proof enough :-)

------
kibwen
Excellent, the network timeline is one of the features that has kept me on
Firebug. The editor integration looks quite intriguing as well. Wonderfully
rapid response, Paul! I may no longer have an excuse not to use the built-in
dev tools. :)

------
purephase
While the number 1 suggestion sounds great on paper, isn't anyone else
concerned about the security implications?

The ability for the browser to modify files directly on my workstation outside
of caching folders sounds like a recipe for disaster.

~~~
nsmartt
He had to click accept connection before it allowed him to edit the CSS.

~~~
purephase
Which, as we know, is a rock-solid protection mechanism against these types of
exploits. Everyone reads modal messages.

~~~
past
In order to get to that modal message, you first have to go and enable remote
debugging, which is not something normal people would do. And in general, even
though we can (and already have) come up with even more mitigations for the
potential threat, the sad truth is that security and usability are
fundamentally a tradeoff, so you have to strike a balance at some point.

~~~
purephase
And, I understand that. But, the drawbacks of the security implications of
your development/developer browsers being thus weakened is, IMO, a decision
heavily weighted in favour _against_ this feature.

Personally, I would love it. It would make my life easier to have a full IDE
within a browser. However, I would never be comfortable with the security
tradeoff and would never enable it.

------
nzonbi
This is looking fantastic.

Some suggestions:

\- Allow to use a dark theme on all panels. I remember that for a short time,
aurora had the dark themes on the html, css panels. It was great, but then it
was reverted to the white background. It would be cool if there were a setting
to choose the dark color theme. I loved it.

\- Add something like firepath. A firebug extension, that adds a panel to test
CSS/sizzle (jquery) selectors, and highlights the selected nodes. This is an
extremely useful extension for me. If enough people agree, it would be good to
have it integrated in the developer tools by default.

~~~
paulrouget
> \- Allow to use a dark theme on all panels.

I'm working on that. Screenshot:
[https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719...](https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719063)

~~~
NuZZ
Brilliant. A friend and I were just talking about how cumbersome it's to work
on a dark themed website using Firebug due to the default burn-your-eyes
bright contrast bleeding into the site.

Keep it up, can't wait to ditch Firebug.

------
lucb1e
I was impressed by their question, and now even more so by incredibly quick
results! I switched back to Firefox a few days ago (from Chrome) and this
really solidifies my decision.

------
sergiotapia
Thank you for opening up to this community. For better or worse, I feel the HN
crowd has it's head together and will always give good feedback on products.

------
polskibus
Excellent, please don't forget about Windows users :) Apple's OS is not the
only one with web developers (ie. Sublime as an example) !

~~~
gneustaetter
Sublime is available on Windows, Linux, and Mac...

~~~
evolve2k
Why is the above comment downvoted? Totally relevant in addressing what the
comment above it said.

~~~
MatthewPhillips
Because the OP was pointing to Sublime as an example of a tool that is
available, and popular, cross-platform.

~~~
publicfig
If that were the case, then the OP would have no argument because that's the
only external tool being shown right now.

~~~
evolve2k
On re-reading, I've now realized polskibus was referring to sublime as a tool
which IS available cross platform.

Like the downvoted comment I too initially read it as that he thought it WAS
NOT cross platform based on thee here he postitioned his example near his
Apple comment and hence why the 'sublime is available cross platform' comment
made good sense to me.

------
leeoniya
Are there any plans to implement an instrumenting profiler in addition to the
existing one? Not having call count is a huge minus for me. Devtools has a
sampling profiler like Chrome (which also doesnt provide call counts). So the
only instrumenting profilers remaining for JS on Windows are Firebug and an
outdated, abandoned version of Safari :(

~~~
past
The profiler has a stackwalking mode that provides more accurate info:

[https://developer.mozilla.org/en-
US/docs/Performance/Profili...](https://developer.mozilla.org/en-
US/docs/Performance/Profiling_with_the_Built-
in_Profiler#Stackwalking_vs._pseudostack)

You would need to use a nightly release to get that though, and only on the
platforms that are currently supported.

------
andyhmltn
Wow. I haven't had a chance to read the article yet, but the video where they
are editing live in sublime text is awesome. Does this have to open in a new
file or can it override an existing file?

It'd be really cool to be able to do the latter. I usually make changes in
chrome dev tools and then copy the results into the relevant CSS file.

~~~
paulrouget
It opens a new buffer, than can be saved as an existing file.

~~~
mbesto
Give me this now.

(ps - awesome work and communication!)

~~~
brycedriesenga
You might be interested in checking out Brackets (<http://brackets.io/>) which
has some live development capabilities for CSS at least right now. I believe
it only works with Chrome though, currently.

------
existentialmutt
Very excited to see the network panel, as that is what makes me go back to
Chrome or Firebug most often.

In the network panel, being able to sorting/filter requests by content-type,
request verb, and response code makes it much more usable for me. I didn't see
that in the video-- do you plan to include it?

~~~
past
Sorting and filtering are planned, yes.

------
edwinyzh
"Coding/authoring in the browser" - this is EXACTLY the idea of LIVEditor, my
code editor project which was started before Bret Victor's talk, the
announcing of Light Table and Brackets.

But it's not out yet, because it's only me working on it...

URL: <http://liveditor.com>

------
DrinkWater
Damn! i am impressed. Good job, Mozilla!

------
bmuon
Making Firebug into an extension that works inside the Firefox dev tools (the
same way Firebug plugins can add tabs) sounds like the best way to move
forward both Firefox and Firebug.

~~~
ricardobeat
Why? I say leave Firebug alone, or just kill it already? We don't need two
inspectors.

~~~
past
Mozilla can't kill Firebug, even if they wanted, since it's a separate open
source project and community. And the only people with two inspectors would be
those that elected to have them both, by installing Firebug and using both
tools.

------
mzarate06
I was one of those that requested a way to profile repaints. Thank you for
adding the aggregate repaint view. The video showing the margin-left vs.
transform repaints is exactly the kind of thing developers can take advantage
of.

Question: does the aggregate repaint view indicate what caused the repaint?
Determining that isn't always as easy or obvious as the margin-left vs.
transform example in the video, so it'd be a huge benefit if that was
included.

Thank you for listening!

------
anonfunction
It's amazing how much I respect Mozilla as an organization.

First, they revolutionized browsers when none of the big players wanted to.
Then they promoted open standards. And as of lately they have been championing
developers with tools to succeed.

This post confirms that they are actively engaging and working with their
community to build a better product. What if we all did that? Lets replace
"brainstorming" with "brainsourcing".

~~~
zobzu
Mozilla does encourage community to give their ideas. There a zillion projects
going on at Mozilla that would die for some constructive thinking help,
although not all get the same attention.

That's also while I like organizations. No matter how people go at Mozilla
saying they don't listen.. it's not quite true. Decisions will never satisfy
absolutely everybody, but they listen and ask for tips quite a lot.

~~~
tmzt
Of course you never know which one will become the next Firefox. (In the sense
of headline product.)

------
mmuro
The jsfiddle style looks good, but how does that work with multiple files on
the page? Do you select the files you want to work with?

Not sure if it's possible, but I think it'd be cool to highlight which lines
have been live edited.

One bit of feedback about editing CSS: it'd be great if, when editing a
property, using the arrow keys cycled through the default properties. I.e.
border-style goes through solid, dotted, none, etc.

Looking great!

------
druska
I would like to see more standardized keyboard shortcuts. F12 is generally
used to open the dev tools in most browsers (including opening FireBug).
Another shortcut I'd like to see is Ctr+G to goto line in the scripts
debugger.

I'd also like to see an improvement of the default source in the debugger
pane. Guessing the proper script on the page that needs debugging can be a
huge time saver.

------
boundlessdreamz
The timeline needs to show protocol. Btw this already exists in Firebug. Why
duplicate effort? I'm sure this hass been asked before. But why have devtools
instead of improving firebug? (Performance?) What will happen to firebug in
the long run ?

Edit:

* In inspect view, can we have a search HTML function like firebug?

* Also in inspect view, a way to disable the display of PATH.

* Increase the font size of html/css rules etc

~~~
past
The inspector has a search box in Firefox 21 and above.

------
sisk
Adding nothing to this conversation but this is awesome. What an amazing
response.

Humblebrag: Psyched to see two out of three of my main points addressed. I'm
impressed. Meat Loaf* would be, too.

* - <http://en.wikipedia.org/wiki/Two_Out_of_Three_Aint_Bad>

~~~
paulrouget
Thanks for the initial feedback :)

------
rhdoenges
Poking around the wiki I noticed that work is beginning on GCLI, a gui command
line. I'm not sure how it's going to get integrated into FF yet (I saw mention
of an mdn command, though).

I love the demo: <https://people.mozilla.com/~jwalker/gcli/>

~~~
mnemonik
Shift-F2

~~~
johnath
Yeah, get thee to a recent release or pre-release and tell us what you think.

------
visarga
The main problem for me is the narrow format of the dev tools. I can't see the
web page well and I can't see the debugger well.

Docking to the right side is also bad, because it reduces my width and makes
the page display badly.

I fondly remember the debugger I used to have in Borland Pascal 7 under MSDOS.
Concise and efficient.

~~~
past
You can detach the developer tools window and put it anywhere you like.

------
ricardobeat
Sublime Web Inspector already got that first one figured out for javascript:
<http://sokolovstas.github.com/SublimeWebInspector/>

------
mcepl
And one more for the Chrome "Resources" tab. I am now trying to develop FFOS
app with IndexedDB and not being able to see the content of the database makes
me run to Chrome all the time.

------
nsmartt
I'm loving all of this. With these improvements, I have only one complaint.
The tab bar is beautiful on Windows and OS X, but it's awful on Linux. Tabs
should be the same on each OS.

~~~
nsmartt
I can't edit my post, but I just saw <http://paulrouget.com/e/australis-ux/>.
I'm beyond excited for this.

------
cromwellian
+1 for sourcemap support.

------
hipsters_unite
This is awesome. Was thinking the last few days that I wanted to switch back
to FF from Chrome but that the dev tools were the only thing keeping me
around. Nice work!

------
ksec
Not that i hate these tools, but how much would this bloat up the browser? ( I
am guessing they are less then a few MBs on installation size or download
size? )

------
AaronMT
All I want is a build-in user-agent over-ride option in the web or dev
console. Let me specify pre-bundled popular UA's in drop-drown or custom UA
string.

~~~
mikeratcliffe
You mean like [https://addons.mozilla.org/en-US/firefox/addon/user-agent-
sw...](https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/) ?

------
salvadornav
ship this and I'll bury Chrome! (Well, Chromium)

~~~
lucb1e
Was this a reference to RA2's taunt _"We will bury them!"_?

~~~
likeclockwork
Which itself must be a reference to Nikita Khrushchev's famous outburst[1].

1: <http://en.wikipedia.org/wiki/We_will_bury_you>

------
sparx
Firefox with firebug was my first tool for web development. Now this makes me
considering switching back to FF now.

------
joubert
"Control browser from Editor" > "Edit in the Browser".

Think about it - everyone prefers a different editor.

~~~
Optimizer
That is why the decision has not been made yet, they are discussing. Every
user has different preferences, and maybe you will get to have both the
options :)

------
ericb
I am excited to see that visualizing event bindings is on the list. That would
be awesome!

------
nefasti
Welcome back to my heart Firefox.

------
path411
As someone who's loving TypeScript, is it a possibility we will see that
supported too?

------
jwarkentin
What I want to see is the ability to inspect websocket traffic like Chrome
has.

------
tn13
This does seem brilliant. Well done Foxers!

------
vpasquier
Nice one

------
alcuadrado
paulrouget FTW!

------
czzarr
How many devs actually use Firefox's dev tools? I see all of that praise
"looks awesome, looks amazing, etc" But do people really use those amazing
things? I just find the Chrome dev tools orders of magnitude more usable than
Firefox's. It's mostly a large amount of what you could call details but it
makes all the difference. It all flows better, reduces the amount of thinking
you have to do as well as the number of clicks and keypresses. I think Mozilla
should start by fixing all of these little problems before jumping into huge
stuff like they seem to like to do with the cli, python library etc.

~~~
czzarr
why I am getting downvoted? because I'm not agreeing with the flock? I
provided constructive feedback

~~~
callahad
I'm not sure. On topic, could you enumerate some of the specific areas where
the Chrome tools "flow" better? I've pretty exclusively been a Fx dev. tool
user for the past few months, so I'm personally not sure how things are on
that side these days.

------
rlx0x
I find the responses here really strange, has anyone here actually used the
devtools in pratice? The firefox devtools seem to me just a awful waste of
time from the beginning, they are years behind the competition and the
development progress is so slow that I've given up on them. I'm using firefox
as my main browser but for web development (dom/css inspection, javascript
debugging) there is currently nothing that beats the chrome devtools.

~~~
st3fan
Can you explain why nothing beats the chrome dev tools?

~~~
czzarr
It's hard to pinpoint one thing. They're just much more usable and don't make
you fight against it. It just gets out of your way. That's great UX design
right there. Just measure the amount of key strokes, clicks, time and overall
actions needed to do one thing in Chrome and the same in Firefox. You'll be
amazed.

~~~
endemic
Pretty subjective statements. Maybe you're just more familiar with the Chrome
tools UI?

