Skip to content

Inspector doesn't work with modified app.html #434

Closed
@robertadamsonsmith

Description

Describe the bug

In my sveltekit project, I (unwisely) altered part of the app.html from

<div>%sveltekit.body%</div>

To

%sveltekit.body%

After spending an hour or two, I realised that this was the source of the problem, and that clearly the whole point of %sveltekit.body% being in a container <div> is to allow other scripts (such as inspector) to add new elements to without them getting over-written.
Since I believe that my misunderstanding is not uncommon, it would be useful if inspector could spot the issue and error or warn as appropriate.
Perhaps in create_inspector_host() a MutationObserver could be used to spot if the svelte-inspector-host <div> is removed, and produce a console error (or maybe there is a better way?)

Reproduction

Create new sveltekit app
Alter this line in ````app.html``` from

<div>%sveltekit.body%</div>

to

%sveltekit.body%

Enable inspector by adding to svelte.config.js:

vitePlugin: {
	experimental: {
		inspector: {
			showToggleButton: "always",
			toggleButtonPos: "top-right",
		},
	},
},

Start dev server, and notice that inspector isn't working

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-4670K CPU @ 3.40GHz
    Memory: 8.18 GB / 15.93 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.71
    @sveltejs/adapter-node: next => 1.0.0-next.88
    @sveltejs/kit: next => 1.0.0-next.477
    svelte: ^3.48.0 => 3.50.0
    vite: ^3.1.0-beta.2 => 3.1.0

Severity

annoyance

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions