Firefox Developer Tools: Break on DOM Events, Edit as HTML, Codemirror(hacks.mozilla.org)
hacks.mozilla.org
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/
11 comments
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?
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?
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).
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.
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.
Doesn't the new Android Studio have all that sort of live editing built in?
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!
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
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!
https://bugzilla.mozilla.org/show_bug.cgi?id=890402
I linked to this comment in that bug, thanks for the feedback!
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!
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.
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
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
It used to be called Bespin: http://blog.mozilla.org/labs/2009/02/introducing-bespin/