¿Hay alguna forma de simular el selector de Elementos del desarrollador con una fuente html y un iframe?

Por ejemplo, el código en el panel izquierdo es la fuente html de un sitio web que se crea a partir del sitio web y se puede usar como fuente en un iframe para representar el sitio web.

Me gustaría poder conectar los dos y pasar el cursor sobre las líneas en el panel izquierdo y mostrar el elemento correspondiente en el panel derecho y viceversa, donde podría seleccionar un elemento y la línea correspondiente en el código resaltado.

Actualmente estoy usando esto para renderizar estos dos paneles:

 <Grid item xs={6}> <Item>{websiteData.length > 0 && <TextareaAutosize maxRows={30} value={websiteData} style={{ width: "100%" }} /> }</Item> </Grid> <Grid item xs={6} className={classes.test}> <Item>{websiteData.length > 0 && <iframe srcdoc={websiteData} title="Website Preview" className={classes.frame}></iframe>}</Item> </Grid>

¿Algunas ideas? No sé si hay soluciones existentes, estoy usando react-js