ウェブページのリソース読み込み状況を
リアルタイムで監視・分析するChrome拡張機能

🚀 Chrome Web Storeでインストール 🔒 ソースコード: 非公開
88+ 対応Chrome
6 リソースタイプ
∞ 監視リソース数
1.1.3 現在バージョン

✨ v1.1.3 最新アップデート

🎯

UI/UX改善

  • ポップアップウィンドウで最初のリソースを自動表示（右パネルの空白問題を解決）
  • ネットワーク速度ドロップダウンのスタイルを他の要素と統一
  • 縦幅を取りすぎる問題を修正し、UIの一貫性を向上
🔇

開発環境の最適化

  • console.log出力を完全無効化（233件 → 0件）
  • 開発コンソールの視認性が大幅に向上
  • デバッグログによるパフォーマンス影響を削減
  • リリース版として最適化されたコード
🛠️

機能の整理

  • デバッガーAPI機能を無効化（「このブラウザのデバッグを開始しました」メッセージを削除）
  • オーバーライド検出機能を保留（インジケーター⚠️を非表示）
  • 将来のバージョンでより完成度の高い機能として再実装予定
  • コードベースのクリーンアップ（503行追加、590行削除）

📋 過去のバージョン

v1.1.1 - 別ウィンドウ表示とCookie管理機能
🪟

別ウィンドウ表示

  • 拡張機能アイコンクリックで独立ウィンドウ（1200x800）を開く
  • ポップアップを経由せず、1アクションで起動
  • 既に開いているウィンドウがある場合はフォーカス
  • 5秒ごとに自動更新
🍪

Cookie管理機能

  • リソースごとにCookie数を表示
  • サブドメイン、ドット付きドメインのCookieも正確に取得
  • 詳細パネルに「🍪 X個を表示」ボタン
  • クリックで別ウィンドウにCookie一覧を表示
📋

Cookie詳細ウィンドウ

  • 別ウィンドウ（900x700）でCookie一覧を表示
  • Cookie名、値、ドメイン、パス、有効期限
  • HttpOnly, Secure, SameSiteフラグを色分け表示
  • 検索・フィルタリング、値をクリックでコピー

R-kitとは？

R-kitは、ウェブページのリソース読み込み状況をリアルタイムで監視・分析するChrome拡張機能です。 Chrome DevToolsに統合され、開発者がWebページのパフォーマンスを詳細に分析できるツールです。

🔍

詳細なリソース監視

  • ページロード時のリソース一覧取得
  • URL、タイプ、開始・終了時刻の表示
  • ファイルサイズの詳細情報（transferSize, decodedBodySize, encodedBodySize）
  • CDNリソースの判定機能
📊

視覚的なタイムライン

  • 縦軸：リソース、横軸：時間のタイムライン表示
  • リソースタイプ別の色分け表示
  • 読み込み開始から完了までの可視化
  • パフォーマンスボトルネックの特定
🔧

強力なフィルタリング

  • タイプ別フィルタリング（CSS、JS、画像、フォント等）
  • ソート機能（開始時刻、サイズ、タイプ）
  • 検索機能によるリソース検索
  • データのエクスポート機能

🚀 インストール方法

1

Chrome Web Store

Chrome Web Storeで「R-kit」を検索してインストールボタンをクリック

2

Chromeに追加

「Chromeに追加」をクリックして拡張機能をブラウザにインストール

3

DevToolsを開く

Webページでブラウザの開発者ツール（F12キー）を開く

4

R-kitタブ

「R-kit」タブをクリックして使用開始！リソース分析を始めましょう

💻 動作環境

ブラウザ Google Chrome 88以降
Manifest Version Version 3 対応
必要な権限 DevTools, ActiveTab
プラットフォーム Windows, macOS, Linux

👨‍💻 開発者情報

R-kitはCreationStock, inc.によって開発されています。 バグ報告や機能要求は、Chrome Web Storeのレビュー欄または公式サイトからお問い合わせください。

🔒 ソースコード: 非公開