9 ms·

Future of Firefox DevTools

612 points by paulrouget 14y ago

quaunaut 14y ago
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 14y ago
  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 http://i.imgur.com/uNsh7Yv.png Firefox clearly has the superior bar.
  - axelfreeman 14y ago
    You can deactive this in chrome://settings/. I did it after your post. I find it also annoying.
    - xymostech 14y ago
      What setting do you change?
      - simonz05 14y ago
        [] Use a prediction service to help complete searches and URLs typed in the address bar Maybe that one.
        georgemcbay 14y ago
        So that's why every time I start typing a reddit url, Chrome suggests I visit http://www.reddit.com/r/gone http://www.reddit.com/r/gone wild (sic, with the space in there). There are a number of reasons why they really need to rethink this, default it off, or do some better filtering. Didn't impact me personally beyond the confusion but I could imagine that URL and maybe some others coming up in what appears to be someone's unique search or browsing history raising some interesting questions at work and/or at home for some users.
    - knocknock 14y ago
      I would still like the search results to show up though. Just prioritized lower than my history.
    - nivla 14y ago
      I am surprised not a lot of people at HN do this. Disabling predictive service is one of the first things I do after installing chrome on a new machine. Something about sending every keystroke made on the omnibar to Google makes me feel uneasy, it could also be the paranoid in me talking.
  - matthuggins 14y ago
    I appreciate this feature on mobile as it can help save me some more time-consuming taps, but I don't use it on Chrome since I can type faster than I can browse through the results it's guessing at.
  - quaunaut 14y ago
    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.
    - ricardobeat 14y ago
      All the time. I'm not sure how to not activate auto-completion sometimes.
      - quaunaut 14y ago
        But this isn't auto-completion, this is just plain ignoring what I typed.
    - ajanuary 14y ago
      Is it associated with Google Instant failing? I've noticed frequently Google Instant will fail half way through searching, and it will ignore everything I typed and just go with what Instant guessed before it crapped out. If Instant is prioritizing your previous search, it may be linked.
      - quaunaut 14y ago
        This definitely could be what it is.
    - kyrra 14y ago
      (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.
  - tambourine_man 14y ago
    I like Safari's solution best. Hit space and you get recent searches. Start typing and you get suggestions.
  - deleted 14y ago
    [deleted]
  - didyousaymeow 14y ago
    Aurelio's used to have amazing pizza before the original owners sold it and it became a franchise. Don't waste your money, there's plenty of better options. Also, I agree with you regarding Chrome's Google search priorities.
    - gmrple 14y ago
      Supposedly the one in Homewood, not the origional location, but the origional town and ovens is still good. I enjoy it at least, but I grew up on it.
    - deleted 14y ago
      [deleted]
  - mikeratcliffe 14y ago
    Also, putting "* " in the awesomebar before typing searches your search string limits the results to bookmarks. Here is a list of these prefixes: Add ^ to search for matches in your browsing history. Add * to search for matches in your bookmarks. Add + to search for matches in pages you've tagged. Add % to search for matches in your currently open tabs. Add ~ to search for matches in pages you've typed. Add # to search for matches in page titles. Add @ to search for matches in web addresses (URLs).
  - urlwolf 14y ago
    You can have a pretty close approximation on chrome with this plugin (fauxbar): https://chrome.google.com/webstore/detail/fauxbar/hibkhcnpkakjniplpfblaoikiggkopka https://chrome.google.com/webstore/detail/fauxbar/hibkhcnpka... It searches your history and bookmarks too, which is what the awesome bar does.
  - samspot 14y ago
    Your comparison would be stronger if you searched for the same string in both.
    - sergiotapia 14y ago
      If anything, I've given Chrome a bigger crutch by giving it more letters to work with. And it's still worse than FF. ;)
      - samspot 14y ago
        Perhaps so, but it still seems unscientific. I even left out that an even better test would be if you had identical history in both browsers (which I know would be inconvenient to set up). I honestly do not understand why I am being downvoted.
  - zobzu 14y ago
    yeah and you can get chrome behavior in ff in the search bar, too. well except for the bug of course. The ff search bar does search for what you typed, not what you typed last. (and does shows instant results, too) best of both worlds.
  - mtgx 14y ago
    I disagree. I think most people use the bar for searches, not their bookmarks.
    - mhaymo 14y ago
      Sure, but I don't really need the bar's help to type my search term. I do need its help to search my history/bookmarks.
