Future of Firefox DevTools
paulrouget.com
paulrouget.com
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
Fixed in Firefox 20
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...)
But hot damn, you're making me question loyalties on my dev machine.
Here, let me show you a clear example.
http://i.imgur.com/uNsh7Yv.png
Firefox clearly has the superior bar.
Maybe that one.
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.
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.
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.
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.
you can also have different engines
?cat
i have one for ddg so
ddg cat
Yes, I have been encountering the same behavior. It is infuriating because it's impossible to tell when this is going to happen. This is separate from pulling up different searches I've used before, this bug seems to be something like "ignore what you type completely".
I have a new dev laptop in the mail, perhaps Firefox will get installed before chrome...
Also, I agree with you regarding Chrome's Google search priorities.
Hit space and you get recent searches.
Start typing and you get suggestions.
It searches your history and bookmarks too, which is what the awesome bar does.
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.
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.
(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.
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/).
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!
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.
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.
<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.
Keep up the stellar work, firefox is gaining momentum again, make good use of it :)
In particular, there were somewhat irreconcilable differences in goals and priorities...
-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?
I am looking forward to ditching firebug and use the native tools.
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 :-)
The ability for the browser to modify files directly on my workstation outside of caching folders sounds like a recipe for disaster.
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.
2) to enable this feature, you first need to go to a "start connection" screen (not showed in the video)
3) you need to click on a dialog to accept any incoming connection
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.
I'm working on that. Screenshot: https://bug836233.bugzilla.mozilla.org/attachment.cgi?id=719...
Keep it up, can't wait to ditch Firebug.
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.
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.
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.
(ps - awesome work and communication!)
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?
But it's not out yet, because it's only me working on it...
URL: http://liveditor.com
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!
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".
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.
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!
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.
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
Humblebrag: Psyched to see two out of three of my main points addressed. I'm impressed. Meat Loaf* would be, too.
I love the demo: https://people.mozilla.com/~jwalker/gcli/
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.
Think about it - everyone prefers a different editor.
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.
The Opera Developer Tools (Opera Dragonfly): The UX is done well, the markup editor works even better than in chrome and I like the screenshot utility and color picker. The css inspection is inconvenient when you want to change properties or add new rules. The network log is done well but the UX can become confusing, the make request feature is exceptional I don't know any other devtool that has that integrated. No xpath in the dom inspector.
Firebug: This was the first browser devtool afaik so it has a long history and years of development behind it, I always considered it to be "the firefox developer tools" and I was really surprised when mozilla announced they would recreate it on their own instead of just integrating firebug. But I guess they have their reasons.
Firebug has a great UX, everything is fast and polished although it has become a little old, it still integrates nicely in the current firefox UI. The dom and css inspector is great, it allows to quickly change anything you ever want, with the exception maybe that you cannot add new css rules (only element styles). The network inspector is exceptional, best of all 4. I don't like the console/REPL but its alright. Overall still my second favorite.
Chrome Developer Tools: Provides by far the best UX and is clearly the most powerful devtool around. Its also the only reason why I have chrome installed, my main browser is and was always firefox. The css inspector is just great, you can update or add new rules and properties and it has great auto completion. I don't like the dom editor through, the edit as html feature lacks a bit. Javascript debugging and the console work exceptionally well and you can even edit and save your code within the devtools. It has HTML5 builtin features for web workers, indexedDB, local storage, etc. You also can use it to debug nodejs applications through node-inspector.
Firefox Developer Tools: I must admit, I don't even know where to begin. The UX is just awful: From the alien dark-blue that doesn't integrate at all with the rest of firefox and the font sizes that you can't change to the strange dropdown menu/button combinations in the latest version. The DOM inspector doesn't allow you to edit html directly, has no xpath and the css inspector is confusing and doesn't has autocompletion. There is no resources overview, no networking debugging and profiling. I do however acknowledge there is some progress in the latest snapshots, I like the scratchpad, style editor and the UI overhaul made it a bit more usable. There are still no settings, still no way to change the dark theme. I don't say it isn't making some progress, but its so slow (they say they need a few months for the python api alone), that chrome will have progressed well beyond and I don't see them catching up.