The main reason I don't switch to Firefox's dev tools is whenever i write a css attribute in the inspector, Chrome will present me a nice list of possible values I can choose, while Firefox just sits there patiently until I start writing. I don't always remember all the values and this really breaks my workflow.
FWIW, you have pretty fine grained control over what appears in the console (CSS, JS, Logs, etc.) as well as the level of logging (Error, Warning, Log)... see the dropdown buttons at the top of the console tab :)
True, but default choice is SPAM WITH CSS REFLOWS, YAY!
EDIT: Another thing, there needs to be a font shape difference between input and output. Basically, you should be able to tell if something is input or output without looking into the arrows to the side.
Actually I don't think it does for values. I just tried to 'change' the value of a font CSS property on Hacker News from Vedrana to something else and it didn't offer any font names.
What do you expect? Should it show every possible font you can type into the property? Just the fonts installed on your machine that other people may not have?
Just any property that has a preset number of values show up as options as you type. The difference is that Chrome shows a dropdown list while with Firefox you have to sort of remember the values as it does an autocomplete. I see no reason Firefox couldn't offer the dropdown since it clearly knows the possible values.
By the way, I tried the same font thing in Chrome and it responded the same way, no font list. You can see a similar behavior with color, for the value it shows possible colors by name. Start your color with # and suddenly there's no options. If there are too many possibilities to list it doesn't list anything.
They've added a number of those things, they just are just coming down the pipeline. Check out Aurora for some of these things, such as more breakpoint options and reformatting JS.
I'm trying to move from firebug to the native firefox development tools. The one thing I miss is the network tab doesn't render formatted html or datastuctures, it just text dumps (firebug give you the option and shows json, html, formatted). That and it seems the network tool turns on when you click the tab, but no way to turn off.
You should grab our Nightly build then :) We have parsed responses in the Network tab, I just tried HTML and JSON for you and both show as expected. See http://imgur.com/OHO4lFH and get Nightly at http://nightly.mozilla.org/.
I second that. Also, in Firebug, you can see the padding clearly (it's in a different color) when you hover over an element with the inspector. This is not the case in the Firefox Development Tools. It's still possible to get the same information from the Box Model view but it's just nice to be able to see it visually on the page.
I recently tried switching to Firefox at the place I'm currently freelancing at. Not too much front-end stuff going on, just a bit of CSS here and a bit of JS there.
The two little things that annoyed me most:
When inspecting an element, the element is per default collapsed (i.e. it's children are not shown). Often, I want to see the children as well - one more unnecessary click. This may be a good design decision if the tools are running on a laptop screen inside the main browser window, but I'm using two monitors and the tools take a whole screen.
Related, my main monitor has a terrible (=no) contrast between white and light gray if viewed from some angles. Often, if I inspect an element, I'm missing the highlight (light gray on white)... Yep, I should probably play with the monitor settings, although FF seems to be the only tool I have this problem with.
These are obviously not big issues and I don't miss the Chrome tools too much, so I'm sticking with FF. Keep up the good work!
I just tried inspecting an element in Chrome and it didn't automatically expand to show the children. That's the behavior I would have expected. Interesting that it behaves differently for you. Are you sure you're not inspecting the child, thinking you are inspecting the parent, which would appear to be expanded in that case?
Firefox offers a dark theme in the inspector's settings, maybe try that. I personally don't like it though.
Hrm. Maybe the difference I'm noticing is that if I click on text, Chrome will expand the surrounding tag (e.g. <p> or <a>) while FF will keep it closed.
I haven't done any side-by-side testing of Chrome and FF (and am currently not working), so I can't reproduce the issue now.
I like FF dev tools a lot, yet there is some stuff there that could be better:
- no call stack(?)
- breakpoints are a bit of a hit or miss, especially when callbacks are involved.
- http request monitoring is a bit messy - you see the request in the console, you can click on them, but the resulting dialog box only offers basic info, without even an option to go to the clicked url directly. In network panel the functionality is completely different for some reason. Fortunately mostly fine, but one irritating thing is that response view is so little and you cannot make it much wider.
But anyway, they're improving greatly, only a couple of months back you couldn't even think about not using Firebug in FF. So kudos to them for all the hard work.
There are breadcrumbs across the debugger's toolbar for quick always available access, or there is a tab to display the whole stack at once next to the sources tab on the left sidebar.
breakpoints are a bit of a hit or miss, especially when callbacks are involved.
To those who are color blind, how do you overcome color blind in software? Do you guys have software to help changing color on your computer? Should and will Firefox address that kind of problem?
Nightly defaults to the dark theme. I like old white theme. https://bugzilla.mozilla.org/show_bug.cgi?id=947242 why do we choose the dark theme over the white theme? I am not color blind but I use computer typically between 12-18 hours. Who made that decision? Can we make the white theme default again? I honestly don't think the dark theme helps reading. If anything, the dark theme hurts me viewing.
I'm not severely colorblind, but I'm red/green colorblind, and I hope I can help you out.
I don't use software to change color on my computer--there's nothing that I can change it to that will look more like whatever y'all see it as--I just simply can't see that color. I've lived with my colorblindness for three decades, so it's not like I'm trying to get used to it still. Sometimes the contrast is off on things, and I'll try to correct it manually, but there's nothing that I can do to make me see a color that's physically impossible for me to discern.
I rely on hex codes a lot, and I do my best to develop UIs that I can navigate with ease, and won't hurt others that are colorblind. For example, whenever I see red (255,0,0) text on blue (0,0,255), or vice versa, it physically hurts my eyes.
Really the only thing that reminds me I'm colorblindness day-to-day is folding laundry. My wife color-coordinates her clothes in her closet, so when I hang them up, it's a crap shoot. She often comes to me with a new article of clothing and says, "So I can find this later, what color do you think this is?" I'm usually wrong. C'est la vie.
Thanks for the comment, we always try and cater to as many of our users as possible. If you've used our tools, are there particular areas that cause more trouble than others? Do you find the dark or light theme easier to navigate (available in Nightly builds right now)? Would love to hear how our tools can be improved in this regard! Feel free to email me at darrin[at]mozilla.com if you'd rather not post on HN.
We (I am the author of that post) definitely care about color blind users and want to make our tools as usable for as many people as possible! Photoshop allows you to simulate varieties of color blindness and we keep that in mind. We are also trying to provide better visual cues, like shapes/textures rather than relying solely on colors. The network panel in nightly for example has shapes to indicate HTTP response codes.
Secondly, once you switch to the light theme (available in the options pane of nightly) it should persist for you, so it will become your "default".
Yes, the current dark theme does not have high enough contrast. There is a bug opened to switch to higher contrast colors in the dark theme here: https://bugzilla.mozilla.org/show_bug.cgi?id=971418 (and this will likely be uplifted to Aurora after landing).
FWIW, I'm colorblind and I use and prefer the dark theme.
Also, (warning this gets a little hand wavy) most pages on the web are light, so the light theme blends in. It is useful to have that contrast by default. Easier to make a distinction visually, and also "self xss" is deterred a little because the devtools are more obviously not part of facebook or whatever.
Last time I used the Firefox Developer Tools (on 27.0.1), it was unusably slow, caused the browser to crash several times, and very unintuitive even when it was working as (I assume) it was intended to. Are there improvements since v27?
Mozilla keeps changing the dev tools while the WebKit inspector remains fairly consistent. I no idea how to quantify it, but I just prefer the inspector, by a long shot. The networking tab and DOM inspector are brilliant.
The two reasons I have to stick with Chrome are Batarang for AngularJs debugging and chrome dev tools for NodeJs debugging with node-inspector. I haven't found any alternatives to these in Firefox, but would switch in a flash if there was.
When viewing a local .html file on your computer you should be able to edit the entire page as html and have the browser automatically update and you should be able to save to the file you opened.
Sorry, that is just a prototype for now! We are in the process of designing and planning the memory (and performance) tools, which should hopefully be available sometime this year.
> In response to this, Mozilla has designed a way to lock the device and offer guest access to apps predefined by the user with a green light to allow anyone to use them. All other apps will remain behind a password protected wall until the primary user changes the settings.
This is actually an idea I also came up with after the whole Miranda thing at the UK airport and finding out that the UK authorities can arrest you just for not revealing your devices' passwords, which I think is just insane, especially if you're just passing through UK. I don't know what the UK people are thinking, but they can't let anymore days pass by without repealing this awful law.
But I think I had a slightly better idea for this. Don't just make it obvious that there is another account on the phone. That doesn't improve things too much. Completely hide the accounts, and when you're asked for a password, it should open up the account according to the password you're using.
So if you pass through the UK airport, and they get your phone, and they get prompted for a password, you can just tell them the password to your "safe" account, and they would be none the wiser. That's what I've been hoping Google will implement for Android, but it would be nice if Mozilla did it to push this idea out there.
The second thing I wanted to say here, and also something I've been thinking about for even longer, but perhaps now is the perfect time to do it - Mozilla should create a Firefox to Firefox (or to Chrome extension) end-to-end encrypted chat app. This could all of the sudden bring true communications privacy to over 300 million people at once. It would be amazing!
The reason I say it's the perfect time to do it now, is because Open WhisperSystems has already done most of the work on creating a very secure asynchronous protocol that even works with groups, and they've said they're already working on a browser solution, anyway.
I'm sure they'll create a Firefox extension either way, but if you could work with them on this, help them out with the funds they dearly need, and then put the app front of center on Firefox as an integrated part of Firefox (you could even promote it as a secure communication solution to enterprise users), that would be fantastic.
The problem with end-to-end encryption right now is that it's barely seeing any support from small fundless groups, and none of the large platform owners seem to have any interest in deploying it. Mozilla is one such large platform owner, it's also an open source organization, and they seem to be working on improving their users' privacy. So I couldn't think of a better large platform to do this first.
Well, it's not quite a chat app... but Firefox Sync does do client-side encryption. Conceivably you could sync browsers with someone afar, and then communicate securely by adding bookmarks containing messages and waiting for the browser to sync them. :P