- nvr219 14y ago
  I prefer Firefox Awesomebar as I find that when I type something in to search my browsing history it usually returns what I was looking for.. Chrome not so much. EDIT: what sergiotapia said ^^^
- yesbabyyes 14y ago
  In my experience, Omnibar is giving me worse and worse results. sergiotapia's example mirriors my experience lately. That said, Omnibar in Incognito Mode works well, because it only searches my history (which is what I want). Edit: chrome://history is pretty cool, too.
- whichdan 14y ago
  Like sergiotapia, I'm very close to switching back to FireFox /because/ of the Awesomebar. However, for me, it's because it matches my search history better. Let's say I'm working on a page call /editor/?id=1234, in FireFox, typing 1234 will show that page as the first match, whereas Chrome doesn't even match it unless I start typing /editor/, and sometimes even the root domain. It's very frustrating.
  - epmatsw 14y ago
    HackerNews is the best example for me. In firefox, I can type in y, and it will know that I want news.ycombinator.com. In Chrome, the only way to have it autocomplete (at least the last time I tried it) was to start with n.
    - cromwellian 14y ago
      I always visit by going to hackerne.ws, so I hit H in Chrome.
- kemayo 14y ago
  There's a Firefox addon called Instantfox [1] which makes the Awesomebar behave somewhat more like the Omnibar. Possibly too much so, depending on your preferences. [1]: http://www.instantfox.net/ http://www.instantfox.net/
- deleted 14y ago
  [deleted]
