Reactime v25: The time to react is now!
A powerhouse developer tool, now more powerful and intuitive than ever.
Co-authored by: Haider Ali, Mel Koppens, Jose Luis Sanchez
What is Reactime?
React is still on top! React was the most popular JavaScript frontend framework of 2023 and continues to be among the most used frontend frameworks of any language. However, there is always room for innovation.
Things can get complicated when working with large, elaborate codebases — an important consideration given that React is commonly used to build interactive, scalable applications. Developers must account for component architecture, state, and bugs that inevitably occur while programming. Reactime helps ameliorate these hang-ups so you can quickly see what’s happening and build effectively.
In one sentence, Reactime is an open-source time travel debugging tool designed for React applications. Beyond that, this tool offers so much more, including a dynamic graphic representation of the component tree, component state (current and history), a wide assortment of metrics, and much more. All these things make it a great tool for seasoned developers and the refreshed UI makes it a great tool for new developers learning react too!
Introducing Version 25.0!
Prop Drilling Visualization
The component map display is potentially the most striking feature of the Reactime app. It allows the user to see how all the components of any React app fit together and flow. Reactime version 25.0 expands on this intuitive graphical user interface by displaying how components are passed down between components. The presence and quantity of drilled props are indicated by the color of a link connecting a parent and child node. Instead of a gray link, links passing props are colored — like a heat map on the weather channel: links range from yellow (fewer props) to maroon (many props). Furthermore, bolding brings the look together while maintaining a clean appearance that intuitively indicates the quantity of props flowing between elements.
Enhanced UI: less clutter, more usability
While the many individual tools packed into this developer tool are great, too many tools can clutter the UI and make it hard to navigate the app. To solve this, we removed non-navigational components from the top container to transform it into a navigation hub and shifted all other navigation buttons into it. Oh, and we gave it a modern style too. Now you can spend less time thinking about how to use Reactime and more time using it. As an added benefit, the main container has more room for the React fiber tree (or any of the other tools that are displayed within it).
Bug Fixes: smoother than ever
On occasion, prior versions of the Reactime Chrome extension were prone to encountering issues during start-up which caused it to stop working if the Chrome browser was left idle for too long. To address this issue, our team implemented improvements to handle the asynchronicity of Chrome APIs ensuring smoother operation when the browser is left idling for extended periods. The primary issue was that the extension attempted to access the properties of the active tab before confirming which tab was active. This issue arose from the improper handling of the asynchronous nature of Chrome APIs. To solve this, the code in the background.js file was reconfigured to correctly handle asynchronous operations. This involved adding logic to query the active tab before attempting to inject the content script, ensuring the extension had the correct context before proceeding. Additionally, a subscription service was implemented to continuously check and affirm which tab is active. Although this approach consumes more resources, it ensures that the extension remains aware of the active tab, preventing it from failing when the browser is idle for too long.
These improvements led to significant positive outcomes. The start-up latency was reduced from approximately 10 seconds to less than 2 seconds. Start-up failures, which previously occurred 4 out of 8 times, were eliminated in the 5 instances tested after the fix. Moreover, the maximum idle time before the extension stopped working increased from 22 minutes to 3 days, the maximum duration tested.
By addressing the asynchronous handling of Chrome APIs and implementing a robust mechanism to track the active tab, the reliability and performance of the Reactime extension were greatly enhanced. These improvements ensure that developers can work uninterrupted, even if the browser is left idle for extended periods.
Testing
To keep an open-source project running, it must be maintainable for future contributors to iterate upon it. Software testing is a critical tool for detecting defects and improving quality and performance. For this reason, we invested heavily in increasing test validity. The result: a 65% increase in passing tests.
Conclusion
This already powerful debugging tool is now easier to use, boasts new features, system improvements, and a stylistic update.
If you’d like to contribute or experiment with Reactime, check out our GitHub page!
Try the extension on the Chrome Web Store
Meet the v25 Reactime Team:
Logan Nelsen | GitHub | LinkedIn
Haider Ali | GitHub | LinkedIn
Mel Koppens | GitHub | LinkedIn