Svelte DevTools
7 |8 | No Svelte app detected 9 | 10 | 11 |
12 | 13 | 20 |
10 | {@render children()}
11 |
12 |
13 |
21 |
--------------------------------------------------------------------------------
/workspace/extension/rollup.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'rollup';
2 |
3 | export default defineConfig([
4 | {
5 | input: 'static/background.js',
6 | output: {
7 | file: 'build/background.js',
8 | },
9 | },
10 | {
11 | input: 'src/client/core.js',
12 | output: [
13 | { file: 'static/courier.js', format: 'iife' },
14 | { file: 'build/courier.js', format: 'iife' },
15 | ],
16 | },
17 | ]);
18 |
--------------------------------------------------------------------------------
/workspace/extension/static/register.js:
--------------------------------------------------------------------------------
1 | chrome.devtools.panels.create(
2 | 'Svelte',
3 | `icons/svelte-${chrome.devtools.panels.themeName}.svg`,
4 | 'index.html',
5 | // (panel) => {
6 | // panel.onShown.addListener((win) =>
7 | // chrome.devtools.inspectedWindow.eval('$0', (payload) =>
8 | // win.postMessage({ source: 'svelte-devtools', type: 'bridge::ext/inspect', payload }),
9 | // ),
10 | // );
11 | // },
12 | );
13 |
--------------------------------------------------------------------------------
/workspace/extension/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { resolve } from 'node:path';
2 | import { svelte } from '@sveltejs/vite-plugin-svelte';
3 | import { defineConfig } from 'vite';
4 |
5 | export default defineConfig(() => {
6 | return {
7 | plugins: [svelte()],
8 |
9 | build: {
10 | cssTarget: 'chrome111',
11 | outDir: 'build',
12 | },
13 |
14 | publicDir: 'static',
15 |
16 | resolve: {
17 | alias: {
18 | $lib: resolve(__dirname, 'src/lib'),
19 | },
20 | },
21 | };
22 | });
23 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/components/Toolbar.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
12 |
13 |
27 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/nodes/Ellipsis.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
27 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/nodes/Iteration.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
19 |
20 | {#if expanded}
21 | {@render children()}
22 | {/if}
23 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "semi": true,
4 | "singleQuote": true,
5 | "tabWidth": 2,
6 | "useTabs": true,
7 | "overrides": [
8 | {
9 | "files": ["pnpm-lock.yaml"],
10 | "options": {
11 | "rangeEnd": 0
12 | }
13 | },
14 |
15 | {
16 | "files": ["package.json"],
17 | "options": {
18 | "plugins": ["prettier-plugin-sort-package-json"]
19 | }
20 | },
21 | {
22 | "files": ["*.md"],
23 | "options": {
24 | "tabWidth": 4
25 | }
26 | },
27 | {
28 | "files": ["*.svelte"],
29 | "options": {
30 | "plugins": ["prettier-plugin-svelte"]
31 | }
32 | }
33 | ]
34 | }
35 |
--------------------------------------------------------------------------------
/workspace/extension/src/routes/ProfileButton.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "clean": "git add * && git clean -dfx -e node_modules",
6 | "check": "pnpm --filter \"./workspace/*\" check",
7 | "format": "pnpm --filter \"./workspace/*\" format"
8 | },
9 | "packageManager": "pnpm@8.15.6",
10 | "devDependencies": {
11 | "@sveltejs/vite-plugin-svelte": "next",
12 | "@types/node": "^20.16.6",
13 | "prettier": "^3.3.3",
14 | "prettier-plugin-sort-package-json": "^0.2.0",
15 | "prettier-plugin-svelte": "^3.2.6",
16 | "svelte": "5.0.0-next.141",
17 | "svelte-check": "^4.0.2",
18 | "typescript": "^5.6.2",
19 | "vite": "^5.4.7"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/panel/core.svelte.ts:
--------------------------------------------------------------------------------
1 | import { app } from '$lib/state.svelte';
2 |
3 | export const errors = $state<{ [keys: string]: string | false }>({});
4 |
5 | export function inject(keys: string[], value: any) {
6 | const uuid = app.selected?.id;
7 | if (!uuid) return;
8 |
9 | const accessors = `[${keys.map((k) => `'${k}'`).join(', ')}]`;
10 | chrome.devtools.inspectedWindow.eval(
11 | `window['#SvelteDevTools'].inject('${uuid}', ${accessors}, ${value})`,
12 | (_, error) => {
13 | const id = `${uuid}+${keys.join('.')}`;
14 | errors[id] = error?.isException && error.value.slice(0, error.value.indexOf('\n'));
15 | },
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/components/Divider.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
31 |
--------------------------------------------------------------------------------
/workspace/extension/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "dev": "pnpm run --parallel \"/^dev:.*/\"",
6 | "dev:app": "vite build -wd --minify=false --sourcemap=inline",
7 | "dev:scripts": "rollup -cw",
8 | "build": "rollup -c && vite build",
9 | "bundle:zip": "cd build && zip -r svelte-devtools.zip *",
10 | "bundle:tar": "cd build && tar -czf svelte-devtools.tar.gz *",
11 | "format": "prettier -w .",
12 | "check": "pnpm run --parallel \"/^check:.*/\"",
13 | "check:style": "prettier -c .",
14 | "check:svelte": "svelte-check --tsconfig ./tsconfig.json"
15 | },
16 | "devDependencies": {
17 | "@types/chrome": "^0.0.266",
18 | "rollup": "^4.22.4"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 |
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Environment**
24 |
25 | - Browser with version [e.g. chrome 22, firefox 70.0.1]
26 | - Devtools version [e.g. 1.3.1, built from master]
27 | - Svelte version [e.g. 3.15.0]
28 |
29 | **Additional context**
30 | Add any other context about the problem here.
31 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/components/Indexer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | 10 | {#if i === -1 || app.query.length < 2} 11 | {text} 12 | {:else} 13 | {#if i !== 0}{text.slice(0, i)}{/if} 14 | {text.slice(i, i + app.query.length)} 15 | {#if i + app.query.length < text.length} 16 | {text.slice(i + app.query.length)} 17 | {/if} 18 | {/if} 19 |
20 | 21 | 32 | -------------------------------------------------------------------------------- /workspace/extension/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "bundler", 6 | "resolveJsonModule": true, 7 | 8 | "checkJs": true, 9 | "strict": true, 10 | "composite": true, 11 | "noEmit": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "noImplicitReturns": true, 15 | 16 | "skipLibCheck": true, 17 | "isolatedModules": true, 18 | "useDefineForClassFields": true, 19 | "forceConsistentCasingInFileNames": true, 20 | 21 | "paths": { 22 | "$lib": ["./src/lib"], 23 | "$lib/*": ["./src/lib/*"] 24 | } 25 | }, 26 | "include": [ 27 | "vite.config.ts", 28 | "src/**/*.d.ts", 29 | "src/**/*.ts", 30 | "src/**/*.js", 31 | "src/**/*.svelte", 32 | "static/**/*.js" 33 | ], 34 | "exclude": ["static/courier.js"] 35 | } 36 | -------------------------------------------------------------------------------- /workspace/extension/src/routes/Inspector.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /workspace/extension/src/lib/nodes/Slot.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 23 | {#if expanded} 24 | {@render children()} 25 | 26 |
27 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/.github/workflows/quality.yaml:
--------------------------------------------------------------------------------
1 | name: QA
2 |
3 | on:
4 | push:
5 | branches: [master]
6 | pull_request:
7 |
8 | jobs:
9 | check:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - uses: actions/checkout@v4
14 | - uses: pnpm/action-setup@v4
15 | - uses: actions/setup-node@v4
16 | with:
17 | node-version: 20
18 | cache: pnpm
19 |
20 | - run: pnpm install
21 | - run: pnpm check
22 |
23 | # test:
24 | # runs-on: ${{ matrix.os }}
25 | # strategy:
26 | # matrix:
27 | # node-version: [16, 18, 20]
28 | # os: [ubuntu-latest, windows-latest, macOS-latest]
29 |
30 | # steps:
31 | # - uses: actions/checkout@v3
32 | # - uses: pnpm/action-setup@v2
33 | # - uses: actions/setup-node@v3
34 | # with:
35 | # node-version: ${{ matrix.node-version }}
36 | # cache: pnpm
37 |
38 | # - run: pnpm install
39 | # - run: pnpm test
40 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/nodes/Block.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
27 | {#if expanded}
28 | {@render children()}
29 |
30 |
31 |
33 | {/if}
34 |
35 |
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Christian Timothy Johnson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/state.svelte.ts:
--------------------------------------------------------------------------------
1 | type Overwrite-
17 | {#each breadcrumbs as node}
18 | {#if visibility[node.type]}
19 |
27 | {/if}
28 | {/each}
29 |
-
22 | {#each children as frame}
23 |
-
24 |
28 |
29 |
7 | (expanded = !empty && !expanded)}
61 | >
62 | <
63 |
64 | (expanded = true)} />
74 |
75 | {@render close()}
76 | {/if}
77 | {/if}
78 |
79 |
80 | {#if expanded}
81 | {@render children()}
82 |
83 |
84 | {@render close()}
85 |
86 | {/if}
87 |
88 |
97 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/panel/Editable.svelte:
--------------------------------------------------------------------------------
1 |
45 |
46 | {#if editing}
47 |
48 | {
52 | // @ts-expect-error - target and value exists
53 | update(target.value);
54 | }}
55 | onkeydown={(event) => {
56 | const { key, target } = event;
57 | if (key === 'Escape') {
58 | event.preventDefault();
59 | editing = false;
60 | return;
61 | }
62 | if (key !== 'Enter') return;
63 | // @ts-expect-error - target and value exists
64 | update(target.value);
65 | }}
66 | />
67 | {:else}
68 |
69 | (editing = !readonly)}>
70 | {type === 'string' ? `"${value}"` : `${value}`}
71 |
72 | {/if}
73 |
74 |
106 |
--------------------------------------------------------------------------------
/workspace/extension/src/routes/SearchBox.svelte:
--------------------------------------------------------------------------------
1 |
33 |
34 |
62 |
63 |
99 |
--------------------------------------------------------------------------------
/workspace/extension/src/app.css:
--------------------------------------------------------------------------------
1 | :root {
2 | tab-size: 2;
3 |
4 | --background: rgb(255, 255, 255);
5 | --color: rgb(74, 74, 79);
6 |
7 | --t-duration: 240ms;
8 | }
9 |
10 | *,
11 | *::before,
12 | *::after {
13 | box-sizing: border-box;
14 | }
15 |
16 | html {
17 | height: 100%;
18 | }
19 |
20 | body {
21 | display: flex;
22 | margin: 0;
23 | height: 100%;
24 | background: var(--background);
25 | color: var(--color);
26 | font-family: monospace;
27 | }
28 | body.dark {
29 | --color: rgb(177, 177, 179);
30 | --background: rgb(36, 36, 36);
31 | scrollbar-color: rgb(115, 115, 115) rgb(60, 60, 61);
32 | }
33 |
34 | /* dark mode scrollbar */
35 | body.dark ::-webkit-scrollbar {
36 | width: 0.75rem;
37 | height: 0.5rem;
38 | background-color: transparent;
39 | }
40 | body.dark ::-webkit-scrollbar-thumb {
41 | background-color: rgb(51, 51, 51);
42 | border: 1px solid rgba(255, 255, 255, 0.2);
43 | border-radius: 0.25rem;
44 | }
45 |
46 | /* basic resets */
47 | ul {
48 | margin: 0;
49 | padding: 0;
50 | list-style: none;
51 | }
52 |
53 | /* expandable arrows */
54 | .expandable::before {
55 | content: '';
56 | position: absolute;
57 | top: 0;
58 | left: calc(var(--indent, 6px) - 6px);
59 |
60 | border-top: 0.375rem solid rgba(135, 135, 137, 0.9);
61 | border-right: 0.25rem solid transparent;
62 | border-left: 0.25rem solid transparent;
63 | transition-duration: var(--t-duration);
64 | transform: translate3d(0%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(-90deg);
65 | /* transform: translate3d(-150%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(-90deg); */
66 | }
67 | .expandable.expanded::before {
68 | transform: translate3d(0%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(0deg);
69 | /* transform: translate3d(-150%, calc(50% + 0.25rem + var(--y-pad, 0px)), 0) rotate(0deg); */
70 | }
71 |
72 | /* tooltip pseudo-elements */
73 | [data-tooltip]:hover::after,
74 | [data-tooltip]:hover::before {
75 | opacity: 1;
76 | pointer-events: auto;
77 | }
78 | [data-tooltip]::before {
79 | content: '';
80 | opacity: 0;
81 | pointer-events: none;
82 |
83 | position: absolute;
84 | bottom: -0.2rem;
85 | left: 2.5rem;
86 | border-right: 0.5rem solid transparent;
87 | border-bottom: 0.5rem solid rgb(48, 64, 81);
88 | border-left: 0.5rem solid transparent;
89 | transition: opacity 0.2s;
90 | }
91 | [data-tooltip]::after {
92 | content: attr(data-tooltip);
93 | opacity: 0;
94 | pointer-events: none;
95 | z-index: 1;
96 | position: absolute;
97 | bottom: 0;
98 | left: 0;
99 |
100 | display: flex;
101 | padding: 0.25rem 0.375rem;
102 | border-radius: 0.25rem;
103 | transition: opacity 0.2s;
104 | transform: translateY(100%);
105 |
106 | background-color: rgb(48, 64, 81);
107 | color: white;
108 | }
109 |
--------------------------------------------------------------------------------
/workspace/extension/static/icons/svelte.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/workspace/extension/static/icons/svelte-disabled.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
--------------------------------------------------------------------------------
/workspace/extension/src/client/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @param {unknown} value
3 | * @returns {any}
4 | */
5 | function clone(value, seen = new Map()) {
6 | switch (typeof value) {
7 | case 'function':
8 | return { __is: 'function', source: value.toString(), name: value.name };
9 | case 'symbol':
10 | return { __is: 'symbol', name: value.toString() };
11 | case 'object': {
12 | if (value === window || value === null) return null;
13 | if (Array.isArray(value)) return value.map((o) => clone(o, seen));
14 | if (seen.has(value)) return {};
15 |
16 | /** @type {Record
56 | {#if children.length}
57 | {
61 | if (selected === frame) top = frame;
62 | else selected = frame;
63 | }}
64 | />
65 | {:else}
66 |
69 | {#if selected}
70 | Nothing to display. Perform an action or refresh the page.
67 | {/if} 68 |
72 |
102 |
73 | Tag name
74 | {selected.node.tagName}
75 | (#{selected.node.id})
76 |
77 |
78 | Start
79 | {round(selected.start)}ms
80 |
81 |
82 | Operation
83 | {selected.type}
84 |
85 |
86 | Block type
87 | {selected.node.type}
88 |
89 |
90 | End
91 | {round(selected.end)}ms
92 |
93 |
94 | Duration
95 |
96 | {round(selected.children.reduce((acc, o) => acc - o.duration, selected.duration))}ms
97 |
98 | of
99 | {round(selected.duration)}ms
100 |
101 | -
24 | {#each entries as { key, value, readonly = false } (key)}
25 | {@const keys = [...parents, key]}
26 | {@const type = typeof value}
27 |
28 |
29 |
- {
42 | event.stopPropagation();
43 | expanded[key] = !expanded[key];
44 | }}
45 | >
46 | {key}:
47 |
48 |
49 | {#if type === 'string'}
50 |
inject(keys, updated)} 55 | /> 56 | {:else if value == null || value !== value} 57 | inject(keys, updated)} 62 | /> 63 | {:else if type === 'number' || type === 'boolean'} 64 | inject(keys, updated)} 69 | /> 70 | {:else if Array.isArray(value)} 71 | Array [{value.length || ''}] 72 | 73 | {#if value.length && expanded[key]} 74 | {@const entries = value.map((v, i) => ({ key: `${i}`, value: v, readonly }))} 75 | 76 | 77 | {/if} 78 | {:else if type === 'object'} 79 | {#if value.__is === 'function'} 80 | function {value.name || ''}() 81 | {#if expanded[key]} {value.source}{/if} 82 | {:else if value.__is === 'symbol'} 83 | {value.name || 'Symbol()'} 84 | {:else if Object.keys(value).length} 85 | Object {…} 86 | 87 | {#if expanded[key]} 88 |89 | {/if} 90 | {:else} 91 | Object { } 92 | {/if} 93 | {/if} 94 |
95 | {/each}
96 |
None
99 | {/if}
100 |
101 |
141 |
--------------------------------------------------------------------------------
/workspace/extension/src/lib/nodes/Node.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 | {#snippet expand(children: (typeof node)['children'], level: number)}
27 | {#each children as child (child.id)}
28 | - {@render expand(node.children, depth + 1)}
- {@render expand(node.children, depth + 1)}
- {@render expand(node.children, depth + 1)}
- {@render expand(node.children, depth + 1)}
78 |
80 | {:else if node.type === 'anchor'}
81 | #anchor
82 | {/if}
83 | - event.currentTarget === event.target && reset()}
130 | onmouseleave={reset}
131 | >
132 | {#each app.root as node (node.id)}
133 |