[{"data":1,"prerenderedAt":937},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fdebugging-with-lynx-devtool":489,"\u002Fguides\u002Fdebugging-with-lynx-devtool-surround":932},[4,34,51,317,343,348,353,426],{"title":5,"path":6,"stem":7,"children":8,"package":11,"category":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"category":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"category":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"category":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"category":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"category":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"category":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"category":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"category":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"category":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,66,72,78,84,89,94,99,105,111,116,121,126,131,137,142,147,152,156,161,165,170,175,180,185,190,195,200,204,209,214,219,224,229,234,239,244,249,254,258,262,267,272,277,282,287,292,296,300,304,308,312],{"title":52,"path":54,"stem":58,"package":11,"category":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"category":64,"icon":65},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","Navigation","i-lucide-list-collapse",{"title":67,"path":68,"stem":69,"package":63,"category":70,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","Data Display","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"category":77,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core","Overlay",{"title":79,"path":80,"stem":81,"package":63,"category":82,"icon":83},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","Layout","i-lucide-smartphone",{"title":85,"path":86,"stem":87,"package":63,"category":82,"icon":88},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":90,"path":91,"stem":92,"package":63,"category":70,"icon":93},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":95,"path":96,"stem":97,"package":63,"category":70,"icon":98},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":100,"path":101,"stem":102,"package":63,"category":103,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","Buttons","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"category":109,"icon":110},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","Form","i-lucide-calendar-days",{"title":112,"path":113,"stem":114,"package":63,"category":82,"icon":115},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":117,"path":118,"stem":119,"package":63,"category":109,"icon":120},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":122,"path":123,"stem":124,"package":76,"category":64,"icon":125},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":127,"path":128,"stem":129,"package":76,"category":77,"icon":130},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":132,"path":133,"stem":134,"package":76,"category":135,"icon":136},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","Gestures & Lists","i-lucide-move",{"title":138,"path":139,"stem":140,"package":63,"category":77,"icon":141},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-bottom",{"title":143,"path":144,"stem":145,"package":63,"category":77,"icon":146},"Dropdown Menu","\u002Fcomponents\u002Fdropdown-menu","3.components\u002Fdropdown-menu","i-lucide-menu",{"title":148,"path":149,"stem":150,"package":63,"category":135,"icon":151},"Feed List","\u002Fcomponents\u002Ffeed-list","3.components\u002Ffeed-list","i-lucide-list",{"title":109,"path":153,"stem":154,"package":63,"category":109,"icon":155},"\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":157,"path":158,"stem":159,"package":63,"category":109,"icon":160},"Form Field","\u002Fcomponents\u002Fform-field","3.components\u002Fform-field","i-lucide-form-input",{"title":162,"path":163,"stem":164,"package":76,"category":70,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":166,"path":167,"stem":168,"package":63,"category":109,"icon":169},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":171,"path":172,"stem":173,"package":63,"category":174,"icon":141},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland","Dynamic Island",{"title":176,"path":177,"stem":178,"package":63,"category":174,"icon":179},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":181,"path":182,"stem":183,"package":63,"category":174,"icon":184},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":186,"path":187,"stem":188,"package":63,"category":11,"icon":189},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":191,"path":192,"stem":193,"package":63,"category":109,"icon":194},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":196,"path":197,"stem":198,"package":63,"category":77,"icon":199},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":64,"path":201,"stem":202,"package":76,"category":64,"icon":203},"\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":205,"path":206,"stem":207,"package":63,"category":109,"icon":208},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":210,"path":211,"stem":212,"package":63,"category":109,"icon":213},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":215,"path":216,"stem":217,"package":63,"category":82,"icon":218},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":220,"path":221,"stem":222,"package":63,"category":77,"icon":223},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":225,"path":226,"stem":227,"package":63,"category":70,"icon":228},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":230,"path":231,"stem":232,"package":63,"category":109,"icon":233},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":235,"path":236,"stem":237,"package":63,"category":109,"icon":238},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":240,"path":241,"stem":242,"package":76,"category":82,"icon":243},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":245,"path":246,"stem":247,"package":63,"category":109,"icon":248},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":250,"path":251,"stem":252,"package":63,"category":82,"icon":253},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":255,"path":256,"stem":257,"package":76,"category":77,"icon":141},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":259,"path":260,"stem":261,"package":63,"category":82,"icon":184},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":263,"path":264,"stem":265,"package":63,"category":109,"icon":266},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":268,"path":269,"stem":270,"package":63,"category":135,"icon":271},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":273,"path":274,"stem":275,"package":63,"category":64,"icon":276},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":278,"path":279,"stem":280,"package":63,"category":135,"icon":281},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":283,"path":284,"stem":285,"package":63,"category":135,"icon":286},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":288,"path":289,"stem":290,"package":63,"category":109,"icon":291},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":293,"path":294,"stem":295,"package":63,"category":64,"icon":184},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":297,"path":298,"stem":299,"package":63,"category":109,"icon":169},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":301,"path":302,"stem":303,"package":63,"category":77,"icon":223},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":305,"path":306,"stem":307,"package":63,"category":109,"icon":291},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":309,"path":310,"stem":311,"package":63,"category":109,"icon":184},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":313,"path":314,"stem":315,"package":63,"category":77,"icon":316},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":318,"path":319,"stem":320,"children":321,"package":11,"category":11,"icon":323},"Theming","\u002Ftheming","4.theming\u002F1.index",[322,324,328,333,338],{"title":318,"path":319,"stem":320,"package":11,"category":11,"icon":323},"i-lucide-palette",{"title":325,"path":326,"stem":327,"package":11,"category":11,"icon":266},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":329,"path":330,"stem":331,"package":11,"category":11,"icon":332},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":334,"path":335,"stem":336,"package":11,"category":11,"icon":337},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":339,"path":340,"stem":341,"package":11,"category":11,"icon":342},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":344,"path":345,"stem":346,"package":11,"category":11,"icon":347},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":349,"path":350,"stem":351,"package":11,"category":11,"icon":352},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":354,"path":355,"stem":356,"children":357,"package":11,"category":11,"icon":359},"Composables","\u002Fcomposables","7.composables\u002F1.index",[358,360,365,370,375,380,384,389,394,399,403,407,411,416,421],{"title":354,"path":355,"stem":356,"package":11,"category":11,"icon":359},"i-lucide-square-function",{"title":361,"path":362,"stem":363,"package":11,"category":11,"icon":364},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":366,"path":367,"stem":368,"package":11,"category":11,"icon":369},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":371,"path":372,"stem":373,"package":11,"category":11,"icon":374},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":376,"path":377,"stem":378,"package":11,"category":11,"icon":379},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":381,"path":382,"stem":383,"package":11,"category":11,"icon":83},"useSafeArea","\u002Fcomposables\u002Fuse-safe-area","7.composables\u002F15.use-safe-area",{"title":385,"path":386,"stem":387,"package":11,"category":11,"icon":388},"useGlobalEvent","\u002Fcomposables\u002Fuse-global-event","7.composables\u002F16.use-global-event","i-lucide-radio",{"title":390,"path":391,"stem":392,"package":11,"category":11,"icon":393},"getViewportSize","\u002Fcomposables\u002Fget-viewport-size","7.composables\u002F17.get-viewport-size","i-lucide-scaling",{"title":395,"path":396,"stem":397,"package":11,"category":11,"icon":398},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":400,"path":401,"stem":402,"package":11,"category":11,"icon":337},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":404,"path":405,"stem":406,"package":11,"category":11,"icon":141},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":408,"path":409,"stem":410,"package":11,"category":11,"icon":352},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":412,"path":413,"stem":414,"package":11,"category":11,"icon":415},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":417,"path":418,"stem":419,"package":11,"category":11,"icon":420},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":422,"path":423,"stem":424,"package":11,"category":11,"icon":425},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":427,"path":428,"stem":429,"children":430,"package":11,"category":11,"icon":432},"Guides","\u002Fguides","8.guides\u002F1.index",[431,433,437,442,446,451,456,461,466,470,475,479,484],{"title":427,"path":428,"stem":429,"package":11,"category":11,"icon":432},"i-lucide-book-open",{"title":434,"path":435,"stem":436,"package":11,"category":11,"icon":364},"Instant first frame","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":438,"path":439,"stem":440,"package":11,"category":11,"icon":441},"Why Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":443,"path":444,"stem":445,"package":11,"category":11,"icon":22},"Sparkling","\u002Fguides\u002Fsparkling","8.guides\u002F12.sparkling",{"title":447,"path":448,"stem":449,"package":11,"category":11,"icon":450},"Debugging with Lynx DevTool","\u002Fguides\u002Fdebugging-with-lynx-devtool","8.guides\u002F14.debugging-with-lynx-devtool","i-lucide-bug",{"title":452,"path":453,"stem":454,"package":11,"category":11,"icon":455},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":457,"path":458,"stem":459,"package":11,"category":11,"icon":460},"Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":462,"path":463,"stem":464,"package":11,"category":11,"icon":465},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":467,"path":468,"stem":469,"package":11,"category":11,"icon":83},"Testing on device","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":471,"path":472,"stem":473,"package":11,"category":11,"icon":474},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":476,"path":477,"stem":478,"package":11,"category":11,"icon":27},"rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":480,"path":481,"stem":482,"package":11,"category":11,"icon":483},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":485,"path":486,"stem":487,"package":11,"category":11,"icon":488},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":490,"title":447,"body":491,"category":11,"description":924,"extension":925,"links":11,"meta":926,"navigation":927,"package":11,"path":448,"seo":928,"stem":449,"__hash__":931},"docs\u002F8.guides\u002F14.debugging-with-lynx-devtool.md",{"type":492,"value":493,"toc":914},"minimark",[494,506,511,518,543,550,554,563,566,569,592,612,647,651,658,661,665,676,713,725,739,749,752,756,759,790,800,854,860,863,867,874,882,886,910],[495,496,497,498,505],"p",{},"The styling and gesture failures that only reproduce on a device tend to leave nothing in your terminal, because they happen inside the native engine rather than in your build. ",[499,500,504],"a",{"href":501,"rel":502},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx-devtool",[503],"nofollow","Lynx DevTool"," is the Lynx team's desktop debugger for that gap. It is an Electron app built on a fork of the Chrome DevTools frontend, so its panels will look familiar, and it attaches to a running app over USB.",[507,508,510],"h2",{"id":509},"start-in-the-browser-preview","Start in the browser preview",[495,512,513,517],{},[514,515,516],"code",{},"rspeedy dev"," prints a preview URL alongside the QR code:",[519,520,525],"pre",{"className":521,"code":522,"language":523,"meta":524,"style":524},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","∟ Preview  http:\u002F\u002F192.168.1.24:3000\u002F__web_preview?casename=main.web.bundle\n","bash","",[514,526,527],{"__ignoreMap":524},[528,529,532,536,540],"span",{"class":530,"line":531},"line",1,[528,533,535],{"class":534},"sBMFI","∟",[528,537,539],{"class":538},"sfazB"," Preview",[528,541,542],{"class":538},"  http:\u002F\u002F192.168.1.24:3000\u002F__web_preview?casename=main.web.bundle\n",[495,544,545,546,549],{},"That page runs your web bundle in the browser, so the browser's own inspector covers layout and styling work with no device or desktop app involved. The ",[499,547,548],{"href":477},"dev server guide"," lists what the preview can't tell you, such as touch gestures, native animation timing, and safe areas. Lynx DevTool is for those cases, because it attaches to the native app.",[507,551,553],{"id":552},"connecting-a-device","Connecting a device",[495,555,556,557,562],{},"Download the desktop app from the ",[499,558,561],{"href":559,"rel":560},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx-devtool\u002Freleases",[503],"releases page",", then connect the device with a data cable. The app recognizes the device and lists the Lynx app running on it, and the toolbar shows the connection state. Keep the app in the foreground on the device when you switch between devices.",[495,564,565],{},"iOS needs Xcode and a matching iOS SDK on your Mac. Android needs Developer Mode and USB debugging turned on, and you have to accept the authorization prompt on the device. If the app never appears, the Lynx docs suggest building a test app from Xcode or Android Studio to confirm the machine can reach the device at all.",[495,567,568],{},"What you do next depends on the app hosting your bundle.",[495,570,571,575,576,581,582,585,586,591],{},[572,573,574],"strong",{},"LynxExplorer."," Turn on the Lynx Debug and Lynx DevTool switches on its Switch page. The ",[499,577,580],{"href":578,"rel":579},"https:\u002F\u002Flynxjs.org\u002Fguide\u002Fdevtool",[503],"official walkthrough"," is written against LynxExplorer, so install it alongside ",[499,583,584],{"href":468},"Lynx Go"," for debugging sessions. Builds are on the ",[499,587,590],{"href":588,"rel":589},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx\u002Freleases",[503],"lynx-family\u002Flynx releases page",", and your dev server's bundle URL works the same way in both.",[495,593,594,597,598,603,604,607,608,611],{},[572,595,596],{},"Sparkling."," Its debug tool turns on the debug flags and LogBox, and the desktop connection takes further setup. ",[499,599,602],{"href":600,"rel":601},"https:\u002F\u002Fgithub.com\u002Ftiktok\u002Fsparkling\u002Fblob\u002Fmain\u002Fdocs\u002Fen\u002Fguide\u002Fsparkling-go\u002Fdev-server-url.mdx#debugging-features",[503],"Sparkling's debugging notes"," list the pieces to add, which are ",[514,605,606],{},"enableAllSessions",", ",[514,609,610],{},"setLogBoxPresetValue",", and the JS bridge loaders.",[495,613,614,617,618,623,624,627,628,607,631,634,635,638,639,642,643,646],{},[572,615,616],{},"Your own host."," Follow ",[499,619,622],{"href":620,"rel":621},"https:\u002F\u002Flynxjs.org\u002Fguide\u002Fstart\u002Fintegrate-lynx-devtool",[503],"Integrate Lynx DevTool"," for the pods or Gradle artifacts, and keep their version aligned with your Lynx version. A host built from the ",[499,625,626],{"href":472},"Xcode guide"," needs ",[514,629,630],{},"LynxService\u002FDevtool",[514,632,633],{},"LynxDevtool",", and ",[514,636,637],{},"DebugRouter"," in its Podfile, plus ",[514,640,641],{},"LynxEnv.prepareDevToolForDevelopmentBeforeInit()"," and ",[514,644,645],{},"devtoolEnabled"," set during Lynx initialization. These switches default to off. The docs recommend limiting the integration to non-production builds, since it adds package size and memory overhead.",[507,648,650],{"id":649},"finding-your-way-around-a-vue-lynx-page","Finding your way around a Vue Lynx page",[495,652,653,654,657],{},"The Preact DevTools panel inspects ReactLynx components, so it does not apply here, and the panel docs list no Vue equivalent. You work from the Lynx elements your components rendered instead. Vy UI's ",[514,655,656],{},"data-vyui-*"," attributes help with this, because they mark a component's structural parts in the Elements tree.",[495,659,660],{},"Several Lynx pages can be alive at once, so check that you have selected the right instance if the tree looks unfamiliar.",[507,662,664],{"id":663},"finding-styling-failures-in-elements","Finding styling failures in Elements",[495,666,667,668,671,672,675],{},"Selecting a node shows its CSS rules under ",[572,669,670],{},"Styles",", with invalid and overridden declarations crossed out, faded, or flagged. ",[572,673,674],{},"Computed"," shows the box model and resolved values. Most on-device styling bugs in a Tailwind project fall into one of these patterns.",[495,677,678,681,682,685,686,693,694,696,697,700,701,704,705,708,709,712],{},[572,679,680],{},"The class is on the node, but no rule appears."," The CSS never reached the bundle. Either Tailwind's ",[514,683,684],{},"content"," scan dropped the package, which is the ",[499,687,689,692],{"href":688},"\u002Fguides\u002Ftesting-on-device#three-things-that-break-before-anything-renders",[514,690,691],{},"exclude"," fix"," for ",[514,695,46],{},", or the utility compiled to nothing. Tailwind v3 silently emits nothing for classes such as ",[514,698,699],{},"size-4.5",", or for an opacity modifier on a color wired through ",[514,702,703],{},"var()",". On the Vy UI preset that includes ",[514,706,707],{},"bg-neutral-900\u002F50",", while ",[514,710,711],{},"bg-black\u002F50"," works.",[495,714,715,718,719,721,722,724],{},[572,716,717],{},"A color resolves to white or black."," Lynx resolves one level of ",[514,720,703],{},", so compare your token's definition with the value in Computed. A token pointing at another token is the cause, and ",[499,723,485],{"href":486}," has the fix.",[495,726,727,730,731,734,735,738],{},[572,728,729],{},"A flex row is off-center by a few pixels."," Vue Lynx realizes empty-slot and ",[514,732,733],{},"v-if"," anchors as real zero-size nodes, and ",[514,736,737],{},"gap-*"," counts them. Look for an unexpected extra child in the tree.",[495,740,741,744,745,748],{},[572,742,743],{},"A sheet or modal runs off the preview."," Switch the screencast from LynxView to FullScreen, which the docs recommend for overlays outside the LynxView area. If the screen has stopped responding to taps, use Inspect on the dead area to find what is on top, since a leftover transparent backdrop looks identical to a frozen app. The ",[572,746,747],{},"Layers"," panel gives you a 3D view of the same stack, and right-clicking a layer reveals it in Elements.",[495,750,751],{},"Not every node creates platform UI, so a selection that doesn't highlight on the device isn't necessarily a problem. Edits you make here apply live, which makes it a quick way to test a fix before changing the source.",[507,753,755],{"id":754},"debugging-across-both-threads","Debugging across both threads",[495,757,758],{},"Vue Lynx runs your components on the background thread and your worklets on the main thread, and DevTool treats the two separately.",[495,760,761,762,765,766,769,770,773,774,777,778,781,782,785,786,789],{},"In ",[572,763,764],{},"Console",", background-thread logs appear in full by default, while main-thread logs arrive as strings prefixed with ",[514,767,768],{},"[main-thread.js]",", so a ",[514,771,772],{},"console.log"," of an object inside a worklet will not expand. JavaScript you type runs in the selected context, which is ",[514,775,776],{},"Background:-1"," until you enable main-thread debugging. Runtime errors always appear as strings. One to recognize is ",[514,779,780],{},"TypeError: cannot read property 'bind' of undefined",", which means a package's worklets never registered, and ",[514,783,784],{},"pnpm dlx @vyui\u002Fcli check"," will confirm whether ",[514,787,788],{},"includeWorkletPackages"," is the cause.",[495,791,792,795,796,799],{},[572,793,794],{},"Sources"," debugs the background thread once DevTool is enabled, including source-mapped original files if you configure Rspeedy's ",[514,797,798],{},"output.sourceMap",". Stepping through a worklet takes more setup:",[801,802,803,810,833,840],"ol",{},[804,805,806,807,809],"li",{},"Start the app with ",[514,808,516],{},".",[804,811,812,813,816,817,820,821,824,825,828,829,832],{},"Check that ",[514,814,815],{},"debug-info.json"," exists in the intermediate output directory and that ",[514,818,819],{},"templateDebugUrl"," in ",[514,822,823],{},"tasm.json"," points at it. Vue Lynx's plugin defaults ",[514,826,827],{},"debugInfoOutside"," to ",[514,830,831],{},"true",", which emits that file separately.",[804,834,835,836,839],{},"Turn on the ",[572,837,838],{},"Main Thread Debugging"," switch, then open or reload the page. The switch resets when the app restarts.",[804,841,842,843,846,847,850,851,809],{},"Select ",[572,844,845],{},"Main"," in the ",[572,848,849],{},"Threads"," pane and open ",[514,852,853],{},"main-thread.js",[495,855,856,857,859],{},"Source maps cover the background thread only, so on the main thread you read and step through compiled code. Search for a distinctive line from your worklet rather than expecting your file names in the navigator. Enabling main-thread debugging also gives full-format logs and a ",[514,858,845],{}," context in Console.",[495,861,862],{},"Exception breakpoints pause on every exception under PrimJS, the default engine, because it does not distinguish caught from uncaught. Android can switch to V8 from the DevTool Switch page if you need that distinction, along with V8-only features such as editing scripts.",[507,864,866],{"id":865},"recording-a-trace","Recording a trace",[495,868,869,870,873],{},"A janky gesture or a slow tab switch is a timing question, and ",[572,871,872],{},"Trace"," answers it with a timeline of script execution, element construction, layout, and rendering, plus flame charts of task durations. Choose Trace from the top bar, select your app, then press Start and Stop around the interaction. The result opens automatically and stays available under History. Trace needs the latest LynxExplorer or a dev version of Lynx in your own host, and a message tells you if the app you selected doesn't have it.",[495,875,876,881],{},[499,877,880],{"href":878,"rel":879},"https:\u002F\u002Flynxjs.org\u002Fguide\u002Fdevtool\u002Frecorder",[503],"Recorder"," is worth knowing about for bugs you can't reproduce on demand. It captures a page's complete runtime state to a file that replays on any Lynx-supported device without live network requests.",[507,883,885],{"id":884},"related","Related",[887,888,889,895,900,905],"card-group",{},[890,891,892],"card",{"icon":83,"title":467,"to":468},[495,893,894],{},"Get your app onto real hardware, and the config that has to be right first.",[890,896,897],{"icon":488,"title":485,"to":486},[495,898,899],{},"The engine constraints behind the styling failures you'll see in Elements.",[890,901,902],{"icon":22,"title":443,"to":444},[495,903,904],{},"An easy default shell, with its own in-app debug panel.",[890,906,907],{"icon":474,"title":471,"to":472},[495,908,909],{},"Building a custom iOS host that you can add DevTool to.",[911,912,913],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":524,"searchDepth":531,"depth":915,"links":916},2,[917,918,919,920,921,922,923],{"id":509,"depth":915,"text":510},{"id":552,"depth":915,"text":553},{"id":649,"depth":915,"text":650},{"id":663,"depth":915,"text":664},{"id":754,"depth":915,"text":755},{"id":865,"depth":915,"text":866},{"id":884,"depth":915,"text":885},"How to connect Lynx DevTool to a Vue Lynx app on a real device, and which panel to open for the failures a browser preview never shows.","md",{},{"icon":450},{"title":929,"description":930},"Debugging a Vue Lynx app with Lynx DevTool","Connect Lynx DevTool to a Vue Lynx app on a real device, inspect styles, debug main-thread worklets, and record traces, with the failures each panel helps you find.","AsLrx1VjL_jtNEjrt_rTIiw1fmDepIB4kIqcwqwLBsc",[933,935],{"title":443,"path":444,"stem":445,"description":934,"icon":-1,"children":-1,"navigation":-1},"TikTok's open-source native shell for Lynx, covering containers, scheme routing, the typed native bridge, and where a Vue Lynx app fits into it.",{"title":452,"path":453,"stem":454,"description":936,"icon":-1,"children":-1,"navigation":-1},"A comparison of the UI component libraries available for Lynx today, covering what each one ships, which framework it targets, and how mature it is.",1793518674884]