Firefox Developer Tools – Editable box model, Sublime Text keys

https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/

by rnyman • 12 years ago

420 114 12 years ago

hacks.mozilla.org

Sir_Cmpwn• 12 years ago

The add-on debugger is the big part of this update. Add-on dev is a pain in the ass on Firefox, and I hope this helps.

Spittie2• 12 years ago

I agree. I don't have much experience, but writing an addon for Firefox was a pain. When debugging, it's a constant "cfx run", read cryptic output, close browser, try to fix, rinse and repeat.

Compare it with Chrome where you can see the error, it show where the problem is and you can even edit/patch the addon live without having to restart the browser.

math0ne• 12 years ago

Really nice update, I love the little functionality tweaks like the color picker. This is the kind of thing that will get developers to choose one platform over the other for day to day dev work.

james33• 12 years ago

Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.

simlevesque• 12 years ago

You can use Aurora right now : http://www.mozilla.org/en-US/firefox/aurora/

givan• 12 years ago

Firebug is still unbeatable, chrome dev has a lot to catch up.

diggan• 12 years ago

Long time ago I used Firebug. What do you see is better in Firebug than Chrome Devtools?

dubcanada2• 12 years ago

I can't stand firebug, the UI is a complete turn off for me. The Chrome dev tools (any any webkit for that matter) just look and function better for what I spend 99% of my time in dev tools doing, tweaking CSS.

mundanevoice2• 12 years ago

Same here. I still feel Firefox devtools are not innovating fast enough. Chrome workspaces and a lot of other useful features are just not present in Firefox. I feel that's one of the major reason I could never migrated to Firefox professionally. I am also quite impressed with IE 10 & 11 devtools. It is really useful and has clean UI and UX.

In short I could say that: Chrome Devtools > Firebug > IE devtools > Firefox devtools

mixedbit2• 12 years ago

I'm a long time Firefox fan, but very recently I played for the first time with IE 11 memory profiler and I must say, this is the best profiler out there.

cbaleanu2• 12 years ago

The window title for IE 10&11 devtools is for some reason named "F12" on my windows 7 machine.

Maybe it's just me but I find this annoying, feels a little unprofessional.

DatBear• 12 years ago

I think that Firefox has lagged behind because of Firebug. When there is already a way for developers to do things, why invent your own, unless you can make it better?

ep1034• 12 years ago

I'll use chrome devtools the day they add multiline console support. Really? In 2014, and you want me to shift-enter 200 lines of code?

angersock• 12 years ago

This is probably a really dumb question, but is there any way to get Firefox to limit console output to just the current window? I've had a tab open (Grooveshark, in this case) leak messages over into what I'm actually trying to debug, and it's pretty annoying.

Spittie2• 12 years ago

As far as I know, the console embedded in the page (ctrl+shift+k) show events only from that page, while the browser console (ctrl+shift+j) show events from all the tabs.

I don't know if there is a way to decide which tabs get logged in the browser console.

dpcan• 12 years ago

Arrrg.

I use Chrome for everything but I don't like dev tools and consistently use Firefox because it works so much better for me.

I've been fearing for a long time now that Mozilla would just start doing whatever Chrome is doing.

When it comes to updating dev tools, I wish everything new were an option. When you change a "tool" you change how I "work", and bumps in my work flow just slow me down.

nawitus• 12 years ago

Looks cool. Still waiting for the localStorage inspector. I don't know how one can live without it..

dannysu• 12 years ago

I missed it coming from Chrome, but you can see what's stored in localStorage for a particular site by bringing up the console and typing localStorage just like how a web app can access it.

Don't know a way to see localStorage for everything like in Chrome, but I don't miss it anymore.

jamii• 12 years ago

https://addons.mozilla.org/en-US/firefox/addon/firestorage-p...

agapos2• 12 years ago

That's a helluva lot of improvements they shipped in v31, I am impressed.

jolt2• 12 years ago

Is it only on Mac it shows the actual status codes on the network tab? On Windows i have to hover the little icon in the first column, which is really annoying when I'm trying to figure out if my caching is working correctly.

mnemonik6• 12 years ago

Sounds like your windows copy of firefox might be the main release channel. The numeric status codes have been in since 30 (currently Beta). You can hop on Aurora (or Beta, or Nightly, but Aurora is generally best for web devs), or just wait about 6 weeks for the next uplift.

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

pbhjpbhj• 12 years ago

Is there an Ubuntu repo for Aurora that I'm missing or do I need to use the tarball.

