diff --git a/components/admin/jobs-table.tsx b/components/admin/jobs-table.tsx
index cddf90b..2d7e7d3 100644
--- a/components/admin/jobs-table.tsx
+++ b/components/admin/jobs-table.tsx
@@ -12,6 +12,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { cancelJobAction, deleteJobAction } from '@/actions/admin/jobs'
+import { debugProps } from '@/lib/debug'
 
 type Job = {
   id: string
@@ -203,7 +204,7 @@ export function JobsTable({ jobs }: { jobs: Job[] }) {
   const [view, setView] = useState<'status' | 'costs'>('status')
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3" {...debugProps('jobs-table', 'JobsTable', 'components/admin/jobs-table.tsx')}>
       <div className="flex gap-1">
         <Button
           size="sm"
diff --git a/components/admin/products-table.tsx b/components/admin/products-table.tsx
index f66a8a1..9b98b4d 100644
--- a/components/admin/products-table.tsx
+++ b/components/admin/products-table.tsx
@@ -21,6 +21,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
+import { debugProps } from '@/lib/debug'
 
 type Product = {
   id: string
@@ -78,7 +79,7 @@ function DeleteDialog({ product }: { product: Product }) {
 
 export function ProductsTable({ products }: { products: Product[] }) {
   return (
-    <Table>
+    <Table {...debugProps('products-table', 'ProductsTable', 'components/admin/products-table.tsx')}>
       <TableHeader>
         <TableRow>
           <TableHead>Naam</TableHead>
diff --git a/components/admin/users-table.tsx b/components/admin/users-table.tsx
index 172cd41..7c96c0b 100644
--- a/components/admin/users-table.tsx
+++ b/components/admin/users-table.tsx
@@ -26,6 +26,7 @@ import {
   updateUserRolesAction,
   setMustResetPasswordAction,
 } from '@/actions/admin/users'
+import { debugProps } from '@/lib/debug'
 
 type UserWithRoles = {
   id: string
@@ -190,7 +191,7 @@ export function UsersTable({
   currentUserId: string
 }) {
   return (
-    <Table>
+    <Table {...debugProps('users-table', 'UsersTable', 'components/admin/users-table.tsx')}>
       <TableHeader>
         <TableRow>
           <TableHead>Gebruiker</TableHead>
diff --git a/components/dashboard/new-product-button.tsx b/components/dashboard/new-product-button.tsx
index cf3e36a..43b7e0b 100644
--- a/components/dashboard/new-product-button.tsx
+++ b/components/dashboard/new-product-button.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { ProductDialog } from '@/components/dialogs/product-dialog'
+import { debugProps } from '@/lib/debug'
 
 export function NewProductButton() {
   const [open, setOpen] = useState(false)
@@ -11,7 +12,7 @@ export function NewProductButton() {
 
   return (
     <>
-      <Button onClick={() => setOpen(true)}>+ Nieuw product</Button>
+      <Button onClick={() => setOpen(true)} {...debugProps('new-product-button', 'NewProductButton', 'components/dashboard/new-product-button.tsx')}>+ Nieuw product</Button>
       <ProductDialog
         mode="create"
         open={open}
diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index 211fecc..8a5cd41 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -12,6 +12,7 @@ import { DemoTooltip } from '@/components/shared/demo-tooltip'
 import { restoreProductAction } from '@/actions/products'
 import { setActiveProductAction } from '@/actions/active-product'
 import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
+import { debugProps } from '@/lib/debug'
 
 interface Product {
   id: string
@@ -53,7 +54,7 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
 
   if (products.length === 0) {
     return (
-      <div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3">
+      <div className="bg-surface-container-low rounded-xl border border-border p-12 text-center space-y-3" {...debugProps('product-list', 'ProductList', 'components/dashboard/product-list.tsx')}>
         <p className="text-muted-foreground">
           {showArchived
             ? 'Geen gearchiveerde producten.'
@@ -69,7 +70,7 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
   }
 
   return (
-    <div className="grid gap-3">
+    <div className="grid gap-3" {...debugProps('product-list', 'ProductList', 'components/dashboard/product-list.tsx')}>
       {products.map(product => (
         <div
           key={product.id}
diff --git a/components/dialogs/product-dialog.tsx b/components/dialogs/product-dialog.tsx
index a478fb9..937627a 100644
--- a/components/dialogs/product-dialog.tsx
+++ b/components/dialogs/product-dialog.tsx
@@ -28,6 +28,7 @@ import {
 import { productSchema, type ProductInput } from '@/lib/schemas/product'
 import { createProductAction, updateProductAction } from '@/actions/products'
 import { useProductsStore } from '@/stores/products-store'
+import { debugProps } from '@/lib/debug'
 
 export interface ProductDialogProduct {
   id: string
@@ -159,6 +160,7 @@ export function ProductDialog(props: Props) {
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
+          {...debugProps('product-dialog', 'ProductDialog', 'components/dialogs/product-dialog.tsx')}
         >
           <div className={entityDialogHeaderClasses}>
             <DialogTitle className="text-xl font-semibold">
diff --git a/components/mobile/landscape-guard.tsx b/components/mobile/landscape-guard.tsx
index 339d67d..40d90c9 100644
--- a/components/mobile/landscape-guard.tsx
+++ b/components/mobile/landscape-guard.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { RotateCw } from 'lucide-react'
+import { debugProps } from '@/lib/debug'
 
 export function LandscapeGuard({ children }: { children: React.ReactNode }) {
   const [isPortrait, setIsPortrait] = useState(false)
@@ -22,6 +23,7 @@ export function LandscapeGuard({ children }: { children: React.ReactNode }) {
           role="alert"
           aria-live="assertive"
           className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-background text-foreground p-6"
+          {...debugProps('landscape-guard', 'LandscapeGuard', 'components/mobile/landscape-guard.tsx')}
         >
           <RotateCw className="size-12 text-primary" />
           <p className="text-base font-medium text-center">Draai je telefoon naar landscape</p>
diff --git a/components/mobile/logout-button.tsx b/components/mobile/logout-button.tsx
index 82f0819..394cc04 100644
--- a/components/mobile/logout-button.tsx
+++ b/components/mobile/logout-button.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { logoutAction } from '@/actions/auth'
+import { debugProps } from '@/lib/debug'
 
 export function LogoutButton() {
   const [open, setOpen] = useState(false)
@@ -31,6 +32,7 @@ export function LogoutButton() {
         variant="outline"
         onClick={() => setOpen(true)}
         className="w-full justify-center gap-2"
+        {...debugProps('logout-button', 'LogoutButton', 'components/mobile/logout-button.tsx')}
       >
         <LogOut className="size-4" aria-hidden="true" />
         Uitloggen
diff --git a/components/mobile/mobile-tab-bar.tsx b/components/mobile/mobile-tab-bar.tsx
index 5845f81..daf3af4 100644
--- a/components/mobile/mobile-tab-bar.tsx
+++ b/components/mobile/mobile-tab-bar.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { ListTree, Activity, Settings } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 interface MobileTabBarProps {
   activeProductId: string | null
@@ -42,6 +43,7 @@ export function MobileTabBar({ activeProductId }: MobileTabBarProps) {
     <nav
       aria-label="Hoofdnavigatie"
       className="fixed bottom-0 left-0 right-0 z-40 flex border-t border-border bg-surface-container-low"
+      {...debugProps('mobile-tab-bar', 'MobileTabBar', 'components/mobile/mobile-tab-bar.tsx')}
     >
       {tabs.map((tab) => {
         const Icon = tab.icon
diff --git a/components/split-pane/split-pane.tsx b/components/split-pane/split-pane.tsx
index 13dac6f..1b2434b 100644
--- a/components/split-pane/split-pane.tsx
+++ b/components/split-pane/split-pane.tsx
@@ -2,6 +2,7 @@
 
 import { Fragment, useRef, useState, useEffect, useCallback } from 'react'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 const COOKIE_PREFIX = 'sp:'
 const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
@@ -123,7 +124,7 @@ export function SplitPane({
 
   if (isMobile) {
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full" {...debugProps('split-pane', 'SplitPane', 'components/split-pane/split-pane.tsx')}>
         <div className="flex items-center border-b border-border shrink-0">
           {activeTab > 0 && (
             <button
@@ -157,7 +158,7 @@ export function SplitPane({
   }
 
   return (
-    <div ref={containerRef} className="flex h-full overflow-hidden select-none">
+    <div ref={containerRef} className="flex h-full overflow-hidden select-none" {...debugProps('split-pane', 'SplitPane', 'components/split-pane/split-pane.tsx')}>
       {panes.map((pane, i) => (
         <Fragment key={i}>
           {i > 0 && (