
Firefox Developer Tools – Editable box model, Sublime Text keys - rnyman
https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/
======
james33
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.

~~~
mundanevoice
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

~~~
ep103
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?

~~~
mbell
Why are you putting 200 lines of code into the console?

~~~
ep103
I have to say, I stared at this question for a while. I have such a large
reliance on using the console as a scratchpad, before ever even opening a
script file, that I don't think I've even considered the possibility that one
could do front end development work without it.

The best answer for you question, would be that throughout my career, the
number of situations where I could directly edit a source javascript file,
write-run-test-iterate in a typical software development cycle is in the far
far minority of the amount of time I've spent writing javascript.

The vast majority of my time, iterating changes to javascript files is non
trivial. Some examples include

Major CMS / CRM systems I've worked on where, even if I have all relevant
source code, even finding the location where the page's javascript is
generated or stored is non-trivial.

Major CMS / CRM solutions where making a change to a single javascript file
can result in a 20 minute process before you can see those changes reflected
in the browser.

Situations where I simply do not have access to the source code, but am none
the less manipulating javascript on the page (for example, custom WPF
applications that inject js into every page visited in the wpf web browser)

Or my current situation, where my company hosts some ~30 different web
applications, and fully understanding the processes involved to get to the
final page state where I will be doing my work is non-trivial.

\---

But perhaps the best reason, is when debugging. With javascript, I can simply
navigate to the problematic page and say module.function = myNewFunction();

If I start by copy pasting the source for the problematic code into
myNewFunction in the console, then I can iterate my changes with 0 regard to
how the javascript is served to the page. All my changes are instantaneous,
and don't even require a refresh to see take effect. As such, my development
time is usually much faster than constantly editing a source file,
particularly if that backend framework doesn't update its js when noticing
file changes, and is massively faster in any of the situations listed above.

But the real key is that once you get used to working in this fashion, it
starts to make sense to use the console as your scratchpad to flesh out ideas
before ever actually writing real production code whatsoever, in any
situation. It just becomes so nice to be able to flesh out your js ideas on
the fly, with 0 regard to framework, and against your target environment.

But this workflow is entirely impossible in chrome, because every time you
want to run your script, you have to hit ente, and every time you need a new
line you're shifting, and then you're up arrowing over versions, etc, etc.
With firebug, I can just continually edit the text in the console until I'm
happy with the results, and then I can keep that on the screen and use it as a
reference while I write my (hopefully much nicer) real production code in a
source file somewhere.

~~~
e1g
In Chrome, you could Snippets[1] or Live Editing[2] to monkey-patch Javascript
sources inline. No need to copy & modify the content - just edit it within the
browser and re-run. Complete with syntax highlighting, auto-completion, and
the same no-reload goodness you are used to.

[1] [https://developers.google.com/chrome-developer-
tools/docs/au...](https://developers.google.com/chrome-developer-
tools/docs/authoring-development-workflow#snippets)

[2] [https://developers.google.com/chrome-developer-
tools/docs/au...](https://developers.google.com/chrome-developer-
tools/docs/authoring-development-workflow#live-editing)

~~~
ep103
I never would have found snippits without it being pointed out to me. Thank
you, that seems to be basically what I was looking for. Thought why it is
there, and not just a multi-line console confounds me. Then again, so do most
of Google's UI decisions for the last ~2 years or so.

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

~~~
__david__
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.

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

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

~~~
Excavator
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.

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

~~~
Spittie
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.

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

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

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

------
enscr
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
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!

~~~
thousande
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](https://wiki.mozilla.org/DevTools/Hacking) * More general info: [http://codefirefox.com/](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...](https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=component&o1=allwords&resolution=---&emailtype1=exact&status_whiteboard_type=allwordssubstr&emailassigned_to1=1&query_format=advanced&status_whiteboard=mentor%3D&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=REOPENED&bug_status=VERIFIED&email1=nobody%40mozilla.org&v1=Developer%20Tools&product=Firefox&list_id=10112029)

/Contributor

~~~
mnemonik
I have a huge smile on my face :)

See also the Get Involved page for devtools:
[https://wiki.mozilla.org/DevTools/GetInvolved](https://wiki.mozilla.org/DevTools/GetInvolved)

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

~~~
dannysu
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.

------
anilshanbhag
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

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

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

~~~
mnemonik
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 :)

~~~
quarterto
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?

~~~
mnemonik
New one, please:
[https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c...](https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger)

I understand if your app is proprietary and you can't share the source, but
even non-minimal test cases are much better than no test case :)

Thanks!

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

Outside of my 10kloc app, I could only reproduce it with ~100 copies of
jQuery, which is kind of a pathological case I guess.

~~~
mnemonik
Thanks for taking the time to file the bug, this helps a lot!

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

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

~~~
mnemonik
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](https://bugzilla.mozilla.org/show_bug.cgi?id=972054)

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

~~~
sp332
First Google result [https://launchpad.net/~ubuntu-mozilla-
daily/+archive/firefox...](https://launchpad.net/~ubuntu-mozilla-
daily/+archive/firefox-aurora)

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

------
abvdasker
That "copy as cURL" thing is absolutely brilliant.

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

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

------
tieTYT
> 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
Well that already shows a stack trace. it's not mentioned here because it's
not a new feature.

------
yeukhon
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](https://bugzilla.mozilla.org/show_bug.cgi?id=771339)

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

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

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

------
yawz
Great stuff! Copy as cURL is very cool.

------
Dean_M
The new firefox dev tools are sexy af

------
Dirlewanger
Oh look, a bunch of updates to catch up to Chrome's tools _again_.

~~~
presootto
Firefox is Free software, Chrome is proprietary and made by the company that
employs this guy:
[http://mostlysignssomeportents.tumblr.com/post/84829703425/r...](http://mostlysignssomeportents.tumblr.com/post/84829703425/reminder-
eric-schmidt-is-an-apologist-for-war)

I know what I'd choose.

~~~
quarterto
Chromium is open source.

~~~
kijin
I'm tired of hearing that argument. Chromium !== Chrome.

Call me back when Chromium, not Chrome, wins a 20% share of the browser
market.

~~~
lern_too_spel
Chrome is simply a packaging of Chromium with nonfree third-party plugins:
[https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoo...](https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome)

There is no such thing as Chromium browser, just packages of Chromium source
built by different distributors like Ubuntu, Red Hat, etc. You might ask to be
called back when a particular packaging other than Chrome gets significant
share, but if you ask when Chromium (including all packagings) gets
significant share, that's already happened.

~~~
kijin
The whole point of the "Chrome is proprietary" argument is that we don't know
exactly what Google added to Chromium.

Since the diff between Chrome and Chromium is not open-source, there's no way
to verify that Google only added what they claim to have added. For example,
we wouldn't know if they slipped in an NSA backdoor along with a bunch of
plugins.

"Trust but Verify": [https://blog.mozilla.org/privacy/2014/01/14/trust-but-
verify...](https://blog.mozilla.org/privacy/2014/01/14/trust-but-verify-
repost-of-article-on-security-value-of-open-source-software/)