jolt2• 12 years ago

I see. Thank you!

enscr• 12 years ago

The editable box model & color picker are very useful. I wonder if the editor would one day catch up so that you do your development in the browser itself.

mrspeaker• 12 years ago

I made my first contribution to Firefox the other day... I downloaded the source on a whim, realised I could build and run it - so went to the bug tracker.

There was a bug with the box model editor that if the labels were long (such as "auto") then they would overlap the borders. I made it so long labels will rotate 90 degrees (try it out, change the outside margin to "auto").

I'm pretty stoked that some code I wrote is in Firefox - seeing an advertised feature that I (in a small way) contributed to is pretty exciting!

thousande2• 12 years ago

Same. Credit to the team for great support and follow-ups.

Some starting points for those who wants to contribute:

* Quick start for devtools developers: https://wiki.mozilla.org/DevTools/Hacking * More general info: http://codefirefox.com/

* bugs/tasks flagged as "mentored" is a good way to introduce your self to the code. Devtools mentored tasks:

https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=compone...

/Contributor

tbassetto• 12 years ago

Any chance of getting the bug ID? I am genuinely curious about the the changes made and the review process for such a bug :)

Dirlewanger• 12 years ago

Oh look, a bunch of updates to catch up to Chrome's tools again.

aroman• 12 years ago

Unless I'm sorely mistaken, that's very wrong.

Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support?

Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink), but I think most of these features are leapfrogging Chrome's capabilities, not only attaining parity.

magicalist2• 12 years ago

Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support?

Yes, No, Yes (both get multi-cursor from CodeMirror 4)

Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink)

small correction: that predates Blink[1] so there's wasn't a distinction between WebKit's Web Inspector and Chrome DevTools back then.

Personally my favorite thing unique to Firefox DevTools is their built-in WebGL debugger, which seems to have gotten a lot more attention from them than Chrome's experimental Canvas Inspection which has some similar aspects. Supporting it helps probably .1% of the number of developers needing better CSS tools and whatnot, so I understand the prioritization, but it's still an awesome tool for those of us who do need it.

[1] https://bugs.webkit.org/show_bug.cgi?id=107276

presootto• 12 years ago

Firefox is Free software, Chrome is proprietary and made by the company that employs this guy: http://mostlysignssomeportents.tumblr.com/post/84829703425/r...

I know what I'd choose.

quarterto4• 12 years ago

Chromium is open source.

dubcanada2• 12 years ago

Chrome is not proprietary. It's just a fork of WebKit which is entirely open source. Chromium/blink are both open source.

pavanky• 12 years ago

Chrome is proprietary Use chromium instead.
the company that employs this guy: http://mostlysignssomeportents.tumblr.com/post/84829703425/r

Mozilla employs someone who is (was?) anti-gay marriage.

tracker1• 12 years ago

I was surprised when I first saw Copy as cURL in Chrome... and very happy to see it here. It makes for a great base test case... now if the api client tools would only take one of these curl commands and set the settings for a request.

I think it's almost funny, but a cURL command line could become the common interface for many tools.

canadev• 12 years ago

Very happy to see Copy as cURL. Just wrote a crappy script to make copy-pasted cookies from the request window into curl parameters two days ago.

I am sure I will use this quite frequently.

__david__• 12 years ago

There's a really nice add-on for Firefox called "cliget" that adds a "copy as curl" (or wget) menu item when you right click any link in the browser. I find it heavenly when I need to download something that needs authentication to a remote server.

anilshanbhag• 12 years ago

Most of the new tools are tiny feature additions eg: the box model editing, copy as curl but will save ton of dev time wasted in doing it the old way.

FF for the win :D

quarterto4• 12 years ago

The main thing that drove me back to Chrome for web dev was the performance. Firefox would hang for ~30 seconds trying to load source maps for our 150+ modules. Since it's single-threaded, this locks up the entire UI every time our app loads with dev tools open. And if it pauses on an exception during this 30 seconds, good luck trying to do anything for the next five minutes.

mnemonik6• 12 years ago

We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)

quarterto4• 12 years ago

Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load.

Is there an existing bug I can chime in on or should I report a new one?

sergiotapia• 12 years ago

I had the same performance issues and the latest stable version of Firefox resolved every bit of slowness I was experiencing. The totally surprised me, it felt like a different browser.

abvdasker• 12 years ago

That "copy as cURL" thing is absolutely brilliant.

sampk• 12 years ago

Yeah Chrome Dev Tools have supported that since a while now, found it very useful.