- smnrchrds 14y ago
  I removed search box from Firefox few months ago and never looked back. I use search engine keywords instead[1]. My current keywords include goog, bing, amzn, crate, and wiki. Guess what search engine they refer to. :) [1] http://kb.mozillazine.org/Using_keyword_searches http://kb.mozillazine.org/Using_keyword_searches
  - shardling 14y ago
    I really, really prefer the search box. For me, searching the web and searching my history are very different intents; so activating them with different keystrokes doesn't seem like much of a burden.
    - bjustin 14y ago
      I did too, but Google instant changed things. Try this: 1) Set your search engine to Google (if it isn't currently) 2) Remove the search bar. 3) Press ctrl+k (cmd+k) and start typing. You'll be searching on Google's site, by far the best search experience with Google Instant on. The only downside is that you need a reasonably fast, low-latency connection for it to work well[1]. [1] Fine with decent Internet service, but what a downside it is on a lesser connection. The ~0.5-1 sec delay was unbearable on a 3Mbps DSL connection with average latency.
      - shardling 14y ago
        I often use the search box for of stuff other than googling. (Wikipedia, Amazon, arxiv, and a couple of specific wikis.)
    - fafner 14y ago
      You'll love this https://support.mozilla.org/en-US/kb/awesome-bar-find-your-bookmarks-history-and-tabs#w_changing-results-on-the-fly https://support.mozilla.org/en-US/kb/awesome-bar-find-your-b...
  - mcepl 14y ago
    +1 ... except that gg is a keyword for DuckDuckGo. I just couldn't switch my finger memory from gg, so I rather switched the alias ;)
- mrinterweb 14y ago
  I preferred Chrome's Omnibar to Firefox's AwesomeBar as well, but then I found this FF add-on https://addons.mozilla.org/en-US/firefox/addon/omnibar/ https://addons.mozilla.org/en-US/firefox/addon/omnibar/. One advantage I have always preferred with FireFox is that it's add-ons can have tighter integration with the browser than Chrome's extensions. In example, one such add-on that Chrome can't do is FireFox's Last-Tab add-on. It lets you switch between tabs in the order they were used. After getting used to that work flow, I have a hard time using any browser other than FF. To me, Firefox seems more extensible than Chrome.
- darkstalker 14y ago
  I like how Firefox completes the site I want with only typing 1 or 2 characters in the address bar. Also Firefox has a separate search bar that supports plugins (dictionaries, CPAN and stuff like that)
- barrkel 14y ago
  Chrome's Omnibar constantly auto-completes searches I did earlier in the day and week, so that I often have to press delete before enter. And there is no settings toggle to turn this off. (I'm not talking about the completion dropdown or what it contains, I'm talking about how the typed text in the input area has selected text appended to it when it happens to be a prefix for an earlier search.) Between this, the lack of tree style tabs, and the weird text selection algorithm, I'm generally sticking with Firefox.
DrinkWater 14y ago
Damn! i am impressed. Good job, Mozilla!
lucb1e 14y ago
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.
Mahn 14y ago
Very, very nice. I'll happily end up switching back to Firefox again if you can keep up the pace. Keep us posted mozilla.
johnmw 14y ago
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...
andyhmltn 14y ago
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 14y ago
  It opens a new buffer, than can be saved as an existing file.
  - mbesto 14y ago
    Give me this now. (ps - awesome work and communication!)
    - brycedriesenga 14y ago
      You might be interested in checking out Brackets (http://brackets.io/ http://brackets.io/) which has some live development capabilities for CSS at least right now. I believe it only works with Chrome though, currently.
polskibus 14y ago
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 14y ago
  Sublime is available on Windows, Linux, and Mac...
  - evolve2k 14y ago
    Why is the above comment downvoted? Totally relevant in addressing what the comment above it said.
    - MatthewPhillips 14y ago
      Because the OP was pointing to Sublime as an example of a tool that is available, and popular, cross-platform.
      - publicfig 14y ago
        If that were the case, then the OP would have no argument because that's the only external tool being shown right now.
        evolve2k 14y ago
        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.
- joewalker 14y ago
  Can you explain how we're doing that? I'm not aware of any of our tools that are Mac only.
risratorn 14y ago
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 14y ago
  You're right. That's the next challenge: delivering. It will take time.
  - MoOmer 14y ago
    Right on, you and your teams' attitudes are encouraging!
kibwen 14y ago
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. :)
h2s 14y ago
The right-hand-side docking looks absolutely amazing (http://i.imgur.com/duQOXq7.png 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 http://i.imgur.com/V7eWC1m.png
- paulrouget 14y ago
  Fixed in Firefox 21.
  - h2s 14y ago
    My apologies, I remember in the original post you asked us to hold off on providing feedback unless the issues were present in recent Firefox versions. On the plus side, this motivated me to switch to Firefox Aurora just now and I must say, I'm extremely impressed!
    - steveklabnik 14y ago
      I've been using Aurora for the past few weeks, and really enjoy it quite a bit. I'd been using Chrome for the past few years, but the recent shenanigans by Google was enough to motivate me to take a few more steps away...
    - codereflection 14y ago
      I've been using Aurora for the past year or so, and haven't look back much. Occasionally I'll switch back to Chrome, but that's only when something in Aurora or nightly is broken.
- untog 14y ago
  FYI, right side docking is available in Chrome. I had no idea for a very long time.
sergiotapia 14y ago
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.
bargl 14y ago
I've recently changed back over to Mozilla, this just proves that it was the correct decision.
- SG- 14y ago
  I'm not quite sure if a mockup proves anything, unless you mean the part about them asking the community.
  - bargl 14y ago
    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 :-)
xtreme 14y ago
This is great, thank you Mozilla for your hard work. I am looking forward to ditching firebug and use the native tools.
gotoY 14y ago
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 14y ago
  At the time, yes. In particular, there were somewhat irreconcilable differences in goals and priorities...
salvadornav 14y ago
ship this and I'll bury Chrome! (Well, Chromium)
- lucb1e 14y ago
  Was this a reference to RA2's taunt "We will bury them!"?
  - likeclockwork 14y ago
    Which itself must be a reference to Nikita Khrushchev's famous outburst[1]. 1: http://en.wikipedia.org/wiki/We_will_bury_you http://en.wikipedia.org/wiki/We_will_bury_you
kmfrk 14y ago
Previous thread: https://news.ycombinator.com/item?id=5325445 https://news.ycombinator.com/item?id=5325445.
IgorPartola 14y ago
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 14y ago
  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 14y ago
    Ah, you are right. Such a useful feature!
rlx0x 14y ago
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.
- quaunaut 14y ago
  > there is currently nothing that beats the chrome devtools. That's the point of this post. It's that pretty soon, Firefox is going to have much improved devtools. They include some features that interest us greatly.
- czzarr 14y ago
  totally agree with you. FF is really good at making people WOW but I'd really like to see usage numbers.
- st3fan 14y ago
  Can you explain why nothing beats the chrome dev tools?
  - czzarr 14y ago
    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.
    - FuzzyDunlop 14y ago
      I would hope or presume that Firefox's tools eventually do get this level of polish, though. Chrome (and even Safari) has had quite a bit of a head-start, and neither of those were shining examples of great UX at the beginning.
    - 14y ago
czzarr 14y ago
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.
- paulrouget 14y ago
  We do both at the same times: adding tools and improving existing ones.
- czzarr 14y ago
  why I am getting downvoted? because I'm not agreeing with the flock? I provided constructive feedback
  - callahad 14y ago
    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.
  - mcrittenden 14y ago
    Your feedback want constructive, it was vague and lacked any specific details mozilla could use to improve.
sisk 14y ago
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 http://en.wikipedia.org/wiki/Two_Out_of_Three_Aint_Bad
- paulrouget 14y ago
  Thanks for the initial feedback :)
