Unable to click on anything inside react devtools in google chrome about react-devtools

[zpao]

@sebmarkbage

[mckelvey]

I’m having the same experience; same versions noted above. In-page react is version 0.11.1.

[HurricaneJames]

I think this is related to #50

[jgebhardt]

Same here; fwiw, key bindings still work.

[super-cache-money]

Me too...

[mmahalwy]

Same here!

[jeroencoumans]

In the Extension inspector, it fails in treeoutline.js line 943:

Uncaught TypeError: undefined is not a function
TreeElement.isEventWithinDisclosureTriangle
TreeElement.treeElementMouseDown

TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
{
    // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446) 
    var paddingLeftValue = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left");
    var computedLeftPadding = paddingLeftValue ? paddingLeftValue.getFloatValue(CSSPrimitiveValue.CSS_PX) : 0;
    var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
    return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
}

I've managed to get my local installation working by changing line 943 to var paddingLeftValue = 0;. This is in the blink snapshot from the devtools, so I'm guessing a proper fix would be to include a newer snapshot which works with Chrome >= 40.

[TrySpace]

Same here, two different computer with latest Chrome (40.0.2214.91)
Elements in the React tab are reacting to hover, but not clicking. You can change selection of elements with arrow keys though. But the props and state are not clickable or expanding.
@jeroencoumans your solution works!
We can edit the plugin for now: http://stackoverflow.com/questions/2250163/how-do-i-directly-modify-a-google-chrome-extension-file-crx

[dmnd]

I hit this in Canary months ago and stopped using it for dev because of this issue. Now it's made it to stable 😢

[zpao]

@jeroencoumans Thanks for hunting that down. I think @sebmarkbage was working on a fix, which might be to update the blink tools. Though in the mean time, it might be a good idea to take the minimal fix in the short term though. What do you think Sebastian?

[sebmarkbage]

This was hotfixed. I should've caught it earlier but Chrome breaks a lot of things in Beta that never makes it into the public release. Sorry for the inconvenience.

[dmnd]

Today I have 0.12.2 installed (updated Jan 28) but this issue seems to persist? @sebmarkbage should this be working now?

[mckelvey]

I am seeing this working correctly. Versions: 0.12.2 on 40.0.2214.91 and 40.0.2214.93

[dmnd]

Oh, actually, this works for me too after a restart of Chrome. I guess
extension updates need that sometimes?

Anyway, thanks for React <3

On 28 January 2015 at 20:06, David W. McKelvey [email protected]
wrote:

I am seeing this working correctly. Versions: 0.12.2 on 40.0.2214.91 and
40.0.2214.93

—
Reply to this email directly or view it on GitHub
#62 (comment)
.

[RoDo777]

Having similar problems: The react tab is there, but nothing inside the pane.
Tried everything here - _update components, edit line 943, make own package,restart chrome.
Even in Chrome 38.0.x.x it is the same. _Could it be a different registry setting?*

Chrome Version 40.0.2214.111 m - React Developer Tools 0.13.0 - Windows 7 SP 1
I'm also not behind a firewall.

Is there a way to put a trace inside the scripts to get closer to the problem?

By the way, when I tried to install my package it says "Cannot load extension with file or directory name metadata. Filenames starting with "" are reserved for use by the system"
Renamed it to "metadata", but I think thats not working, even the package then gets installed.

At home on my notebook, with win7, same chrome and Devtool versions it works
But I need to have it work at work ...