How can I access/console.log the fiber tree as it renders to a page in Chrome?

• React

  1,686 221,535 9.8 JavaScript

  The library for web and native user interfaces.

  

  A good first step would be to check out how react-dev-tools is doing it, even if it's just to understand the complexities. Although going the route of injecting a custom renderer or attaching events to the current one is probably going to be more involved than you'd like/need. But if you do there are some good resources:

• Making-a-custom-React-renderer

  2 1,296 0.0 JavaScript

  Tutorial on how to make a custom React renderer

  Nitin's series of posts

• SurveyJS

  surveyjs.io

  sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• test-extension

  1 0 10.0 JavaScript

  Thanks again for this! So, I've tried your awesome suggestion in my script, but ultimately to no avail; the scripted window.addEventListener('load', () => console.log(window); logs a window that still doesn't display the DOM tree with the diffed React __fiber properties. Still not sure what the issue is, but I went andcreated a tiny repo with all my code (don't worry) it's super small and basic. Would you be able to tell me what I could be doing wrong? All I'm trying to do is execute an injected script that does a console.log of the DOM after React has generated a diffed tree with all those __reactfiber properties of the pages nodes.

Suggest a related project