DevTools open when load a localhost web page, makes Firefox uses 100/200% CPU

Developer Tools
#1

Hi guys,
I was developing the website I was working on.
Then Firefox starts to hang my system and consume about 100/200% of CPU.

I see other topic related to this, but the suggestion to disable source maps, didn’t help in this case.

Steps to reproduce:

  • Open a webpage on my localhost ( nodejs - lite-server )
  • Load that page with Dev Tools open
  • System hangs and become unusable.

If I load the same, with dev tools closed. Use of 100% cpu, is about 5 sec max, then becomes normal.

My system:
MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports)
2,9 GHz Intel Core i5 - 8Gb
MacOs High Sierra 10.13.2 (17C88)

Firefox Version: 57.0.3 (64-bit)

Profile: https://perfht.ml/2CFTmuT

1 Like
#2

Thanks for the information and for the profile!

Since your website is not public, can you share more details about it? Are you using source maps? How many JS sources are available? etc…

Some other things you could do:

  • test with the latest Nightly as we have been regularly landing perf improvements for the debugger
  • check which tool slows down the reload. To do that:
    • select a tool
    • close the toolbox
    • reopen the toolbox with F12
    • reload your page
      This way only one tool will be initialized. Usual suspects to try in isolation are: Debugger, Network monitor and Inspector.

Thanks!

#3

Hi,

thanks for your report.

  I don't know why it would hang your full system (maybe more a

memory issue?), but from profile, we can clearly see the debugger
is taking a lot of CPU time.

#4

Hi guys!

  • Nightly build work a way better for me. Tried yesterday and didn’t hang.
  • We have around 3 bundles of JS. My problem was to use the “debugger” part of dev tools.
  • The larger file of JS we have (the one I want to debug) was around 2.1mb.
  • We use ReactJS (16) and Angular (1.6).
  • The page I try to load has implementations of charts of C3 (D3 wrapper) and Google maps.

Please, if you need more specific data, don’t hesitate to contact me. Thanks! :slight_smile:

#5

Thanks so much Gonzalo, especially recording a profile! The Debugger team focused on fixing performance issue in the past quarter, which you can see and feel in Nightly. To ensure snappiness long term the team landed new continues performance tests, so from here on things should only get better.

It will take a while until all of this gets to Release (58 has a lot of improvements, but 59 runs even faster), so staying on Nightly or DevEdition is what I’d recommend. If you hit another hang and got a profile, please let us know.

1 Like
#6

Sure, Harald!

Will keep using Nightly, and will report any other issues If find one.
Is always important to contribute somehow, for the software we use daily :+1:

Thanks!

1 Like
#7

Hello, the issue is still here (Firefox 69.0 (64-bit) non-nightly) but I found a workaround, it happens to me only when I do Right click and then inspect element. When I do CTRL+SHIFT+C to open the inspector part of the dev tools the issue does not occur

#8

Can confirm this works! I’ve been running into the same issue:
Machine specs:

  • I5 2.5ghz, 3ghz on boost
  • Intel hd graphics 540
  • 8gb of ram
  • 1 main ssd drive

I built projects in Nuxt but lately everytime i open dev tools things slow down drastically. Compilation from nuxt takes minutes with inspector open.

But shift + ctrl + c to open inspector works like a charm!