Skip to content
LogoLogo

How to debug with the Chrome extension

This guide shows you how to add a Picked panel to Chrome DevTools and check your integration on any page that runs the SDK.

1. Install the extension

Install it from the Chrome Web Store.

2. Add the devtools plugin

import { createClient } from 'picked'
import { svelteDevtoolsPlugin } from '@picked/svelte/plugins/devtools'
 
const picked = createClient({
  projectId: 'your-project-id',
  plugins: [svelteDevtoolsPlugin()],
})

The extension then connects to the SDK.

3. Add a tool of your own

A custom tool is a framework-adapted component, and it receives the live Picked client exactly as an experience component does.

import { adaptReactComponent } from '@picked/react'
import { svelteDevtoolsPlugin } from '@picked/svelte/plugins/devtools'
import MyTool from './MyTool'
 
const picked = createClient({
  projectId: 'your-project-id',
  plugins: [
    svelteDevtoolsPlugin({
      customTools: [
        { id: 'my-tool', label: 'My Tool', component: adaptReactComponent(MyTool) },
      ],
    }),
  ],
})

Your tools appear under a Custom Tools tab. In React use usePicked(), and in Svelte use getPicked().