Firefox Developer Tools: Break on DOM Events, Edit as HTML, Codemirror | Hacker News Reader

Firefox Developer Tools: Break on DOM Events, Edit as HTML, Codemirror

hacks.mozilla.org

138 pointsrnyman28 comments

Interesting that they're using Codemirror instead of Ace (http://ace.c9.io), which is their progeny.

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

Codemirror is very polished and has great support. (It's also used in the Chrome debugger.)

CodeMirror is significantly easier to work with than Ace.

The author of CodeMirror (Marijn Haverbeke) is also a Mozilla contributor to some degree (and, early on, was employed by Mozilla Research on the Rust project).

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

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

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?

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

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.

I agree completely, but while my process on the Android side isn't as fast as web development, it is improving as testing tools get better. More and more my process is to edit some XML file, hit the go button, and wait 16 seconds for test results.

Doesn't the new Android Studio have all that sort of live editing built in?

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.

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

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.

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

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!

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.

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

See this screenshot:

http://note.io/HxSxmK

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.

There is the bug for nearly that exact thing:

https://bugzilla.mozilla.org/show_bug.cgi?id=890402

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

ESC key to close that sidebar in the console.

Works - thanks for the tip. A simple [x] icon (perhaps with a "click ESC to close" tooltip) will also be nice, as there's currently no visual indication on how to close it.

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!

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.

This is nice... Great work mozilla

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?

Well, I know you can inject jQuery into any web page using the “jQuerify” button in FireQuery (http://firequery.binaryage.com/). But I’ve never even heard of XQuery before now. According to 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/ ?

You can use $x('//some/xpath') for testing XPath's which can be very useful, but not sure about XQuery, never even heard about it being used before.

Very interesting

Reply on news.ycombinator.com