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

https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/

by rnyman • 13 years ago

138 28 13 years ago

hacks.mozilla.org

eli• 13 years ago

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• 13 years ago

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

baltcode• 13 years ago

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• 13 years ago

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/ ?

aeontech• 13 years ago

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.

deanclatworthy• 13 years ago

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• 13 years ago

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

nbashaw• 13 years ago

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/

skybrian• 13 years ago

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

ibdknox• 13 years ago

CodeMirror is significantly easier to work with than Ace.

kibwen• 13 years ago

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).

ensignavenger• 13 years ago

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?

shiloa2• 13 years ago

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!

RussianCow2• 13 years ago

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.

canuckistani2• 13 years ago

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

See this screenshot:

http://note.io/HxSxmK

robcee• 13 years ago

ESC key to close that sidebar in the console.

shiloa2• 13 years ago

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.

Touche• 13 years ago

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.

ZoFreX• 13 years ago

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.

nevster• 13 years ago

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

farnsworth• 13 years ago

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• 13 years ago

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

parthoghosh86• 13 years ago

This is nice... Great work mozilla

purephase• 13 years ago

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• 13 years ago

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.

yofass• 13 years ago

Very interesting

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

Related Stories