[DevTools Bug]: High CPU usage when viewing Google Search results

[ferrybig]

Website or app

https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen

Repro steps

I noticed my fans started whining, so I looked into the system monitor for the cause. The cause was firefox and the webextensions process. Looking into the firefox task manager, it showed a google tab and extensons being high.

Profiling using the debugger (pausing then pressing play again multiple times and looking what places are executed), showed this extension and some script (that handled message events) on google.com as the cause.

Debugging using window.addEventListener('message', (e) => console.log(e)) showed the following spam repeated:

message { target: Window, isTrusted: true, data: {…}, origin: "https://www.google.com", lastEventId: "", source: Window, ports: Restricted, srcElement: Window, currentTarget: Window, eventPhase: 2, … }
​
bubbles: false
​
cancelBubble: false
​
cancelable: false
​
composed: false
​
currentTarget: null
​
data: Object { source: "react-devtools-content-script", hello: true }
​
defaultPrevented: false
​
eventPhase: 0
​
explicitOriginalTarget: Window https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen
​
isTrusted: true
​
lastEventId: ""
​
origin: "https://www.google.com"
​
originalTarget: Window https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen
​
ports: Array []
​
returnValue: true
​
source: Window https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen
​
srcElement: Window https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen
​
target: Window https://www.google.com/search?client=firefox-b-d&q=sociale+huur+samenwonen
​
timeStamp: 536381
​
type: "message"
​
<get isTrusted()>: function isTrusted()
​
<prototype>: MessageEventPrototype { initMessageEvent: initMessageEvent(), data: Getter, origin: Getter, … }
​​
constructor: function MessageEvent()
​​
data: 
​​
initMessageEvent: function initMessageEvent()
​​
lastEventId: 
​​
origin: 
​​
ports: 
​​
source: 
​​
Symbol(Symbol.toStringTag): "MessageEvent"
​​
<get data()>: function data()
​​
<get lastEventId()>: function lastEventId()
​​
<get origin()>: function origin()
​​
<get ports()>: function ports()
​​
<get source()>: function source()
​​
<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }
debugger eval code:1:51

How often does this bug happen?

Often

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[CarlosEduJs]

I believe there's a verification missing. From what I've seen, React DevTools basically sends a "hello" and waits for a response; but, for example, if that message is captured and relayed by some other script, it goes back to the original listener and triggers another "hello," creating an infinite loop that consumes CPU resources. I took a look at your debug:

1. DevTools sends the "hello" message.

2. Google Search (or some script on the page) forwards this message back via postMessage.

3. The original DevTools listener receives it again -> triggers another "hello" message -> infinite loop.