
New Developer Tools Features in Firefox 34 - xOnic
https://hacks.mozilla.org/2014/09/webide-storage-inspector-jquery-events-iframe-switcher-more-firefox-developer-tools-episode-34/
======
azinman2
Ok debug logging into a table is probably one of the best improvements to
logging I've seen in a long time. I kinda want this in every programming
language. There are so many useful things about it, especially the ability to
then randomly sort it at will!

~~~
onion2k
It's been available in Chrome for a year and a half..
[https://plus.google.com/u/0/+AddyOsmani/posts/PmTC5wwJVEc](https://plus.google.com/u/0/+AddyOsmani/posts/PmTC5wwJVEc)
..this is actually one of the things that's most annoying about web dev - each
browser has some really cool stuff for debugging, but none of them has
everything. The Firefox team are addressing that though -
[https://hacks.mozilla.org/2014/09/firefox-tools-
adapter/](https://hacks.mozilla.org/2014/09/firefox-tools-adapter/) \- Firefox
nightly can connect to Chrome's debugging interface so you can use Firefox's
toolset to debug a page in Chrome. Which is insanely cool.

~~~
LukeB_UK
I was under the impression that it only connects to the debugging interface on
chrome for android. Has this changed?

~~~
mbrubeck
Yes, that's correct: The "Firefox Tools Adapter" targets Chrome for Android
and Safari for iOS:

[https://developer.mozilla.org/en-
US/docs/Tools/Firefox_Tools...](https://developer.mozilla.org/en-
US/docs/Tools/Firefox_Tools_Adapter)

------
ck2
I'm more excited about this coming in the next version(s)

[https://wiki.mozilla.org/Electrolysis](https://wiki.mozilla.org/Electrolysis)

[http://arewee10syet.com/](http://arewee10syet.com/)

Back in August they were debating enabling by default in November but it is
probably not ready for prime-time yet

[https://wiki.mozilla.org/Electrolysis/Meetings/2014-08-21](https://wiki.mozilla.org/Electrolysis/Meetings/2014-08-21)

~~~
sergiosgc
If you're running the nightly channel, you already get a prompt introducing
e10s and allowing you to enable it.

~~~
josteink
You can enable it in Aurora, but so far I've found way too much things to be
broken for it to be useful.

Especially things like cookie-handling not working 100% and breaking login on
lots of sites (like reddit, google, etc) makes enabling it a no-go, or at
least did when I tried it a few weeks ago.

~~~
cpeterso
You do not want to enable e10s for Firefox Aurora, Beta, or release. The
Nightly release channel has many critical bug fixes that are not in the other
release channels. :)

------
bshimmin
The jQuery events inspector looks super useful.

I keep meaning to give Firefox another try - after ditching it for Safari, and
then Chrome, some years ago - but I never quite find the motivation.

~~~
monk_e_boy
Is there a tool for chome that also does this?

~~~
tonyhb
Yes - it's called jQuery Audit, and it's super helpful when figuring out
whether evens are bound, if there are memory leaks etc.

[https://chrome.google.com/webstore/detail/jquery-
audit/dhhnp...](https://chrome.google.com/webstore/detail/jquery-
audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg?hl=en-US)

------
kolev
This is great! Firefox Aurora has been my main browser for over 6 months and
now these great improvements will keep the status quo for me!

------
diafygi
Is the bug that treats re-requests source files when opening the debugger
fixed yet?

[https://bugzilla.mozilla.org/show_bug.cgi?id=156435#c52](https://bugzilla.mozilla.org/show_bug.cgi?id=156435#c52)

~~~
leeoniya
also this strangeness while using dev-tools:

[https://bugzilla.mozilla.org/show_bug.cgi?id=771043](https://bugzilla.mozilla.org/show_bug.cgi?id=771043)

------
frankzander
What about firebug? Who long will firebug live with sight of the developer
tools becomming better and better?

------
genericacct
I was excited about the WebIDE but apparently it's only for firefox OS apps.
Is there any way of linking a webIDE to devTools? I'd pay for a tool that lets
me click on a jsconsole error message and then takes me straight to the editor
at that line and column on the original file.

~~~
paulrouget
That's the plan. Work in progress.

~~~
indubitably
This sounds tremendous. It would be great for educational contexts — a
development environment that doesn’t require anything more than installing a
browser…

------
Tloewald
A ton of very compelling stuff. I hope it all works nicely; I have found the
Firefox dev tools to be weirdly clunky of late and keep going back to Chrome,
but this may drag me back.

~~~
lucb1e
Hmm, I never found them to be clunky. I prefer them over Chrome's, but perhaps
that's just because I'm used to them? I guess if you used Chrome for months,
then read about Firefox' features and try them, they will always feel off.

------
Kiro
Finally a way to easily inspect and delete cookies on the run. I remember
getting voted down here for complaining about it previously.

EDIT: Ok, read-only. Too bad but at least they have it planned.

~~~
elwell
[https://chrome.google.com/webstore/detail/editthiscookie/fng...](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en)

~~~
Kiro
It's for Chrome and Chrome already has the features I want built-in. My point
is that Firefox is lacking these.

------
pdknsk
The only feature in Firefox I miss in Chrome is the view that shows the
stacked layers of a website. I dismissed it when I first tried, but it can be
surprisingly useful. It's no reason to make me switch to Firefox though.

[https://developer.mozilla.org/docs/Tools/3D_View](https://developer.mozilla.org/docs/Tools/3D_View)

~~~
LukeB_UK
You can get an extension for chrome that does this:
[https://chrome.google.com/webstore/detail/3d-view-for-
webpag...](https://chrome.google.com/webstore/detail/3d-view-for-
webpages/noflnemoniodcoagmaapcdlmeljohdnm/reviews?hl=en)

Although the reviews say it doesn't work, I tried it and it works fine.

~~~
mikeratcliffe
hehe... read the add-on comments.

------
dubcanada
Does anyone know if there is a way to theme the developer tools? Like you can
do in Chrome?

Like [https://chrome.google.com/webstore/detail/devtools-theme-
zer...](https://chrome.google.com/webstore/detail/devtools-theme-zero-
dark/bomhdjeadceaggdgfoefmpeafkjhegbo)

~~~
mbrubeck
The Firefox devtools have two themes built in ("dark theme" and "light theme")
and can also be themed with CSS by Firefox extensions (just like all parts of
the Firefox UI).

------
allan_s
something that got "broken" for me in recent version of firefox (I think
starting with 32) is that doing a console.log of a very long string does not
display the whole string anymore

i.e it will print

"a looooooong string [..]" (with the [..])

same if i try to observe the variable in the debugger. And I cant find a way
to get the full string in anyway, I understand for a lot things you dont want
to print accidentally a 200k characters longs string as it will use a lot of
memory for maybe nothing, but in my current use case (getting long xml
documents to copy paste them in a beautifier / send to colleague as
attachments for bug report etc.) it breaks my workflow (I'm posting here
because google does not seems very talkative about this issue)

~~~
kbrosnan
This is
[https://bugzilla.mozilla.org/show_bug.cgi?id=1027997](https://bugzilla.mozilla.org/show_bug.cgi?id=1027997)

'workaround…is to click the value to edit it and then copy and paste somewhere
else'

~~~
Excavator
I think allan_s is talking about the value as displayed in the console proper,
which can be expanded by clicking the "[…]" part:

[http://i.imgur.com/qgBXdGZ.png](http://i.imgur.com/qgBXdGZ.png)

Tested by doing console.log(('test').repeat(100000))

~~~
allan_s
thank you, actually I didn't thought about clicking on it, maybe making [...]
appears in an other color ?

also the "edit and click value" on debugger was not working for me (also
"cutting" the value to a certain limit)

------
leeoniya
is there any way of making the inspector show simple textContent inline with
the nodes without having to unfold them? i keep going back to Firebug for
this.

    
    
        <em>test</em>
    

rather than

    
    
        <em>
           test
        </em>

~~~
msujaws
I filed
[https://bugzilla.mozilla.org/show_bug.cgi?id=1071067](https://bugzilla.mozilla.org/show_bug.cgi?id=1071067)
to get this issue tracked. I agree that we could do a better job here, as the
unfolded view takes up 3x the vertical space compared to the inline view.

~~~
leeoniya
thanks, vote added.

------
geekam
Finally, the storage manipulation has arrived. Now I can get rid of Firebug
completely.

------
gioele
How big are the developer tools compared to the rest of Firefox? 5% of the
total size? 10%?

Can't the more sophisticated tools be split into a separate extension, leaving
only some basic things in the distributed package?

~~~
lucb1e
As long as they don't impose any load while you're browsing without the tools
opened, I see no reason to. And Chrome also includes them.

~~~
agapos
Dev Tools load on demand and do not affect casual browsing.

------
arenaninja
Sweet, sweet console.table()! I've never been happy with the way that
console.log works for objects/arrays, I'm eager to use this one

------
iSnow
Oh, this is neat. This is probably the first time the built-in debugging tools
make me think about ditching FireBug.

------
ux-app
great to see the iframe switcher. Was such a pain to manually switch the
context between top and child frames.

------
vvh
good list of tools, thanks!

------
Gonzih
Sourcemaps?

~~~
mbrubeck
The Firefox debugger tool has supported sourcemaps for over a year:
[https://hacks.mozilla.org/2013/05/compiling-to-javascript-
an...](https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-
debugging-with-source-maps/)

------
arahaya
&nbsp;

