
Firefox Developer Tools: Break on DOM Events, Edit as HTML, Codemirror - rnyman
https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/
======
nbashaw
Interesting that they're using Codemirror instead of Ace
([http://ace.c9.io](http://ace.c9.io)), which is their progeny.

It used to be called Bespin:
[http://blog.mozilla.org/labs/2009/02/introducing-
bespin/](http://blog.mozilla.org/labs/2009/02/introducing-bespin/)

~~~
ensignavenger
I thought that was an interesting choice for Mozilla, too. Here is what
appears to be the bug report which contains their debate on whether or not to
use codemirror.

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

I would be curious to know if Mozilla is still actively involved with Ace
development at this point?

------
deanclatworthy
Great work Mozilla team. You're seriously making me consider switching back to
FF for development. Is this effort to improve the FF dev tools an ongoing
effort to quickly add these features, or can we expect the pace to slow down
in the coming months?

~~~
campd
The team here is dedicated to developer tools full-time. We have no intention
of slowing down.

------
Touche
These additions all look great. I recently was working a bit on an Android app
(not an Android developer, was filling in for someone on vacation) and it made
me realize how good web developers have it. Part of my normal development
process is to edit HTML, make CSS changes, and some times even JS changes at
run time and observe the results. With Android anyways the cycle was to edit
some XML file, reinstall the application, navigate to where that activity is,
observe the changes, scratch head why result wasn't as expected.

~~~
farnsworth
Yeah, but I'd argue that Android XML layouts are a heck of a lot easier to
work with than CSS. They have the benefit of being used for exactly the
purpose they were originally designed for.

~~~
minikomi
Have to agree. Takes some getting used to, but I find -for simple things -
they have much more consistent behavior even across android versions.

------
eli
Can I write Firefox addons that extend Developer Tools functionality? I had
some ideas for extending Firebug for specific use cases, but maybe the
official dev tools are a better bet.

~~~
rnyman
Yes, you can extend the Developer Tools. More information at
[https://developer.mozilla.org/en-
US/docs/Tools/DevToolsAPI](https://developer.mozilla.org/en-
US/docs/Tools/DevToolsAPI) & [https://github.com/victorporof/Restartless-
Template](https://github.com/victorporof/Restartless-Template)

------
shiloa
I love firefox and use it daily for my work. The only time I switch to Chrome
is when I use console.log(<some object or DOM node>) and get an [Object
object] printed out. Sure I can click on it and get a breakdown (still haven't
figured out how to close that view other than closing and re-opening the dev
tools pane, BTW), but Chrome handles it much better by logging out a detailed,
interactive object.

Still, great job to the FF team and keep up the good work!

~~~
RussianCow
Firebug does it in a way similar to Chrome, as well. This is really my last
withstanding gripe with the Firefox developer tools; if they make logging
objects more useful, I will drop Firebug in a heartbeat.

~~~
canuckistani
You can use console.dir to get an inline browse-able object, does that help?

See this screenshot:

[http://note.io/HxSxmK](http://note.io/HxSxmK)

~~~
RussianCow
It helps, but the key feature of Firebug for me in this regard is that, if the
object is an HTML element, I can click on it and it will take me to that
element in the HTML view. The built-in tools don't have this yet.

~~~
canuckistani
There is the bug for nearly that exact thing:

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

I linked to this comment in that bug, thanks for the feedback!

------
purephase
Excited about some of these changes. I've been debating moving back to FF for
my primary dev browser for some time and these look like the changes that will
make me do it.

Thanks Mozilla!

------
nizmow
The tools get better every update. Came in here to complain that it wasn't
obvious / possible to copy URLs from inside the network inspector, but thought
I'd check the latest version first... and what do you know, there it is.

I don't even use Chrome at all anymore.

------
parthoghosh86
This is nice... Great work mozilla

------
baltcode
Sometimes I want to use XQuery in the web console for pages that don't use
XQuery. Does anybody know how to dynamically include XQuery on loaded pages to
use with the web console?

~~~
roryokane
Well, I know you can inject _jQuery_ into any web page using the “jQuerify”
button in FireQuery
([http://firequery.binaryage.com/](http://firequery.binaryage.com/)). But I’ve
never even heard of XQuery before now. According to
[https://en.wikipedia.org/wiki/XQuery](https://en.wikipedia.org/wiki/XQuery),
it seems to be a standard language, rather than a JavaScript library. What
library do you use? [http://www.xqib.org/](http://www.xqib.org/) ?

------
yofass
Very interesting

