5 ms·

DevTools Challenger for Firefox

205 points by bpierre 11y ago

ben174 11y ago
Took me a minute to realize this is developed for use with Firefox Developer Edition. If you're using Chrome or vanilla Firefox, you're going to be a bit lost when trying to follow the tutorial.
- dang 11y ago
  Ok, let's add that to the title.
  - KingMob 11y ago
    It works with regular Firefox, though, I just did it. Maybe OP needs to update their Firefox?
    - dang 11y ago
      Ok, let's take that out of the title.
- KingMob 11y ago
  That's not correct, though, I went through the whole thing just fine with regular Firefox.
  - hardwaresofton 11y ago
    Same here -- running regular FF here
- ilikepi 11y ago
  Well, it seems like it was created for the launch of Developer Edition v44, so that would have been when the stable release was v43. The current stable release is v44, so in theory everything in this demo/tutorial should work with current stable. I found a couple things didn't, though. I couldn't get the CSS eyedropper tool to apply the color I clicked on; however, manually entering the hex code for the new color triggered the completion event. I also couldn't get the event to fire in the second-to-last task. Regardless, it's a neat little distraction to do while eating lunch. edit: clarification
  - KingMob 11y ago
    I noticed a weird behavior with the eyedropper but it did work, partially. For me, it worked when the inspector was side-docked in the window, but not when it was free-floating.
  - TD-Linux 11y ago
    No, Developer Edition version 44 releases today. Stable will be version 42 after the release.
    - ilikepi 11y ago
      Yep, my mistake. Erk...
  - nightpool 11y ago
    Developer edition is 2 versions behind stable, not one. (it's the old auora, rebranded). firefox 42 is released to stable today. nevertheless, I do see some of the new animation controls on firefox 42.
- rootkea 11y ago
  I simply don't understand why to have separate Developer Edition instead of making available the devtools in stable FF only? Easy to maintain.
  - karlshea 11y ago
    Marketing. Chrome DevTools has a much bigger market share. Plus obviously you're not a real hacker unless your software is light-on-black.
  - auscompgeek 11y ago
    Firefox's devtools are available in all maintained versions of Firefox. Why would Mozilla restrict devtools to releases? How would people test the devtools in that case?
derek 11y ago
tl;dr This is a series of interactive demonstrations showing off some of Firefox Developer Edition's developer console features, with emphasis on CSS animation.
- callahad 11y ago
  Yep! If you're rather read about the features, we've got a blog post up at https://hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more/ https://hacks.mozilla.org/2015/11/developer-edition-44-creat... The DevTools Challenger page is meant to be a more hands-on set of exercises to familiarize people with the new / improved animation tools. You should be able to complete it in regular Firefox (or even Chrome), but the experience will be a bit nicer in DevEdition.
  - lucideer 11y ago
    The Challenger site seems to consistently crash Firefox if you have https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ https://addons.mozilla.org/en-US/firefox/addon/react-devtool... installed. I don't know if React was used to make the site? Not too sure if is this something that should be reported to Mozilla or to Facebook.
    - callahad 11y ago
      An add-on crashing Firefox is definitely a bug on our end, even if it's also a bug in the add-on. :) I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1221273 https://bugzilla.mozilla.org/show_bug.cgi?id=1221273 to track this, but I can't reproduce the crash myself. The page doesn't use React, FWIW. If you could stop by that bug and leave a comment with your OS, Firefox version, and build info from about:support, I'd appreciate it.
      - spicyj 11y ago
        (If you find a bug in the React devtools, please report it on our GitHub page and we'll get it fixed.)
ck2 11y ago
I'm sure someone had fun making that but it is a really weird way to present something.
intrasight 11y ago
Problem is that if you scroll too fast, the text visibility animation doesn't kick in fast enough and you just see a blank black screen.
darkhorn 11y ago
Do we have official 64-bit stable version for Windows? https://download-installer.cdn.mozilla.net/pub/firefox/releases/42.0/win64/en-US/ https://download-installer.cdn.mozilla.net/pub/firefox/relea... Because I use 64-bit Windows and when it has updated to 42 it was still 32-bit version.
- callahad 11y ago
  We aren't officially supporting Win64 with Firefox 42, but we are producing builds which you can find at http://releases.mozilla.org/pub/firefox/releases/42.0/win64/ http://releases.mozilla.org/pub/firefox/releases/42.0/win64/ There are only a few bugs left before we can officially support Win64: https://bugzilla.mozilla.org/showdependencytree.cgi?id=558448&hide_resolved=1 https://bugzilla.mozilla.org/showdependencytree.cgi?id=55844...
fiatjaf 11y ago
The problem with Firefox Devtools is that they are slow.
ycosynot 11y ago
That's an awesome idea! To mix the knowledge, I learned some things. There needs be another for Chrome, and it'd teach all kind of tricks, and with an unknown reward at the end. This is good, this is artful teaching. Reminds me of the hacking challenges.
VOYD 11y ago
would be nice if it worked in something besides FF.
allthetime 11y ago
This is cool. And I just found out I had a reason to start using Firefox again.

205 points by bpierre 11y ago

Took me a minute to realize this is developed for use with Firefox Developer Edition. If you're using Chrome or vanilla Firefox, you're going to be a bit lost when trying to follow the tutorial.

dang 11y ago
Ok, let's add that to the title.
- KingMob 11y ago
  It works with regular Firefox, though, I just did it. Maybe OP needs to update their Firefox?
  - dang 11y ago
    Ok, let's take that out of the title.
KingMob 11y ago
That's not correct, though, I went through the whole thing just fine with regular Firefox.
- hardwaresofton 11y ago
  Same here -- running regular FF here
ilikepi 11y ago
Well, it seems like it was created for the launch of Developer Edition v44, so that would have been when the stable release was v43. The current stable release is v44, so in theory everything in this demo/tutorial should work with current stable. I found a couple things didn't, though. I couldn't get the CSS eyedropper tool to apply the color I clicked on; however, manually entering the hex code for the new color triggered the completion event. I also couldn't get the event to fire in the second-to-last task. Regardless, it's a neat little distraction to do while eating lunch. edit: clarification
- KingMob 11y ago
  I noticed a weird behavior with the eyedropper but it did work, partially. For me, it worked when the inspector was side-docked in the window, but not when it was free-floating.
- TD-Linux 11y ago
  No, Developer Edition version 44 releases today. Stable will be version 42 after the release.
  - ilikepi 11y ago
    Yep, my mistake. Erk...
- nightpool 11y ago
  Developer edition is 2 versions behind stable, not one. (it's the old auora, rebranded). firefox 42 is released to stable today. nevertheless, I do see some of the new animation controls on firefox 42.
rootkea 11y ago
I simply don't understand why to have separate Developer Edition instead of making available the devtools in stable FF only? Easy to maintain.
- karlshea 11y ago
  Marketing. Chrome DevTools has a much bigger market share. Plus obviously you're not a real hacker unless your software is light-on-black.
- auscompgeek 11y ago
  Firefox's devtools are available in all maintained versions of Firefox. Why would Mozilla restrict devtools to releases? How would people test the devtools in that case?

derek 11y ago

tl;dr This is a series of interactive demonstrations showing off some of Firefox Developer Edition's developer console features, with emphasis on CSS animation.

callahad 11y ago
Yep! If you're rather read about the features, we've got a blog post up at https://hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more/ https://hacks.mozilla.org/2015/11/developer-edition-44-creat... The DevTools Challenger page is meant to be a more hands-on set of exercises to familiarize people with the new / improved animation tools. You should be able to complete it in regular Firefox (or even Chrome), but the experience will be a bit nicer in DevEdition.
- lucideer 11y ago
  The Challenger site seems to consistently crash Firefox if you have https://addons.mozilla.org/en-US/firefox/addon/react-devtools/ https://addons.mozilla.org/en-US/firefox/addon/react-devtool... installed. I don't know if React was used to make the site? Not too sure if is this something that should be reported to Mozilla or to Facebook.
  - callahad 11y ago
    An add-on crashing Firefox is definitely a bug on our end, even if it's also a bug in the add-on. :) I've filed https://bugzilla.mozilla.org/show_bug.cgi?id=1221273 https://bugzilla.mozilla.org/show_bug.cgi?id=1221273 to track this, but I can't reproduce the crash myself. The page doesn't use React, FWIW. If you could stop by that bug and leave a comment with your OS, Firefox version, and build info from about:support, I'd appreciate it.
    - spicyj 11y ago
      (If you find a bug in the React devtools, please report it on our GitHub page and we'll get it fixed.)

ck2 11y ago

I'm sure someone had fun making that but it is a really weird way to present something.

intrasight 11y ago

Problem is that if you scroll too fast, the text visibility animation doesn't kick in fast enough and you just see a blank black screen.

darkhorn 11y ago

Do we have official 64-bit stable version for Windows? https://download-installer.cdn.mozilla.net/pub/firefox/releases/42.0/win64/en-US/ https://download-installer.cdn.mozilla.net/pub/firefox/relea... Because I use 64-bit Windows and when it has updated to 42 it was still 32-bit version.

callahad 11y ago
We aren't officially supporting Win64 with Firefox 42, but we are producing builds which you can find at http://releases.mozilla.org/pub/firefox/releases/42.0/win64/ http://releases.mozilla.org/pub/firefox/releases/42.0/win64/ There are only a few bugs left before we can officially support Win64: https://bugzilla.mozilla.org/showdependencytree.cgi?id=558448&hide_resolved=1 https://bugzilla.mozilla.org/showdependencytree.cgi?id=55844...

fiatjaf 11y ago

The problem with Firefox Devtools is that they are slow.

ycosynot 11y ago

That's an awesome idea! To mix the knowledge, I learned some things. There needs be another for Chrome, and it'd teach all kind of tricks, and with an unknown reward at the end. This is good, this is artful teaching. Reminds me of the hacking challenges.

VOYD 11y ago

would be nice if it worked in something besides FF.

allthetime 11y ago

This is cool. And I just found out I had a reason to start using Firefox again.