HiFiber is a React Fiber tree visualization tool that provides a dynamic representation of the Fiber tree as it loads and updates on your browser’s page. Working with pages built in React 16+, it maps out the application structure and will also measure performance metrics – including Fiber node start time, duration, rerender time/count, and various other useful Fiber properties.
Installation • How to Use • Stretch Features • Meet the Team • License • How to Contribute
HiFiber is a versatile Chrome devtool that allows for easy frontend debugging and visualization. In our team's work, our aim is twofold; HiFiber is designed not only for the onboarding frontend engineer surveying the lay of the land of their company’s codebase – but is also developed with the more experienced frontend engineer in mind. HiFiber will offer robust frontend Fiber tree debugging, including allowing developers to quickly identify Fiber nodes that unnecessarily rerender, or hog valuable render time. It will also offer various visualization options, by default providing a clean and simple visual representation of the DOM after React has worked its magic through its reconciliation algorithm.
Our project will soon be published and hosted on the Chrome Web Store! For now, you can install HiFiber by downloading our codebase and manually storing its root directory where your other Chrome extensions are stored. Depending on the Operating System you use, this path will vary:
Mac Users
Chrome extensions are stored in: /Users/username/Library/Application Support/Google/Chrome/Default/Extensions
You can navigate through Finder to access this path directly.
Windows Users
Chrome extensions are stored in: C:\Users\User_Name\AppData\Local\Google\Chrome\User Data\Default\Extensions
You can manually type this path into Explorer’s navbar, or you can access it through Explorer physically by enabling the view of hidden files, folder and drives. To do this, press Windows key + E on your keyboard to open Explorer. Go to View > Options and check the box next to Show hidden files, folders or drives, and uncheck the box next to Hide protected operating system files. Click OK. You can now manually navigate to the above path.
Linux Users
Chrome extensions are stored in the filesystem, in the extensions folder, which is found in Chrome’s user data directory.
After you’ve placed the extension in the appropriate directory, now it’s time to install it to your browser. Open Chrome and click the puzzle piece icon on the upper right corner of your browser. This is the tab for your Extensions. At the bottom of the tab, click Manage Extensions then click Load Unpacked. Navigate to the directory that you’ve installed HiFiber in and click Select Folder. You’ve now installed HiFiber in your browser! The Extension will read the manifest.json to interface the extension with your browser.
Once you’ve installed and enabled HiFiber, the front end world is your oyster! Simply navigate to a page built in React 16+ and click the Manage Extensions button again. Click the icon for HiFiber and voila – a devtool panel will automatically appear with the frontend visualization of the app’s Fiber tree.
Once you are in the app, an animation will show your tree being created. You will have the option to view a Simple or Full tree.
Simple: Shows the nodes that represent HTML, Class, or Functional components. High level nodes most likely what a debugger is working with. Also simpler for basic onboarding.
Full: Shows the entirety of every node on the fiber tree. This is better for educational purposes, and occasional deep dive debugging. Many of the nodes are excessive and not useful to the average coder.
Next you will be able to interact with your tree. You can click on any node to reveal additional information for it.
- Type of node
- Render time
- State and previous state values
- Active or Idle
- React Tag
- Line number
- Key
Error Handling: When something breaks in your code, The tree will highlight and blink on the breaking component. This will allow the user to locate the line that the breaking logic is happening on.
Containerization
We get it: Everyone’s dev environment looks different. Whether you’re a Linux user on an older version of Chrome, a Mac OS user with Chrome’s latest release, or anything in between, we feel it’s important our users have easy access to HiFiber in their Chrome dev environment. That’s why we’re currently working to switch from our current monolithic application architecture to one that’s containerized – so all of its dependencies are packaged up in a standalone environment. Now, all of HiFiber’s tools will be readily available for you in a lightweight and standardized deployment.
Data Visualization with D3.js
While we’re proud of the elegant styling our DOM traversal algorithm yields to the frontend visualization, we also want our performance metrics to be represented equally as beautifully. That’s why we plan on utilizing D3.js, a popular JavaScript library suitable for manipulating/visualizing documents based on data. Using HTML, SVG and CSS, D3.js will allow our team to deliver clean and elegant visual representations of performance data each Fiber node yields upon render or rerender. Moreover, we’ll be able to visualize other Fiber node properties, making debugging your frontend fast, simple and fun!
NoSQL Database Utilization
Want to save performance metrics and compare them after subsequent builds of your app? We sure do! That’s why we’re planning on adding NoSQL database functionality, allowing users to effortlessly store performance metrics over time. Even further, we want our users to be able to compare performance reports across builds.
- Lauren Acrich: LinkedIn | GitHub
- Matthew Birnholtz: LinkedIn | GitHub
- Michael Filoramo: LinkedIn | GitHub
- Mikel Giffin: LinkedIn | GitHub
- Adrian Karnani: LinkedIn | GitHub
MIT License
Copyright © 2022 OSLabs Beta
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Feel free to fork our repo, add or fix features, and send pull requests! Our application is growing each day, and we always have an open mind to others’ input on bug fixes and additions. If you have ideas for stretch features, or wish to contribute to the already planned ones, we’d love your input. After all, open source is love!