
Firefox Debugger - Vinnl
https://mozilladevelopers.github.io/playground/debugger
======
masklinn
Here's something which is _still_ missing from both Firefox and Chrome
debuggers: "tracing" breakpoints.

That's one of the few nice/advanced features from Xcode and Safari, aside from
making a breakpoint conditional you can:

* skip it the first n times (default: 0)

* make it non-breaking

* associate various _actions_ which are executed if the breakpoint "triggers" (the condition matches) even if the breakpoint is non-breaking, in Safari these actions are "Log Message" (formatted plain text), "Evaluate" (arbitrary javascript code), "Play Sound" (beep on every tripping of the breakpoint) and "Probe Expression"[0]: [https://webkit.org/blog/5435/breakpoint-options/](https://webkit.org/blog/5435/breakpoint-options/)

[0] a special kind of table logging which integrates with the debugger rather
than the (separate) console tab

~~~
10000100001010
You can at least both "Log Message" and "Evaluate" in Chrome with conditional
break points. Calling console.log is falsy, so calling it from conditional
break points just causes it to log the message (you also have access to any
variables in scope of the breakpoint that you can use to build the message).
You can do the same thing with executing random JavaScript. Just put the
statement and add && false to make sure it always returns false.

~~~
masklinn
> You can at least both "Log Message" and "Evaluate" in Chrome with
> conditional break points.

You can obviously do that in any browser, it's just inflexible, ugly, error-
prone and inconvenient.

~~~
10000100001010
¯\\_(ツ)_/¯ I rarely have issues with it

------
polack
Slightly OT; What's the "Developer Edition"?

> Build, test, scale and more with the only browser built just for developers.

This is the only description I could find on their website. What's the
difference to the normal version?

~~~
callahad
DevEdition is our fourth release channel, along with Stable, Beta, and Nightly
builds. The engine is generally based on Beta, but we can ship features to
DevEdition separately from mainline Firefox. For example, we can ship new
developer tools to that channel before they land in Beta, it runs in its own
separate profile by default, we allow Developer Edition to disable the add-on
signing requirement, etc.

~~~
sudeepto_dutta
Hello Sir,

Pardon me if this is a silly question, but in the about:config page of Firefox
Developer Edition the value for app.update.channel is aurora. But AFAIK, the
aurora channel was stopped since April 18th of this month.

This is the screenshot :
[https://imgur.com/r5Kcqb3](https://imgur.com/r5Kcqb3)

~~~
callahad
Aurora used to be a separate pre-beta, post-nightly release channel:

    
    
        Release <--- Beta <--- Aurora <--- Nightly
    

In 2014, we rebranded Aurora builds to "Developer Edition" to give it better
visibility and ship experimental features that we thought would be interesting
to web and add-on developers.

Earlier this year, we sped up our time-to-release by removing Aurora from the
pipeline, but we kept it as a separate channel roughly at parity with Beta:

    
    
        Release <--- Beta <--- Nightly
                   Aurora <--'
    

Which is where things are today.

~~~
sudeepto_dutta
Thanks for the reply sir. I have one more question. I was very excited to use
quantum, so ended up using developer edition. I am using it on my macOS High
Sierra.

The battery usage and Energy impact that I observed from Activity Monitor
application in macOS was very surprising.

Both parameters were quite high and the battery was draining very quickly. I
don't have the screenshot. I tried searching for a solution like tinkering the
about:config fields etc. but couldn't find any.

------
wyattjoh
Wish I didn't have to open Chrome to view websocket frames though. Firefox
does detect that a WS connection was made, it just can't inspect it.

~~~
vanderZwan
I have a similar thing but with profiling JS performance: if you profile a
page in Chrome and then inspect the source code, it gives estimates of seconds
spent per line of code. Firefox does not have this.

Being able to detect which function is the bottleneck is great, but being able
to then figure out where the time is spent inside that function can be very
enlightening too.

------
melicerte
Sad to see a post by Mozilla only referencing Mac and Windows shortcuts to
start the debugger. Most of the web developers I know are using Linux for web
development, including javascript (some are using MacOS, none Windows).

On Ubuntu, the debugger is started by using <CTRL><SHIFT>S (like Windows
actually).

~~~
pjmlp
I don't know any Web developers using Linux on their desktops, as company
policy requires Windows desktops.

Linux is only used for Java based backends, when deploying into production.

With .NET deployments being done on IIS, even with .NET Core.

Some of the designers are using Photoshop on macOS.

Anecdote data.

~~~
robin_reala
If we’re doing anecdata, then every web developer I know is on Macs, apart
from those at the company I’m consulting for at the moment who have mostly
standardised on Windows.

~~~
pjmlp
That was my point, each one has a different OS scenario depending where in the
world we live on, the policies at workplace and customer sites.

~~~
bkor
If someone says that Linux should be included and mentions he knows a lot of
web developers using Linux, then his added comment is relevant. Windows
instructions were already included so your reply wasn't needed and I assume
you didn't understand the Linux reply.

~~~
pjmlp
I took it as Web devs only use Linux kind of.

------
molsson
I tried to use the Firefox debugger recently, but I could find where you set
"event listener breakpoints" (e.g. a breakpoint that stops whenever a click
handler runs, regardless of which element was clicked). Some documents seemed
to suggest that Firefox has this feature but I tried multiple versions of
Firefox (including fiddling with the "new debugger frontend" flag in
about:config) but I just couldn't find it anywhere?

~~~
dessant
Set about:config?filter=devtools.debugger.new-debugger-frontend to false, then
reopen the debugger and expand the right pane, the Events tab should be there:
[https://i.imgur.com/GLGrc7y.png](https://i.imgur.com/GLGrc7y.png).

~~~
KwanEsq
And for those curious, here's the issue for bringing the feature back in the
new debugger: [https://github.com/devtools-
html/debugger.html/issues/4750](https://github.com/devtools-
html/debugger.html/issues/4750)

------
tambourine_man
Hope there's a light color scheme as well

~~~
Vinnl
There is, the dark one is just the default for Developer Edition. In fact,
regular Firefox comes with a light scheme by default.

------
prokaktus
Firefox Debugger is amazing, but I have some problems with performance. If I
enable DevTools, then entire browser (other tabs too) hanging for 1-2 minutes
while page with DevTools is reloading. I think it may be because a lot async
calls were performing, about couple hundreds (we use RequireJS and every
sourcefile loaded through different request).

------
shmerl
Is there any way to restore older dark theme for Firefox developer tools? I
mean more metallic looking. The new one is too black.

~~~
bugmen0t
Click the cog icon, top-right for DevTools options. Available themes are Dark,
Light, Firebug.

~~~
shmerl
Compare this new dark to one that was there a few versions back. I'm talking
about the older one.

Example:
[https://support.cdn.mozilla.net/media/uploads/images/2016-09...](https://support.cdn.mozilla.net/media/uploads/images/2016-09-06-12-44-45-698e18.png)

~~~
deltaprotocol
Fully agree with you. The old dark theme feels more comfortable (less contrast
between colors). Each and every time I open the devtools now this thought
crosses my mind.

~~~
wldcordeiro
The old theme had issues with accessibility due to that lessened contrast.
There were some plans and PoC code made for custom theming though.

------
jadbox
Does it have Chrome's async callstack stacktrace feature? It's hard to live
without it now.

------
EGreg
How about breakpoints on mutation or deletion of node or changed attributes?
Like Chrome.

------
JeanMarcS
Since version 57 I have a strange behavior in the debugger (debian 9) : there
is a line difference between where I click and the line selected. For a
breakpoint I have to click the line above, idem for getting var values.

------
jpkeisala
How does this compare to Chrome Developer Tools?

~~~
starik36
It's similar if you look skin deep. Differences emerge once you start using it
on daily basis.

The coolest thing FF has over Chrome is the little [ev] icon next to an
element that shows what events are connected to it. Saves me lots of time
trying to track things down.

The coolest thing Chrome has over FF is that stepping through code is so much
faster. There is no lag at all, while there is one in FF. It also has a
"Search All" mode where it will look through all your code (html, js, css) to
find a string.

~~~
Macha
> It also has a "Search All" mode where it will look through all your code
> (html, js, css) to find a string.

This feature is called "Search Sources" in Firefox.
[https://imgur.com/U515D8X](https://imgur.com/U515D8X)

~~~
starik36
It's there - sure. But it doesn't work well. Example comparison between
Firefox & Chrome.

[https://i.imgur.com/BFejDaf.png](https://i.imgur.com/BFejDaf.png)

------
aviaro
The thing I'd like to see is the ability to remove/edit cookies.

~~~
Macha
It's there. Storage > Cookies. If you don't see a storage tab, you may need to
turn it in the DevTools settings.

