<p dir="auto">Installed the react development tools to chrome Version 89.0.4389.114 (Official Build) (64-bit)<br>
Open my development version of my react app localhost:3000 with several components and I see the react icon<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7073595/113520660-a1463a80-9562-11eb-9b6d-82919344c146.png"><img src="https://user-images.githubusercontent.com/7073595/113520660-a1463a80-9562-11eb-9b6d-82919344c146.png" alt="image" style="max-width: 100%;"></a><br>
Go to the inspect and component to and nothing is showing<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7073595/113520674-ccc92500-9562-11eb-87d0-5068abc150e1.png"><img src="https://user-images.githubusercontent.com/7073595/113520674-ccc92500-9562-11eb-87d0-5068abc150e1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I'm using this chode <a href="https://codesandbox.io/s/react-devtools-dk9gj?fontsize=14" rel="nofollow">https://codesandbox.io/s/react-devtools-dk9gj?fontsize=14</a><br>
and when you open this in chrome it works.<br>
I open it from localhost and it does not work.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7073595/113520835-d2733a80-9563-11eb-88cb-7bb6d6b30ade.png"><img src="https://user-images.githubusercontent.com/7073595/113520835-d2733a80-9563-11eb-88cb-7bb6d6b30ade.png" alt="image" style="max-width: 100%;"></a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;react&quot;: &quot;16.8.6&quot;,
&quot;react-dom&quot;: &quot;16.8.6&quot;,
&quot;react-scripts&quot;: &quot;^4.0.3&quot;"><pre class="notranslate"><code class="notranslate">"react": "16.8.6",
"react-dom": "16.8.6",
"react-scripts": "^4.0.3"
</code></pre></div>
<p dir="auto">npm --version 7.6.3<br>
nodejs v14.16.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li></li>
<li></li>
</ol>

<p dir="auto">Link to code example:</p>

<h2 dir="auto">The current behavior</h2>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">When I use DevTools to select an element on the page, it can't jump/find it.<br>
It also doesn't show it in the Components page.<br>
This was checked by finding its parent and checking the children, non of the newly generated ones are there.<br>
As a probably related bug Profiler doesn't show/record the changes.</p>
<p dir="auto">React version: 16.13.1<br>
React-dom version: 16.13.1<br>
Parcel: 2.0.0-beta.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Have a parent element</li>
<li>Have a child element (A)</li>
<li>Using conditional rendering (<code class="notranslate">condition ? A : B</code>) "hide" A</li>
<li>B now shows</li>
<li>Try and select B using Chrome Dev Tools's "Select an element in the page to inspect it"</li>
<li>Jumps nowhere/Can't find it manually in the list.</li>
</ol>
<h2 dir="auto">Example</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24227350/97173781-06faf300-1789-11eb-9f66-4c6146d1dc8b.gif"><img src="https://user-images.githubusercontent.com/24227350/97173781-06faf300-1789-11eb-9f66-4c6146d1dc8b.gif" alt="2020-10-26_12-38-43" data-animated-image="" style="max-width: 100%;"></a><br>
In this example, I demonstrate that it works on the Search Bar (light grey bar) which is the TextField=&gt;InputBase tree, and the Container that contains the search &amp; images and how hovering over the image doesn't do anything.<br>
I then click on the image and nothing happens &amp; the state panel on the right of Dev Tools empties itself.</p>
<h2 dir="auto">The current behaviour</h2>
<p dir="auto">Can't find newly rendered components in React Dev Tools Components panel</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Being able to find the newly rendered components in React Dev Tools Components panel</p>