1

Chrome Version 87.0.4280.141 (Official Build) (x86_64)

React Developer Tools 4.10.1 (12/4/2020)

Installed the React Developer Tools extension for the Chrome browser.

  • open a website which is developed by React tech (e.g. https://react-dev-inspector.zthxxx.me/ can be used to have a try)
  • open Chrome menu ... => More tools => Developer Tools
  • go to tab "Component" if the current page is loaded with the React component.
  • in the left-top corner of the tab page, there is a cursor button with tooltips: "select an element in the page to inspect", click it and then move the mouse to the web page.
  • it will show you the React component with a tooltip. (just like the following screenshot)
  • the "More" button is a HTML element "a" with size 66px x 40px.

the normal status

But my problem is that on the website we developed, the React inspect will show with a very big black background. like the screenshot below.

  • it is a button with size 240px x 52px
  • but the location of the tip is not beside the component, it is on the top of the screen
  • and there is a very big background

I am not sure where/what configures we set incorrectly.

Any comment and help will be much appreciated.

my website with problems

Orionpax
  • 993
  • 5
  • 13
  • 27

1 Answers1

0

I've figured what was wrong in my case. Maybe it will help someone.

I had a global css rule that caused expanding the div's added by react dev tools. in my case it was something like that:

div:not([class]) {
    width: 100%;
    height: 100%;
}

Unfortunately, at the this point in time, there is no way to specifically target dynamically added container as it has no id, class or attribute.

MrSegFaulty
  • 535
  • 6
  • 10