web inspector not refreshing dom when changing content of element

RESOLVED WORKSFORME

Status

()

Firefox
Developer Tools: Inspector
RESOLVED WORKSFORME
3 years ago
2 years ago

People

(Reporter: svsool, Unassigned)

Tracking

({reproducible, testcase})

35 Branch
x86
Mac OS X
reproducible, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2231.0 Safari/537.36

Steps to reproduce:

1. open web inspector
2. find element with needed content
3. trigger event which change content on page

http://i.minus.com/ibfkSEa4dFvnr.gif - gif with this bug


Actual results:

1. open web inspector
2. find element with needed content
3. trigger event which change content on page
4. dom in web inspector didn't refresh


Expected results:

1. open web inspector
2. find element with needed content
3. trigger event which change content on page
4. expecting that dom refresh
(Reporter)

Updated

3 years ago
Summary: web inspector not refreshing dom when changing content of wrapper element → web inspector not refreshing dom when changing content of element
Can't reproduce with a simple testcase and Firefox 34. Can you provide a testcase and details on what build you were using?


My testcase:

http://jsbin.com/pequkuyale/1/edit?html,js,output
Component: Untriaged → Developer Tools: Inspector
Flags: needinfo?(svsool)
(can't reproduce on 35 either)
(Reporter)

Comment 3

3 years ago
http://joxi.ru/jnAyLqbcXBwG2Z.jpg - about build
bug testcase http://goo.gl/uQOVDh
how it work in ff dev edition http://i.minus.com/ibhlgYveQZZixw.gif (node didn't blink on refresh)
how it work in chrome canary http://i.minus.com/iEhu1DY9d1pZL.gif (node blinked on refresh as expected)
Flags: needinfo?(svsool)
(Reporter)

Comment 4

3 years ago
my testcase

http://i.minus.com/iX9MBfi5GaeGr.gif
http://jsbin.com/gesiwuqoso/2/edit?html,js,output
(Reporter)

Comment 5

3 years ago
http://i.minus.com/ikFz8s5kEgFiU.gif (chrome canary instantly refresh node)
(Reporter)

Comment 6

3 years ago
this bug jquery and select2 plugin dependent, because without this dom node in ff dev refresh normally
Thanks for the testcase, and sorry for the delay in responding. I can reproduce with your new testcase.

Ryan, who knows about the inspector and would be the right person to investigate this - is it you? :-)

For me, using beta, on the testcase I see the new content every second time I change it - but there is never a highlight flash to show something changed...
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(jryans)
Keywords: reproducible, testcase
Redirecting to Inspector expert.
Flags: needinfo?(jryans) → needinfo?(pbrosset)
It looks almost like we're not listening for characterData type of mutations, but looking at toolkit/devtools/server/actors/inspector.js, it seems like we are.
Flags: needinfo?(pbrosset)
Here's a simpler test case that works: http://jsbin.com/vedegenedo/1/edit
Clicking on the button changes the textContent of the div next to it.
The inspector is able to show the changes live as they happen.

Interestingly, if I change the text with jquery's $(node).text() instead of with node.textContent, the inspector doesn't "flash" the mutation (the text node doesn't get highlighted in orange for one second in the inspector).

With the provided test case: http://jsbin.com/gesiwuqoso/2/edit?html,js,output I'm only seeing the text node update in the inspector randomly. Like, it won't update for 10 times, and then will update the time after that, making it look like a timing issue.
I haven't been able to confirm that this is related yet, but it looks like this error appears in the logs everytime the textcontent isn't updated in the markup-view

console.error: 
  Message: TypeError: aAttr.value is null
  Stack:
    ElementEditor.prototype._createAttribute@resource://gre/modules/commonjs/toolkit/loader.js -> resource:///modules/devtools/markupview/markup-view.js:2271:1
ElementEditor.prototype.update@resource://gre/modules/commonjs/toolkit/loader.js -> resource:///modules/devtools/markupview/markup-view.js:2155:23
MarkupContainer.prototype.update@resource://gre/modules/commonjs/toolkit/loader.js -> resource:///modules/devtools/markupview/markup-view.js:1711:7
MarkupView.prototype._mutationObserver@resource://gre/modules/commonjs/toolkit/loader.js -> resource:///modules/devtools/markupview/markup-view.js:646:9
emit@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/commonjs/sdk/event/core.js:97:9
exports.WalkerFront<.getMutations</<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/inspector.js:2967:7
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:40:40
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:20:43
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:72:11
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:40:11
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:20:43
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:72:11
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:40:11
then@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:20:43
resolve@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/deprecated-sync-thenables.js:72:11
Front<.onPacket@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/protocol.js:1208:7
DebuggerClient.prototype.onPacket@resource://gre/modules/devtools/dbg-client.jsm:890:7
onPacket@resource://gre/modules/addons/XPIProvider.jsm -> file:///Users/pbrosset/Library/Application%20Support/Firefox/Profiles/7ncjeb4u.default-1377635761208/extensions/fxos_1_3_simulator@mozilla.org/bootstrap.js -> resource://gre/modules/commonjs/toolkit/loader.js -> resource://firebug-at-software-dot-joehewitt-dot-com/lib/debug/transportHooks.js:26:5
LocalDebuggerTransport.prototype.send/<@resource://gre/modules/devtools/dbg-client.jsm -> resource://gre/modules/devtools/transport/transport.js:545:11
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/DevToolsUtils.js:83:14
makeInfallible/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/DevToolsUtils.js:83:14
Yeah, I can now confirm that this error prevents the textContent from being updated in the markup-view.
I can't reproduce the issue http://jsbin.com/gesiwuqoso/2/edit?html,js,output on Firefox 44.
(also can't reproduce the jquery related issue mentioned for http://jsbin.com/vedegenedo/1/edit)

Marking as resolved, please reopen with a new test case if you this happens again.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.