Svelcro

Svelte DevTool with a focus on rendering

Download

The first component performance tracker for Svelte applications.

Features

Component Dependency Tree - View your components as a dependency tree or hierarchy.
Component Stats - List state and properties in your components.
Profiler
- Render Performance - Monitors component render time from start to finish.
- Render Count - Tracks how many times your components have rendered.

Installation

Extension Coming To Chrome Store Soon...

Feel free to fork and clone this repo! Otherwise, just download Svelcro and save it somewhere on your computer.

Make Svelcro/dev-app your current directory, install depencencies, and run build.

cd Svelcro/dev-app
npm install
npm run build

Navigate to Chrome's extensions page at chrome://extensions/.

Turn on 'developer mode' in the top-right corner of the page.

Click on 'load unpacked' at the top-left, and select your local copy of the Svelcro directory.

Open up your Chrome DevTools, and check to make sure Svelcro is available in the dropdown menu of the navbar!

How To Use

Make sure your svelte application is in development mode.

You can then open up Chrome DevTools and navigate to Svelcro.

Visualize component dependencies and their respective state in the "Components" tab or monitor your component render performance in the "Profiler" tab.