There are four major new features here:
1. The Firefox Tools Adapter ("Valence"), which lets you use the Firefox dev tools to inspect and debug pages in Chrome for Android and Safari for iOS. The goal: one set of tools to debug any browser.
2. Side-by-side profiles. The Developer Edition defaults to a profile named `dev-edition-default`, which makes it easier to run Developer Edition at the same time as a normal release version of Firefox. You don't have to deal with the profile switcher each time.
3. Developer-friendly defaults. Developer Edition ships with things like remote debugging and browser-chrome debugging enabled by default.
4. And, for all of you who hated Australis, a compact theme with square tabs.
But those are just consequences of the single biggest change:
5. We have a new channel, which new rules. And we want to use it to build the best possible browser for web developers. We can ship new tools that aren't yet ready for the Beta channel, and we can change the browser's appearance and defaults specifically for web developers.
We'll be watching this thread during launch, but you can always submit feature requests on UserVoice. The right people will see them: https://ffdevtools.uservoice.com/forums/246087-firefox-devel...
This isn't a finished product. It's an invitation.
What tools do you need?
1. HTTP Request builder (think cURL with a nicer GUI and the ability to save presets);
2. Web Proxy, able to "stop-and-modify" requests (think Fiddler or Charles);
3. Network conditions simulator for throttling, packet dropping and limited bandwidth, with profiles (e.g. GPRS);
4. Local Mock REST API, with a few predefined endpoints (e.g. /users/) + the ability to create new ones (with configurable values such as random integers between X and Y or a random string which is a valid e-mail);
5. Multi-touch simulator (with a modifier key);
6. A usability test facilitator, able to create test scripts and automatically record timing and extra information (e.g. define a task that ends when user clicks the element with id X; when said user clicks #X, you annotate the time, the number of misclicks, etc). You could also implement this for static images, with clickable regions. I would love you for this one.
Overall I'm impressed with new network panel, much better than before.
[0] https://ffdevtools.uservoice.com/forums/246087-firefox-devel... [1] https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer...
Safari 8 introduced "breakpoint actions" similar to Xcode's: when a breakpoint is set, it can be configured to not actually break (keep running even if the breakpoint condition matches) and if it matches:
* log a message
* play a sound
* execute code
* run a probe
Each action type can be used any number of time on the same breakpoint.
It's not the most stable and almost undocumented — the only documentation I've found is the second half of WWDC'14 Session 512 "Web Inspector and Modern JavaScript" (starting ~37mn in) — but it's a great system, one I've been waiting for for a long time, and one I'd like to see more of. Especially with all the other features in e.g. the Xcode version: Xcode can ignore the first n hits of a breakpoint and can capture an OpenGL ES frame. In a browser, the breakpoint could allow capturing the DOM state, the renderstate or a WebGL frame.
Also, a shout-out to mitmproxy (https://github.com/mitmproxy/mitmproxy) which I've used on several occasions.
I wonder where do you draw a line for a developer oriented browser. Is a good 'line' be tools for 'whatever loads on page'?
Since we already have color picker etc, I think good candidates are
* Onscreen ruler
* Gradient generator
* Builtin JSfiddle
* CSS sprite generator
* Image to base64
* JS/HTML/CSS formatter
* JSON tools - tree-viewer/formatter/validator
* XML tools - tree-viewer/formatter/validator/xpath
It'd be really nice to have that for CSS, particularly if it could do a side-by-side view for e.g. source-mapped original and prettified CSS-as-used.
Firefile allows you to edit CSS in firebug and save to your stylsheet right from there. It's incredible how this smooths out my workflow and I can't work without it.
Firefile, though, doesn't appear to be in development anymore and it's latest release is broken. (I had to make some manual edits to get it working).
Any chance we'll see Firefile's functionality coming to FF Dev Edition?
Every other program I use lets me check config into git, but FF insists on storing config data into profiles with randomly-generated names. It's very resistant to automation. I understand there is an FF-specific sync solution, but I want all my config in one place.
Incidentally, if you're on Windows, you can actually check all of Firefox Portable into source control since it runs in a single directory. You'll get 'changes' each time its run from a new location, of course.
Also, having more than 6 presets would be better. There's so many devices with different viewport sizes now. Chrome at least has a fairly deep list of devices you can test with their responsive tool. It would be nice to see a more robust list in the Developer Edition.
User agent spoofing for every tab. Mobile development is hell without it and nowadays almost every site needs to be developed with mobile devices in mind, which makes FF a bad tool for web development. Just copy Chrome in this regard, they do it right.
I can always just copy and paste directly from the request inspection dialog, but that loses all of the useful formatting, making it hard to parse, or requiring me to go in and add line breaks if I want to be nice to my fellow developers.
Small, but it's the sort of detail that makes for a nice, easy experience.
A WebIDE that isn't focused on mobile? Not sure if this is already possible with WebIDE but the focus on mobile-first makes it confusing.
I do a fair amount of prototyping on WebGL and the web platform. However my current flow involves managing my project files, serving them to FF, and building the final bundle via a collection of third-party tools, libraries, and applications. I then run, test, profile, and tweak in FF.
It'd be nice to have a source editor and project manager built in. Give WebIDE an option to develop for desktop FF or something. Focus everything on live-coding: a DOM-enabled source editor could detect new nodes and tell the context to redraw the page; the debugger could highlight the source lines as I step through; the scripting engine can update the DOM-aware editor and highlight added nodes; I can connect source buffers to a namespace REPL to recompile and execute definitions on the fly.
Either that or add a chrome-less mode that allows me to embed FF inside my development environment and open up the remote APIs to allow for more interactive debugging, profiling, etc (eg: http://www.emacswiki.org/emacs/WebKit)
1. Performance timeline which shows major events (e.g. DOMContentLoaded, load event) and the network / scripts which blocked them
2. Initiators for reflow, layout, etc. events. Currently it's really easy to identify a JavaScript hotspot if it's pure JS but it's hard to learn what's triggering hundreds of reflows, particularly in non-obvious cases such as CSS transitions.
Would love to be able to save scripted unit tests, preferably per URL. Right now it is a bit of a pain point with test suites in JS, PHP, etc... what if we want to switch to another language? It would be better if the tests were local to the browser, unhinging us from some of the language dependencies.
If I'm alt-tabbing it helps identify which FF instance I am switching to
That's amazing. I can't wait until we have standard wire protocols for all of this so that I can stay in an IDE while writing GWT/Coffeescript/JS/etc., e.g.:
(AFAICT both the FF and Chrome teams seem hot on building IDEs into their browsers, but, sorry, that's a step down the all-in-one Netscape Suite road IMO. :-))
Hand editing by moving the cursor is so fiddly and error prone.
Take:
http://my.app/path/to/node?a=123&b=A34
Having MRU entries for each param value in a dropdown would be quite useful too.
Seriously, FF without treestyle tabs IS NOT USABLE, and treestyle tabs breaks now and then in Aurora. Having such a layout actually being supported would be very nice.
As a long term Aurora user, a working profile switcher that actually respects resetting the default profile to the usual one would also have been nice.
It would be cool for Developer Edition to help me test websites everywhere. I'm not sure how technically you would do that though.
EDIT: Wow after trying it out it seems like a long-time bug I've been experiencing has been fixed, I'm willing to bet it's not just the clean install either because I tried resetting Firefox multiple times before and it hadn't helped.
Developer or not, I have long waited for the possibility to: 1. Store bookmarks in "unsorted bookmarks" by default when I use ctrl-D. This option lacking, my bookmarks menu is so much cluttered that it is useless. 2. Edit bookmarks comments, with ctrl-D. 3. Query bookmarks and tags precisely (a bookmark with tags t1 and t2 which title contains regexp r).
Today, with small hacks, I manage to search bookmarks and trigger web search through the address "awesome" bar. But a bit of syntax like in w3m.el would be so much better.
I should try to prototype it in an app. These functionalities should not be very hard to implement. But it seems to be too much of a burden :(
Thanks
(Google's ios-webkit-debug-proxy doesn't appear to yet)
There is an open bug but no love: [ https://bugzilla.mozilla.org/show_bug.cgi?id=790706 ]. Firefox forces high-contrast colors, completely destroying HTML rendering, with no option to disable this behavior.
Using a high contrast theme in Windows doesn't mean i don't want to see web pages as their developer intended.
Chrome gets it right, why can't Firefox?
If anybody motivated to help us implement features reads these lines, the next step is to join us on IRC: irc.mozilla.org, channel #introduction .
One thing I could really use is something that helps me understand how Firefox treats TCP/TLS/SPDY connections. It would illustrate the benefit of using CDN and maybe, with enough instrumentation, would help me tune asset sharding.
I put some thoughts in the uservoice here: https://ffdevtools.uservoice.com/forums/246087-firefox-devel...
Edit: To enable 3d view you have to check a box in the settings menu in the Dev Panel, which makes a little 3d box icon appear if anyone else is wondering.
I think I'd prefer to develop for the current state of my user base and not for some "maybe it will be so" target.
Can you please clarify what the "new rules" are?
As far as fundamental web platform features are concerned, the Developer Edition is a normal pre-Beta channel. It's primarily that more willing to promote new tooling up from Nightly into the DevEdition or to set different default preferences, for instance.
Ideally, It'd be best to be able to open a new tab inside of a different profile and just be able to tab back and forth between the different profiles.
A better profiler, chrome flamechart is probably the best out there, it would be really nice to have the same for Firefox. Also allowing to operate in "count every call mode" and "sampling" (with control over sampling)
Having different named profiles for remembered users/passwords for a given site. Chrome can do this but I've never cared for it's interface that much.
The Tools Adapter that lets you debug Chrome/Android or Safari/iOS tabs from the WebIDE is a first step in that direction.
Some things belong just at work or just at home.
Some things aren't ever accessed on mobile.
EDIT: Ah, I see there's a link to restore the theme at the bottom of the welcome page.
EDIT: Aha, https://news.ycombinator.com/item?id=8584207
Right, because that's totally the problem with Australis. Nothing to do with screwing up customization or the general theme, treating users like idiots etc. It's the rounded tabs!
They are imho much more useful on todays widescreen displays than normal tabs.
Seriously, there has to be a better reason than that for square tabs. If there isn't, I question the usefulness of doing so.
Correct me if I'm wrong, but that feature is still not included even though there are feature requests for it. I am interested in it in order to emulate print.css . I'm sure it's not the highest priority.
A colleague had a weird race condition (I guess) with this prompt + the "how-to" overlays and Firefox Developer Edition stopped responding to clicks 3 seconds after launching it…
Kudos for using a different profile than the classic Firefox/Nightly :)
I've always used the bleeding edge Aurora and Chrome, have never had substantial problems with that.
- a couple of decades ago alert() was used by pretty much everybody for debugging, even her :) [2]
- most of the developers use(d|s) Chrome for web development
- this is the first serious dedicated tool for web developers which is not just a browser plugin
you don't have to close a million tabs during development
- they worked together with the Firebug team, there will be no duplicate functionality in the plugin and the browser
- seamless Firebug integration. You can switch between Firebug and default theme, it will not break your workflow
- NOT a new browser which you have to support, same engine as in Firefox, nothing new or special about it
- multiple profiles
- developer friendly default settings like enabled experimental CSS features, etc.
- UX improvements for changing config, like switches for features, so you don't have to dig about:config
- support debugging Android, even the iOS simulator or attached device real time
- the dev team is really looking for feedback, they want to make web developers' life easier and put in features based on feedback
- there will be no built in REST API tester tool like Postman REST Client at first, but I was not the first dev who asked for it, so they will consider it for sure
- it will replace the firefox dev channel
- themeable
- much stable than nightly, but you can try out experimental browser features, so it's a good compromise
[1]: http://instagram.com/p/vIiNp_vRXD/
[2]: https://twitter.com/hopefulcyborg/status/530033632636055552
I've never used most of the features of the developer edition except the console and everything is great on this developer edition.
I'm a proud owner of a Firefox OS phone and the simulator is really good and fast, I think I'm going to make an app or two during my spare time !
A big thank you to all the team for your great work !
Have fun coding :)
Either way, the new UI changes in this edition make it way more elegant and appealing.
In dark theme, the contrast to the Yosemite system toolbar is terrible and the tab text is extremely hard to read.
http://i.imgur.com/w11zZJJ.png
This wouldn't be a problem usually (although strange) but I have to click the partially hidden box under the top most box to dismiss anything.
I'm not seeing where/how to view frames in the network tab here, but perhaps I missed it?
Websockets have been around for years, and are becoming normal in day to day internet. Mozilla was one of the biggest promotors. I'm using them more and more.
It just doesn't make sense that I can not debug websockets in Firefox.
I'd also like to see the tools go farther with minimal formatters for messages, particularly messages in JSON format.
https://support.mozilla.org/en-US/kb/profile-manager-create-...
EDIT: Wait! The default profile was used when clicking "Restart" from within the updater, but when closing and reopening the browser manually it did indeed start up with a new profile.
This will cause Firefox Dev to use the Firefox profile with all your settings and Addons.
First, using a browser which includes fancy experimental features might result in the page looking or behaving differently in the users' (stable) browsers. I see this as kind of risky, that's why I usually develop against stable browsers and use the nightly/aurora for personal browsing.
Second, having browser-chrome debugging on by default is not very helpful for web developers, it actually gets in the way. It might be more useful to activate these features in the nightly channel, where people are more actively debugging the browser itself.
Third, if this channel is the intended one for developers, why ship the development tools with the stable release?
I was expecting something more from all the fanfare.
But what's larger than any of that is the change in Mozilla's policy / conception of the pre-Beta channel. This is very much a v0 offering, of course, but it's an indication that we genuinely want to take developer feedback seriously and co-design this with you.
We've given ourselves the freedom to ship tools into Developer Edition that aren't yet ready for Beta. We're willing to change the browser's appearance and defaults specifically for a web developer audience.
If you have feature requests, please submit (or upvote) them on UserVoice: https://ffdevtools.uservoice.com/forums/246087-firefox-devel... the DevTools team actively monitors and responds to requests there. Your ideas will get seen, and now, we have even more freedom to actually execute on them.
Having more tools in a developer edition compared to the regular version of the browser seems fine, but at least for me I would like run it with the same rendering engine my users are likely to run.
Of course, don't forget to test in stable.
Another thing I can think of is rather than prefixing CSS/JS, experimental features could always be enabled in the developer builds and it then kicks into life on stable when it's ready for the general public. Right now you need to change various flags for that to happen.
So the browser itself should be pretty stable, but the devtools may not be.
It may also gets developer-specific UI customisations which never get merged into the beta/release channels.
https://addons.mozilla.org/en-us/firefox/addon/jsonview/
(There could be an option to disable "automatic JSON formatting" for those who don't like it for whatever reason)
Sniffing my laptop gave me this http://download-installer.cdn.mozilla.net/pub/firefox/nightl...
Felt weirdly generic since the name didn't indicate any special edition, but I ran it and it says developer edition.
----
tl;dr In case someone needs an offline installer, grab that url.
Edit: Use the custom installation option to prevent it from becoming your default browser.
I'm sure you meant sniffing your network traffic?
Edit: Oh man I think I've hung out with the Python crowd for too long I think their rancor is starting to rub off on me ;)
The tooling in Firefox does seem to be improving rapidly (kudos to the devs for that, I'm not trying to trivialise the hard work that they've been putting in, by any means), but there are still several basic(?) features missing from the script debugger. Calling this a "developer edition" is IMO a misnomer until you can reasonably use it to develop pages/sites/applications - currently every other major "not-for-developer edition" browser already gives you almost everything this does, and in some areas quite a bit more.
What would make it a developer browser to me:
* Folder grouping on resources
* Allowing webide or the script web tools tab to work with local folders (Chrome workspace equivalent)
* Dynamic updates to scripts (Chrome workspace/dev tools equivalent)
* The ability to open and/or display more than 1 script at a time. Tabs in developer tools should operate like browser tabs (orderable, poppable etc)
I hope that this isn't just a re-branding exercise - the video, site and fanfare make it sound like Mozilla's aiming to make something great for developers (not to mention that the FF tools are headed in the right direction), but the first release and associated posts/comments seem to indicate that it's essentially a nicer packaging of what used to be aurora.
Now regarding your needs, the devtools teams is watching this thread, but just in case they miss your message, you might be better off making your requirements known here: https://ffdevtools.uservoice.com/
* debugging is too slow (or my computer is weak, but Chrome DevTools run smoothly); * debugging is very slow; * the debugger has some unpredictable behavior, like stopping at all calls that lead to some error, when I expected it to stop at the error properly.
Source: I package apps for portable use for PortableApps.com. We analyze many of our apps for whether the trade-off of a size increase including both the 32-bit and 64-bit versions of an app is outweighed by the performance or stability advantages of the 64-bit version of a given app. Including the 64-bit version is worth it in VERY few instances. Even then, it won't help most users.
- checksums: https://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/late...
- signatures: https://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/late...
- signing key: https://ftp.mozilla.org/pub/mozilla.org/firefox/releases/lat...
edit: reformatting
2nd edit: added https
I think its important to differentiate different users / use cases, because 'Web Developer' is pretty broad.
I was able to find a firebug feature request with applicable bugzilla links: https://code.google.com/p/fbug/issues/detail?id=5083
Edit: changed reload to save
On the theme, I personally don't like dark themes for my browser. But I like that this theme is space efficient, so I hope to see an equivalent for the stable Firefox, as I for one would use it, but please make it light instead of dark :)
I do hope to see Electrolysis get some love. It's available in Nightly, but not in this developer preview. From what I understand, the next version (36) is the first version in which Electrolysis starts being moved between channels.
Anyway, great job.
Also, you can get a light version of the same compact theme by opening the devtools (Ctrl+Shift+I), clicking the gear in the upper-right, and selecting the "Light theme" radio button. It looks great!
1. HTTP Request Builder (i.e. Postman) 2. Web Proxy 3. Make the Web IDE for anything like Atom or SublimeText 4. CSS media emulation
The release looks great, congratulation guys. Looking forward to the future of this model.
But this time I am!!! So yeah, menu doesn't work in notion. There you go!
Secure Connection Failed
An error occurred during a connection to news.ycombinator.com. The OCSP response contains out-of-date information. (Error code: sec_error_ocsp_old_response)
The page you are trying to view cannot be shown because the authenticity of the received data could not be verified.
Please contact the website owners to inform them of this problem.Direct link: https://s3.amazonaws.com/f.cl.ly/items/2O3M10153r1h3A1P3T3T/...
Apparently, the wide button where all the text is hidden sets Firefox as default browser. I accidentally clicked it when trying to give the prompt focus. Thankfully, OS X asked me to confirm that I wanted to do this.
I'm not sure what's worse, purposefully tricking me into setting default browser by hiding the text of the prompt, or starting with such a buggy first-run experience!
The biggest feature for me was that it can run alongside the normal version of Firefox so I could tinker with it without disrupting day-to-day workflow.
Not like it's a big deal or anything, but it still shows a warning when you enter about:config even though it's targeted at devs :)
If that version is going to be the same version that regular users get 12 weeks from now, it's hardly "tailored" for developers.
Though I'm assuming getting rid of "unstable beta" marker gets a whole new group of unknowing beta testers.
Update: The link for Download at the bottom of the page worked for me.
Which is really annoying and the main reason I stick with firebug.
(just a thought)
Have been using the Allow-Control-Allow-Origin: * extension[1] on Chrome, while not perfect, is tolerable.
1. https://chrome.google.com/webstore/detail/allow-control-allo...
<insert image of Walter>
Who doesn't get how Dev Edition is different to normal firefox?
(Also, it has a darker and more compact visual theme by default that echoes that of the built-in devtools.)
Edit: I'm serious, here's an example https://vwo.com/blog/ab-test-case-study-how-two-magical-word...
/me Loves Chrome Dev tools, anything less is a waste of time...
The response is standard too... Electrolysis. Wait for it.