leeoniya 14y ago
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 14y ago
  The profiler has a stackwalking mode that provides more accurate info: https://developer.mozilla.org/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler#Stackwalking_vs._pseudostack https://developer.mozilla.org/en-US/docs/Performance/Profili... You would need to use a nightly release to get that though, and only on the platforms that are currently supported.
boundlessdreamz 14y ago
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 14y ago
  The inspector has a search box in Firefox 21 and above.
nefasti 14y ago
Welcome back to my heart Firefox.
mmuro 14y ago
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!
purephase 14y ago
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 14y ago
  He had to click accept connection before it allowed him to edit the CSS.
  - purephase 14y ago
    Which, as we know, is a rock-solid protection mechanism against these types of exploits. Everyone reads modal messages.
    - nsmartt 14y ago
      Fair enough. +1
    - Bockit 14y ago
      Maybe turning on some kind of dev mode to enable the feature, and then keep the modals as well.
    - past 14y ago
      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 14y ago
        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.
joubert 14y ago
"Control browser from Editor" > "Edit in the Browser". Think about it - everyone prefers a different editor.
- Optimizer 14y ago
  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 :)
hipsters_unite 14y ago
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!
nzonbi 14y ago
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 14y ago
  > - Allow to use a dark theme on all panels. I'm working on that. Screenshot: https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719063 https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719...
  - NuZZ 14y ago
    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.
ericb 14y ago
I am excited to see that visualizing event bindings is on the list. That would be awesome!
bmuon 14y ago
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 14y ago
  Why? I say leave Firebug alone, or just kill it already? We don't need two inspectors.
  - past 14y ago
    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.
ricardobeat 14y ago
Sublime Web Inspector already got that first one figured out for javascript: http://sokolovstas.github.com/SublimeWebInspector/ http://sokolovstas.github.com/SublimeWebInspector/
gbadman 14y ago
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 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/ http://github.com/filearts/).
- paulrouget 14y ago
  Isn't the first paragraph exactly about that?
  - gbadman 14y ago
    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!
    - paulrouget 14y ago
      So - Firefox exposes a tcp-based protocol (not enabled by default. The user will need to go to a special tool to start the server). It will expose feature like adding break points, exploring the DOM and the CSS rules, and editing content (CSS/HTML/JS). So external tools can connect to Firefox. But this protocol is not accessible from a page. But we could imagine using a websocket instead of a normal tcp socket, and let the web page connect to ws://localhost.
existentialmutt 14y ago
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 14y ago
  Sorting and filtering are planned, yes.
edwinyzh 14y ago
"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 http://liveditor.com
mikek 14y ago
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 14y ago
  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 14y ago
    I still prefer Firebug, instead of Chrome dev tools. What are the reasons which make you think, it is not great?
    - Aardwolf 14y ago
      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?
nsmartt 14y ago
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 14y ago
  I can't edit my post, but I just saw http://paulrouget.com/e/australis-ux/ http://paulrouget.com/e/australis-ux/. I'm beyond excited for this.
AaronMT 14y ago
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 14y ago
  You mean like https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ https://addons.mozilla.org/en-US/firefox/addon/user-agent-sw... ?
stephen 14y ago
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...)
rhdoenges 14y ago
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/ https://people.mozilla.com/~jwalker/gcli/
- mnemonik 14y ago
  Shift-F2
  - johnath 14y ago
    Yeah, get thee to a recent release or pre-release and tell us what you think.
tn13 14y ago
This does seem brilliant. Well done Foxers!
mzarate06 14y ago
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!
cromwellian 14y ago
+1 for sourcemap support.
alcuadrado 14y ago
paulrouget FTW!
anonfunction 14y ago
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 14y ago
  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 14y ago
    Of course you never know which one will become the next Firefox. (In the sense of headline product.)