thousande2• 12 years ago

Chrome and Firebug has this too.

diegocr• 12 years ago

An awesome list of enhancements. Something not mentioned there is that the window.onerror function has a new "error obj" parameter with the stacktrace, which i found quite handy.

usaphp• 12 years ago

Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.

pytrin• 12 years ago

Firebug gives you the option to toggle all pseudo states for an element and edit its CSS. IMO Firebug and Chrome's dev tools still lag behind Firebug's.

Excavator2• 12 years ago

This might be Nightly only. But in the Inspector pane of the Firefox dev tools you can right-click elements to set their focus/active/hover states. Doing so will also update the pane to the right showing any state specific rules that now applies.

mnemonik6• 12 years ago

We have it in the sidebar but not the tree. Its coming though: https://bugzilla.mozilla.org/show_bug.cgi?id=920141

mundanevoice2• 12 years ago

Do you see the live editing of JS and on save they getting executed in a VM? I think it is pretty rad and not present in FF devtools at all. Please correct me if I am wrong.

Garbage• 12 years ago

That's good to hear. I have been using Firefox Nightly since quite a few months now. It's impressive. :)

tieTYT• 12 years ago

Console stack traces
console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made

But what about if I use `new Error("something");` ? That's how I let errors bubble up in my app. Am I doing it wrong? According to this, that won't show a stack trace.

adrusi• 12 years ago

Well that already shows a stack trace. it's not mentioned here because it's not a new feature.

yawz• 12 years ago

Great stuff! Copy as cURL is very cool.

Dean_M• 12 years ago

The new firefox dev tools are sexy af

Cymen• 12 years ago

Is there a way to get the same type of JavaScript decompressor as present in Google Chrome? I know there is a plugin for this but it doesn't do the most important: when you decompress the JavaScript, the console file:line details match the decompressed code. So you can click to jump to legible JavaScript when debugging.

hendry• 12 years ago

Would be nice if there was a sane way to take a screenshot. https://bbs.archlinux.org/viewtopic.php?pid=1412466

agapos2• 12 years ago

ScreenGrab (fixed) add-on: https://addons.mozilla.org/hu/firefox/addon/screengrab-fix-v...

Developer toolbar 'screenshot' command: http://www.ghacks.net/2012/11/02/take-screenshots-straight-f... | https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands

yeukhon• 12 years ago

The only thing left in my wish list is the abililty to edit JS code on a website live and compile it. Chrome has that but Firefox still doesn't have it yet.

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

aleem2• 12 years ago

I tried Firefox debugger yesterday when one of the ads on one of the sites I managed somehow created a rogue redirect. The ad cached the redirect response in the browser, so on subsequent requests the browser continued to redirect without making a trip to the server. We happened to catch the error on FireFox on one of the machines and attempted to debug it there.

The first problem was that the requests never showed up in the network tab. I typed in the URL with the network tab set to persistent and hoped that I would see the redirect response header in the network tab. But it never showed up. It loaded directly from cache I presume but it should still have showed up in the network tab or somewhere to allow debugging.

I looked into the cache next and saw that the cached copy of the page contained a single script loading code (I presume this was what got cached for the page). Copying the HMTL from the cache page was fairly annoying. You can't copy the entire text because it's setup as HEX+HTML side-by-side. The HTML version replaces spaces with dots which means you pretty much can't copy it.

Lastly, it would also be nice to prevent the developer tools from closing when a window self closes.

Also, it would be nice to be able to manage cookies in the developer tools.

Another thing I find annoying is that FF/Chrome both don't have a cookie debugger. There are plenty of add-ons but I am not sure why it's not part of the core developer tools. Would be nice to have.

Excavator2• 12 years ago

What sort of cookie debugging? Seeing the cookies being sent for each request in the Network panel isn't enough?

aleem2• 12 years ago

I'd like to be able to add/edit and temporarily disable select cookies for a domain or sub domain.

talmand2• 12 years ago

What I've learned from this thread:

Every example of dev tools have their pluses and minuses, but all of them are great in their own way.

Everybody has their favorite for whatever specific reasons they have which is usually based off their individual workflow.

One developer's useless dev tools is another's life saver.

Too many people latch onto one way of doing things and don't experiment that much to see what's going on in another tool set.

Give Firefox/Chrome/Firebug dev tools a try. If it works out great! If it doesn't, well that's great too because you still have what you were happy with before.

I just try to forget the dark days before Firebug.

Firefox Developer Tools – Editable box model, Sublime Text keys

Related Stories