Inspector doesn't work with modified app.html

[robertadamsonsmith]

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

[dominikg]

This is an interesting problem. The content of the wrapper around %sveltekit-body% is "owned" by svelte-kit and hydration removes anything that doesn't belong there :thinking:

A different workaround could be to use appendTo to append the loader to a component of your app, hoping that this leads to the inspector getting added after hydration.

[dominikg]

see also https://kit.svelte.dev/docs/project-structure#project-files-src that mentions this exact scenario when removing the wrapper div