lucian303 14y ago
Wow, Mozilla actually thinks it can top Firebug. What is this, a Netscape twisted flashback? If it isn't broken don't fix it and if it's not useful, don't create it. Ah, but words fall on blind eyes here.
druska 14y ago
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.
jwarkentin 14y ago
What I want to see is the ability to inspect websocket traffic like Chrome has.
sparx 14y ago
Firefox with firebug was my first tool for web development. Now this makes me considering switching back to FF now.
visarga 14y ago
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 14y ago
  You can detach the developer tools window and put it anywhere you like.
vpasquier 14y ago
Nice one
ksec 14y ago
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? )
mcepl 14y ago
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.
path411 14y ago
As someone who's loving TypeScript, is it a possibility we will see that supported too?

612 points by paulrouget 14y ago

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 14y ago
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 http://i.imgur.com/uNsh7Yv.png Firefox clearly has the superior bar.
- axelfreeman 14y ago
  You can deactive this in chrome://settings/. I did it after your post. I find it also annoying.
  - xymostech 14y ago
    What setting do you change?
    - simonz05 14y ago
      [] Use a prediction service to help complete searches and URLs typed in the address bar Maybe that one.
      - georgemcbay 14y ago
        So that's why every time I start typing a reddit url, Chrome suggests I visit http://www.reddit.com/r/gone http://www.reddit.com/r/gone wild (sic, with the space in there). There are a number of reasons why they really need to rethink this, default it off, or do some better filtering. Didn't impact me personally beyond the confusion but I could imagine that URL and maybe some others coming up in what appears to be someone's unique search or browsing history raising some interesting questions at work and/or at home for some users.
  - knocknock 14y ago
    I would still like the search results to show up though. Just prioritized lower than my history.
  - nivla 14y ago
    I am surprised not a lot of people at HN do this. Disabling predictive service is one of the first things I do after installing chrome on a new machine. Something about sending every keystroke made on the omnibar to Google makes me feel uneasy, it could also be the paranoid in me talking.
- matthuggins 14y ago
  I appreciate this feature on mobile as it can help save me some more time-consuming taps, but I don't use it on Chrome since I can type faster than I can browse through the results it's guessing at.
- quaunaut 14y ago
  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.
  - ricardobeat 14y ago
    All the time. I'm not sure how to not activate auto-completion sometimes.
    - quaunaut 14y ago
      But this isn't auto-completion, this is just plain ignoring what I typed.
  - ajanuary 14y ago
    Is it associated with Google Instant failing? I've noticed frequently Google Instant will fail half way through searching, and it will ignore everything I typed and just go with what Instant guessed before it crapped out. If Instant is prioritizing your previous search, it may be linked.
    - quaunaut 14y ago
      This definitely could be what it is.
  - kyrra 14y ago
    (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.
- tambourine_man 14y ago
  I like Safari's solution best. Hit space and you get recent searches. Start typing and you get suggestions.
- deleted 14y ago
  [deleted]
- didyousaymeow 14y ago
  Aurelio's used to have amazing pizza before the original owners sold it and it became a franchise. Don't waste your money, there's plenty of better options. Also, I agree with you regarding Chrome's Google search priorities.
  - gmrple 14y ago
    Supposedly the one in Homewood, not the origional location, but the origional town and ovens is still good. I enjoy it at least, but I grew up on it.
  - deleted 14y ago
    [deleted]
- mikeratcliffe 14y ago
  Also, putting "* " in the awesomebar before typing searches your search string limits the results to bookmarks. Here is a list of these prefixes: Add ^ to search for matches in your browsing history. Add * to search for matches in your bookmarks. Add + to search for matches in pages you've tagged. Add % to search for matches in your currently open tabs. Add ~ to search for matches in pages you've typed. Add # to search for matches in page titles. Add @ to search for matches in web addresses (URLs).
- urlwolf 14y ago
  You can have a pretty close approximation on chrome with this plugin (fauxbar): https://chrome.google.com/webstore/detail/fauxbar/hibkhcnpkakjniplpfblaoikiggkopka https://chrome.google.com/webstore/detail/fauxbar/hibkhcnpka... It searches your history and bookmarks too, which is what the awesome bar does.
- samspot 14y ago
  Your comparison would be stronger if you searched for the same string in both.
  - sergiotapia 14y ago
    If anything, I've given Chrome a bigger crutch by giving it more letters to work with. And it's still worse than FF. ;)
    - samspot 14y ago
      Perhaps so, but it still seems unscientific. I even left out that an even better test would be if you had identical history in both browsers (which I know would be inconvenient to set up). I honestly do not understand why I am being downvoted.
