How to track down causes of ≥100% CPU usage in Firefox (on desktop)?

Question

Certain websites cause Firefox to continuously use 100% CPU. Some of them I can just block and never visit, of course, but some others I unfortunately need to use sometimes.

I want to combat that, and the first step is to identify offending JavaScript code (or maybe some other offending resources, who knows), after that it might be possible to selectively block/auto-rewrite these parts or maybe press authors to fix issues in their code.

But how do I do this? Firefox DevTools have a performance inspector, but it seems to only record frame rendering times, response time, etc, I couldn't find information about where real CPU time is spent, and it is also limited to single tab, as far as I could tell.

Update

I tried disabling all extensions and it showed that they do not cause 100% CPU usage.

Update 2

I already use uBlock Origin. Also tried some coarse blocking of scripts by 3rd party domains for problematic website (using this extension), but in my case it either stays as is or breaks completely. So I need to somehow profile javascript globally to see which function(s) gets crazy run time.

Answer 1

You can use about:performance to track down the offending tab and then use Ublock's logger to track down what is causing the high CPU.

That's how I found out how an embedded youtube video caused problems because it kept loading www.youtube.com/yts/jsbin/player_*************/en_US/remote.js even though I had autoplay disabled.

In this case, I would have found it even faster if I had set Ublock's logger to all (i.e. all tabs) instead of one particular tab.

Since you mentioned Ublock but not the logger, this might be of interest.