SvelteSlicer | Chrome extension debugging tool for Svelte app | 2021~
•Developed an interactive time travel debugging tool for Svelte applications that captures real-time data to store, display and retrieve, allowing users to inspect the state changes and travel back in time to a previous application state.
•Leveraged Svelte algorithm to traverse the instance of script AST(abstract syntax trees) and collected the data into dynamic representations of file structure and state extending devtool support to users’ applications in a collaborative and agile development team focusing on building performant and user-oriented open source dev tools.
•Utilized D3.js for inspected data visualization, enhancing the dynamic capabilities of our data graph with node-tree and circle-pack layouts featuring expand, collapse, display props, and state and enabling it to update when new data comes in.
•Established a persistent data bridge between the user’s application and the developer tool through background scripts and Chrome browser content scripts in order to listen for events and component-level updates.
•Implemented Svelte store to handle complex app state from a global data store in a reactive way to avoid memory leaks and maintain a clean interface.
•Product developed under tech accelerators OSLabs(opensourcelabs.io).