- zobzu 14y ago
  yeah and you can get chrome behavior in ff in the search bar, too. well except for the bug of course. The ff search bar does search for what you typed, not what you typed last. (and does shows instant results, too) best of both worlds.
- mtgx 14y ago
  I disagree. I think most people use the bar for searches, not their bookmarks.
  - mhaymo 14y ago
    Sure, but I don't really need the bar's help to type my search term. I do need its help to search my history/bookmarks.
nvr219 14y ago
I prefer Firefox Awesomebar as I find that when I type something in to search my browsing history it usually returns what I was looking for.. Chrome not so much. EDIT: what sergiotapia said ^^^
yesbabyyes 14y ago
In my experience, Omnibar is giving me worse and worse results. sergiotapia's example mirriors my experience lately. That said, Omnibar in Incognito Mode works well, because it only searches my history (which is what I want). Edit: chrome://history is pretty cool, too.
whichdan 14y ago
Like sergiotapia, I'm very close to switching back to FireFox /because/ of the Awesomebar. However, for me, it's because it matches my search history better. Let's say I'm working on a page call /editor/?id=1234, in FireFox, typing 1234 will show that page as the first match, whereas Chrome doesn't even match it unless I start typing /editor/, and sometimes even the root domain. It's very frustrating.
- epmatsw 14y ago
  HackerNews is the best example for me. In firefox, I can type in y, and it will know that I want news.ycombinator.com. In Chrome, the only way to have it autocomplete (at least the last time I tried it) was to start with n.
  - cromwellian 14y ago
    I always visit by going to hackerne.ws, so I hit H in Chrome.
