Panel DevTools, który dekoduje przepływy danych React Router i Remix
React Router Inspector, stworzony przez niezależnego dewelopera, to rozszerzenie Chrome DevTools do debugowania aplikacji React Router v6/v7 i Remix. Dekoduje ładunki loaderów i akcji na czytelne wartości oraz ujawnia pobrania po stronie serwera, które są pomijane przez zakładkę Sieć. Rozszerzenie dodaje dedykowaną zakładkę DevTools z dekodowanymi listami żądań, połączonymi logami konsoli i zmiennymi panelami. Jest skierowane do web developerów, którzy potrzebują widoczności na poziomie tras i jaśniejszego przepływu danych między serwerem a klientem podczas rozwoju.
Do czego służy React Router Inspector?
Rozszerzenie to jest panelem DevTools przeznaczonym wyłącznie do rozwoju, stworzonym w celu pokazania, jak zachowują się ładowarki tras i akcje w czasie rzeczywistym. Przyczepia się do Chrome DevTools i wyświetla każde żądanie danych z nagłówkami, czasem i zdekodowanymi ciałami, dając programistom widoczność ograniczoną do tras zamiast surowych ładunków sieciowych. To odpowiada inżynierom pracującym nad projektami React Router v6, v7 lub Remix, którzy muszą sprawdzać zdekodowane wartości, takie jak Daty, Mapy i BigInty.
Jak ujawnia aktywność renderowania po stronie serwera?
Narzędzie to ujawnia pobrania SSR, których standardowe narzędzia przeglądarki nie ujawniają, pokazując pobrania po stronie serwera obok żądań klienta. Może integrować się z towarzyszącym wtyczką Vite, aby przesyłać logi serwera do panelu, dzięki czemu programiści widzą zarówno logi przeglądarki, jak i serwera/SSR w jednym zjednoczonym widoku. Panel oferuje również filtrowanie źródła i przełącznik Zachowaj, aby zachować dane podczas nawigacji dla krokowego debugowania.
Jak radzi sobie z złożonymi typami danych i ergonomią dla programistów?
Inspektor dekoduje formaty turbo-stream na rzeczywiste wartości, zachowując złożone typy, takie jak Daty, Mapy i BigInty, zamiast pozostawiać nieprzezroczyste zakodowane bloby. Interfejs użytkownika jest skierowany do programistów z możliwością zmiany rozmiaru paneli i podświetlaniem błędów, a także wyświetla operacje GraphQL i REST w układzie przypominającym sieć. Aby uzyskać pełną integrację logów serwera, rozszerzenie wymaga towarzyszącego vite-plugin-rr-inspector w projektach opartych na Vite.
Narzędzie deweloperskie skoncentrowane na debugowaniu na poziomie tras z wyraźnym kompromisem
To rozszerzenie jest ukierunkowaną opcją dla deweloperów, którzy potrzebują zdekodowanej, ograniczonej do tras widoczności w loaderach i akcjach oraz dla tych, którzy wymagają widoczności pobierania SSR podczas rozwoju. Zależy od Chrome DevTools i, w przypadku logów serwera, od wtyczki Vite, więc nie nadaje się do debugowania produkcyjnych wersji lub projektów bez konfiguracji deweloperskiej Vite. Użyj go, gdy potrzebujesz bezpośrednich, czytelnych informacji o przepływach danych napędzanych routerem.
