DevTools-panel som avkodar React Router och Remix dataflöden
React Router Inspector, av en oberoende utvecklare, är en Chrome DevTools-tillägg för att felsöka React Router v6/v7 och Remix-applikationer. Den avkodar loader- och action-payloads till läsbara värden och visar server-sidans hämtningar som fliken Nätverk missar. Tillägget lägger till en dedikerad DevTools-panel med avkodade begärningslistor, kombinerade konsol-loggar och justerbara paneler. Det riktar sig till webbutvecklare som behöver rutt-nivå synlighet och tydligare server-klient databasflöde under utveckling.
Vad används React Router Inspector för?
Förlängningen är en utvecklingsspecifik DevTools-panel som är byggd för att visa hur ruttladdare och åtgärder beter sig i realtid. Den ansluter till Chrome DevTools och listar varje databasförfrågan med rubriker, tidsinställningar och avkodade kroppar, vilket ger utvecklare rutt-specifik synlighet istället för råa nätverksbelastningar. Detta passar ingenjörer som arbetar med React Router v6, v7 eller Remix-projekt som behöver inspektera avkodade värden som Dates, Maps och BigInts.
Hur exponerar den server-side rendering aktivitet?
Verktyget visar SSR-hämtningar som standard webbläsarverktyg inte avslöjar, och visar server-side hämtningar tillsammans med klientförfrågningar. Det kan integreras med en följeslagare Vite-plugin för att strömma serverloggar till panelen, så att utvecklare ser både webbläsar- och server/SSR-loggar i en enda enhetlig vy. Panelen erbjuder också källfilter och en Preserve-växel för att behålla data över navigeringar för stegvis felsökning.
Hur hanterar den komplexa datatyper och utvecklarergonomi?
Inspektorn avkodar turbo-stream-format till verkliga värden, vilket bevarar komplexa typer som Dates, Maps och BigInts istället för att lämna opaka kodade blobbar. UI:et riktar sig till utvecklare med justerbara paneler och felmarkering, och listar GraphQL och REST-operationer i en nätverksliknande layout. För full serverloggintegration kräver förlängningen vite-plugin-rr-inspector följeslagaren i Vite-baserade projekt.
Ett fokuserat utvecklingsverktyg för rutt-nivå felsökning med en tydlig avvägning
Denna tillägg är ett riktat alternativ för utvecklare som behöver avkodad, rutt-scope synlighet i laddare och åtgärder och för dem som kräver SSR hämtning synlighet under utveckling. Det beror på Chrome DevTools och, för serverloggar, en Vite-plugin, så det är inte lämpligt för felsökning av produktionsbyggnader eller projekt utan en Vite utvecklingsinställning. Använd det när du behöver direkt, läsbar insikt i router-drivna dataflöden.
