🖱️ Inspector

Untitled

Enable inspector

Svelte

export default defineConfig({
  plugins: [
    svelte({
      experimental: {
        inspector: true,
      }
    })
  ]
})

SvelteKit

const config = {
  // ...
  vitePlugin: {
    experimental: {
      inspector: true,
    },
  },
}

Options

const config = {
  // ...
  vitePlugin: {
    experimental: {
      inspector: {
        // change shortcut
        toggleKeyCombo: 'meta-shift',
        // hold and release key to toggle inspector mode 
        holdMode: true,
        // show or hide the inspector option
        showToggleButton: 'always',
        // inspector position
        toggleButtonPos: 'top-right',
      },
    },
}

Use

Press Meta + Shift (on windows: windows + shift, on mac: cloverleaf + shift)

<aside> ⚠️ If it doesn’t work try to include the toggleKeyCombo in the config

</aside>

Thanks to JoyOfCode for the detailed video and article

Never Search For Svelte Components Again