React Router Inspector Google Chrome için

React Router ve Remix veri akışlarını çözen DevTools paneli

React Router Inspector, bağımsız bir geliştirici tarafından yapılmış bir Chrome DevTools uzantısıdır ve React Router v6/v7 ile Remix uygulamalarını hata ayıklamak için kullanılır. Yükleyici ve eylem yüklerini okunabilir değerlere çözer ve Ağ sekmesinin atladığı sunucu tarafı fetch'lerini ortaya çıkarır. Uzantı, çözümlenmiş istek listeleri, birleştirilmiş konsol günlükleri ve yeniden boyutlandırılabilir paneller ile özel bir DevTools paneli ekler. Geliştirme sırasında rota düzeyinde görünürlük ve daha net sunucu-müşteri veri akışı gerektiren web geliştiricilerine yöneliktir.

React Router Inspector ne için kullanılır?

Bu uzantı, rota yükleyicilerinin ve eylemlerinin gerçek zamanlı olarak nasıl davrandığını göstermek için oluşturulmuş yalnızca geliştirme amaçlı bir DevTools panelidir. Chrome DevTools'a bağlanır ve her veri isteğini başlıklar, zamanlama ve çözülmüş gövde ile listeler, geliştiricilere ham ağ yükleri yerine rota kapsamlı görünürlük sağlar. Bu, çözülmüş değerleri, örneğin Tarihler, Haritalar ve BigInt'leri incelemesi gereken React Router v6, v7 veya Remix projeleri üzerinde çalışan mühendisler için uygundur.

Sunucu tarafı render etkinliğini nasıl açığa çıkarır?

Bu araç, standart tarayıcı araçlarının ortaya çıkarmadığı SSR fetch'lerini yüzeye çıkararak, sunucu tarafı fetch'lerini istemci istekleriyle birlikte gösterir. Geliştiricilerin hem tarayıcı hem de sunucu/SSR günlüklerini tek bir birleşik görünümde görmeleri için panele sunucu günlüklerini akıtmak üzere bir Vite eklentisi ile entegre olabilir. Panel ayrıca kaynak filtreleme ve adım adım hata ayıklama için navigasyonlar arasında verileri korumak üzere bir Koruma anahtarı sunar.

Karmaşık veri türlerini ve geliştirici ergonomisini nasıl ele alır?

Denetleyici, turbo-stream formatlarını gerçek değerlere çözer, Tarihler, Haritalar ve BigInt'ler gibi karmaşık türleri koruyarak opak kodlanmış bloklar bırakmaz. UI, yeniden boyutlandırılabilir paneller ve hata vurgulama ile geliştiricilere hitap eder ve GraphQL ve REST işlemlerini ağ tarzı bir düzen içinde listeler. Tam sunucu günlük entegrasyonu için uzantı, Vite tabanlı projelerde vite-plugin-rr-inspector eşlik edenine ihtiyaç duyar.

Belirli bir ticaret karşılığında rota düzeyinde hata ayıklama için odaklanmış bir geliştirme aracı

Bu uzantı, yükleyicilere ve eylemlere yönelik çözülmüş, rota kapsamlı görünürlük gerektiren geliştiriciler için hedeflenmiş bir seçenektir ve geliştirme sırasında SSR fetch görünürlüğüne ihtiyaç duyanlar içindir. Chrome DevTools'a ve sunucu günlükleri için bir Vite eklentisine bağımlıdır, bu nedenle üretim derlemelerini veya Vite geliştirme kurulumu olmayan projeleri hata ayıklamak için uygun değildir. Router tarafından yönlendirilen veri akışlarına doğrudan, okunabilir bir içgörüye ihtiyaç duyduğunuzda kullanın.