kemayo 14y ago
There's a Firefox addon called Instantfox [1] which makes the Awesomebar behave somewhat more like the Omnibar. Possibly too much so, depending on your preferences. [1]: http://www.instantfox.net/ http://www.instantfox.net/
deleted 14y ago
[deleted]
smnrchrds 14y ago
I removed search box from Firefox few months ago and never looked back. I use search engine keywords instead[1]. My current keywords include goog, bing, amzn, crate, and wiki. Guess what search engine they refer to. :) [1] http://kb.mozillazine.org/Using_keyword_searches http://kb.mozillazine.org/Using_keyword_searches
- shardling 14y ago
  I really, really prefer the search box. For me, searching the web and searching my history are very different intents; so activating them with different keystrokes doesn't seem like much of a burden.
  - bjustin 14y ago
    I did too, but Google instant changed things. Try this: 1) Set your search engine to Google (if it isn't currently) 2) Remove the search bar. 3) Press ctrl+k (cmd+k) and start typing. You'll be searching on Google's site, by far the best search experience with Google Instant on. The only downside is that you need a reasonably fast, low-latency connection for it to work well[1]. [1] Fine with decent Internet service, but what a downside it is on a lesser connection. The ~0.5-1 sec delay was unbearable on a 3Mbps DSL connection with average latency.
    - shardling 14y ago
      I often use the search box for of stuff other than googling. (Wikipedia, Amazon, arxiv, and a couple of specific wikis.)
  - fafner 14y ago
    You'll love this https://support.mozilla.org/en-US/kb/awesome-bar-find-your-bookmarks-history-and-tabs#w_changing-results-on-the-fly https://support.mozilla.org/en-US/kb/awesome-bar-find-your-b...
- mcepl 14y ago
  +1 ... except that gg is a keyword for DuckDuckGo. I just couldn't switch my finger memory from gg, so I rather switched the alias ;)
mrinterweb 14y ago
I preferred Chrome's Omnibar to Firefox's AwesomeBar as well, but then I found this FF add-on https://addons.mozilla.org/en-US/firefox/addon/omnibar/ https://addons.mozilla.org/en-US/firefox/addon/omnibar/. One advantage I have always preferred with FireFox is that it's add-ons can have tighter integration with the browser than Chrome's extensions. In example, one such add-on that Chrome can't do is FireFox's Last-Tab add-on. It lets you switch between tabs in the order they were used. After getting used to that work flow, I have a hard time using any browser other than FF. To me, Firefox seems more extensible than Chrome.
darkstalker 14y ago
I like how Firefox completes the site I want with only typing 1 or 2 characters in the address bar. Also Firefox has a separate search bar that supports plugins (dictionaries, CPAN and stuff like that)
barrkel 14y ago
Chrome's Omnibar constantly auto-completes searches I did earlier in the day and week, so that I often have to press delete before enter. And there is no settings toggle to turn this off. (I'm not talking about the completion dropdown or what it contains, I'm talking about how the typed text in the input area has selected text appended to it when it happens to be a prefix for an earlier search.) Between this, the lack of tree style tabs, and the weird text selection algorithm, I'm generally sticking with Firefox.

DrinkWater 14y ago

Damn! i am impressed. Good job, Mozilla!

lucb1e 14y ago

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.

Mahn 14y ago

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

johnmw 14y ago

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

andyhmltn 14y ago

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 14y ago
It opens a new buffer, than can be saved as an existing file.
- mbesto 14y ago
  Give me this now. (ps - awesome work and communication!)
  - brycedriesenga 14y ago
    You might be interested in checking out Brackets (http://brackets.io/ http://brackets.io/) which has some live development capabilities for CSS at least right now. I believe it only works with Chrome though, currently.

polskibus 14y ago

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 14y ago
Sublime is available on Windows, Linux, and Mac...
- evolve2k 14y ago
  Why is the above comment downvoted? Totally relevant in addressing what the comment above it said.
  - MatthewPhillips 14y ago
    Because the OP was pointing to Sublime as an example of a tool that is available, and popular, cross-platform.
    - publicfig 14y ago
      If that were the case, then the OP would have no argument because that's the only external tool being shown right now.
      - evolve2k 14y ago
        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.
joewalker 14y ago
Can you explain how we're doing that? I'm not aware of any of our tools that are Mac only.

risratorn 14y ago

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 14y ago
You're right. That's the next challenge: delivering. It will take time.
- MoOmer 14y ago
  Right on, you and your teams' attitudes are encouraging!

kibwen 14y ago

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

h2s 14y ago

The right-hand-side docking looks absolutely amazing (http://i.imgur.com/duQOXq7.png 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 http://i.imgur.com/V7eWC1m.png

paulrouget 14y ago
Fixed in Firefox 21.
- h2s 14y ago
  My apologies, I remember in the original post you asked us to hold off on providing feedback unless the issues were present in recent Firefox versions. On the plus side, this motivated me to switch to Firefox Aurora just now and I must say, I'm extremely impressed!
  - steveklabnik 14y ago
    I've been using Aurora for the past few weeks, and really enjoy it quite a bit. I'd been using Chrome for the past few years, but the recent shenanigans by Google was enough to motivate me to take a few more steps away...
  - codereflection 14y ago
    I've been using Aurora for the past year or so, and haven't look back much. Occasionally I'll switch back to Chrome, but that's only when something in Aurora or nightly is broken.
untog 14y ago
FYI, right side docking is available in Chrome. I had no idea for a very long time.

sergiotapia 14y ago

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.

bargl 14y ago

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

SG- 14y ago
I'm not quite sure if a mockup proves anything, unless you mean the part about them asking the community.
- bargl 14y ago
  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 :-)

xtreme 14y ago

This is great, thank you Mozilla for your hard work. I am looking forward to ditching firebug and use the native tools.

gotoY 14y ago

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 14y ago
At the time, yes. In particular, there were somewhat irreconcilable differences in goals and priorities...

salvadornav 14y ago

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

lucb1e 14y ago
Was this a reference to RA2's taunt "We will bury them!"?
- likeclockwork 14y ago
  Which itself must be a reference to Nikita Khrushchev's famous outburst[1]. 1: http://en.wikipedia.org/wiki/We_will_bury_you http://en.wikipedia.org/wiki/We_will_bury_you

kmfrk 14y ago

Previous thread: https://news.ycombinator.com/item?id=5325445 https://news.ycombinator.com/item?id=5325445.

IgorPartola 14y ago

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 14y ago
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 14y ago
  Ah, you are right. Such a useful feature!

rlx0x 14y ago

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.

quaunaut 14y ago
> there is currently nothing that beats the chrome devtools. That's the point of this post. It's that pretty soon, Firefox is going to have much improved devtools. They include some features that interest us greatly.
czzarr 14y ago
totally agree with you. FF is really good at making people WOW but I'd really like to see usage numbers.
st3fan 14y ago
Can you explain why nothing beats the chrome dev tools?
- czzarr 14y ago
  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.
  - FuzzyDunlop 14y ago
    I would hope or presume that Firefox's tools eventually do get this level of polish, though. Chrome (and even Safari) has had quite a bit of a head-start, and neither of those were shining examples of great UX at the beginning.
  - 14y ago

czzarr 14y ago

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.

paulrouget 14y ago
We do both at the same times: adding tools and improving existing ones.
czzarr 14y ago
why I am getting downvoted? because I'm not agreeing with the flock? I provided constructive feedback
- callahad 14y ago
  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.
- mcrittenden 14y ago
  Your feedback want constructive, it was vague and lacked any specific details mozilla could use to improve.

sisk 14y ago

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 http://en.wikipedia.org/wiki/Two_Out_of_Three_Aint_Bad

paulrouget 14y ago
Thanks for the initial feedback :)

leeoniya 14y ago

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 14y ago
The profiler has a stackwalking mode that provides more accurate info: https://developer.mozilla.org/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler#Stackwalking_vs._pseudostack https://developer.mozilla.org/en-US/docs/Performance/Profili... You would need to use a nightly release to get that though, and only on the platforms that are currently supported.

boundlessdreamz 14y ago

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 14y ago
The inspector has a search box in Firefox 21 and above.

nefasti 14y ago

Welcome back to my heart Firefox.

mmuro 14y ago

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!

purephase 14y ago

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 14y ago
He had to click accept connection before it allowed him to edit the CSS.
- purephase 14y ago
  Which, as we know, is a rock-solid protection mechanism against these types of exploits. Everyone reads modal messages.
  - nsmartt 14y ago
    Fair enough. +1
  - Bockit 14y ago
    Maybe turning on some kind of dev mode to enable the feature, and then keep the modals as well.
  - past 14y ago
    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 14y ago
      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.

joubert 14y ago

"Control browser from Editor" > "Edit in the Browser". Think about it - everyone prefers a different editor.

Optimizer 14y ago
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 :)

hipsters_unite 14y ago

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!

nzonbi 14y ago

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 14y ago
> - Allow to use a dark theme on all panels. I'm working on that. Screenshot: https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719063 https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719...
- NuZZ 14y ago
  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.

ericb 14y ago

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

bmuon 14y ago

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 14y ago
Why? I say leave Firebug alone, or just kill it already? We don't need two inspectors.
- past 14y ago
  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.

ricardobeat 14y ago

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

gbadman 14y ago

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 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/ http://github.com/filearts/).

paulrouget 14y ago
Isn't the first paragraph exactly about that?
- gbadman 14y ago
  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!
  - paulrouget 14y ago
    So - Firefox exposes a tcp-based protocol (not enabled by default. The user will need to go to a special tool to start the server). It will expose feature like adding break points, exploring the DOM and the CSS rules, and editing content (CSS/HTML/JS). So external tools can connect to Firefox. But this protocol is not accessible from a page. But we could imagine using a websocket instead of a normal tcp socket, and let the web page connect to ws://localhost.

existentialmutt 14y ago

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 14y ago
Sorting and filtering are planned, yes.

edwinyzh 14y ago

"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 http://liveditor.com

mikek 14y ago

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 14y ago
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 14y ago
  I still prefer Firebug, instead of Chrome dev tools. What are the reasons which make you think, it is not great?
  - Aardwolf 14y ago
    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?

nsmartt 14y ago

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 14y ago
I can't edit my post, but I just saw http://paulrouget.com/e/australis-ux/ http://paulrouget.com/e/australis-ux/. I'm beyond excited for this.

AaronMT 14y ago

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 14y ago
You mean like https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/ https://addons.mozilla.org/en-US/firefox/addon/user-agent-sw... ?

stephen 14y ago

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

rhdoenges 14y ago

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/ https://people.mozilla.com/~jwalker/gcli/

mnemonik 14y ago
Shift-F2
- johnath 14y ago
  Yeah, get thee to a recent release or pre-release and tell us what you think.

tn13 14y ago

This does seem brilliant. Well done Foxers!

mzarate06 14y ago

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!

cromwellian 14y ago

+1 for sourcemap support.

alcuadrado 14y ago

paulrouget FTW!

anonfunction 14y ago

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 14y ago
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 14y ago
  Of course you never know which one will become the next Firefox. (In the sense of headline product.)

lucian303 14y ago

Wow, Mozilla actually thinks it can top Firebug. What is this, a Netscape twisted flashback? If it isn't broken don't fix it and if it's not useful, don't create it. Ah, but words fall on blind eyes here.

druska 14y ago

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.

jwarkentin 14y ago

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

sparx 14y ago

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

visarga 14y ago

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 14y ago
You can detach the developer tools window and put it anywhere you like.

vpasquier 14y ago

Nice one

ksec 14y ago

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

mcepl 14y ago

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.

path411 14y ago

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