7つの機能をステップバイステップで解説
ページ内のリンクエラーを自動検出し、カラーコードで視覚化
Chromeツールバーの拡張機能アイコンをクリックします。C-kitのサイドパネルが開きます。
タブナビゲーションから「LinkChecker」を選択します。デフォルトで最初のタブです。
「Check Links」ボタンをクリックして、現在のページにある全てのリンクのスキャンを開始します。
プログレスバーでスキャンの進行状況を確認できます。チェック中はページ上のリンクがオレンジ色の点線でハイライトされます。
チェック完了後、Total（総数）、Valid（正常）、Error（エラー）、Warning（警告）の件数が表示されます。
ページ上のリンクが色分けされます。
ハイライトされたリンクにマウスを重ねると、HTTPステータスコードとその意味がツールチップで表示されます。
「Download Report」ボタンで、全リンクの一覧・ステータスコード・URLを含むHTMLレポートをダウンロードできます。
「Clear Highlights」ボタンでページ上の全てのカラーコードを除去し、元の表示状態に戻します。
Pro版ユーザーはAuto駆動モードを有効にできます。ページ読み込み時に自動でリンクチェックが実行され、エラー数が拡張機能アイコンにバッジ表示されます。
ページのスナップショットを保存して、現在の表示と比較
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「Trace Compare」を選択します。
名前入力欄に分かりやすい名前を入力します（例:「CSS変更前」「リリース前」）。空欄の場合はページタイトルが自動設定されます。
「Save Snapshot」をクリックすると、現在のページのDOM状態（CSS・画像含む）が完全に記録されます。
保存されたスナップショットがカード形式で一覧表示されます。サムネイル・名前・URL・日時が確認できます。最大10件まで保存可能です。
「Overlay」ボタンをクリックすると、保存したスナップショットが半透明で現在のページに重なって表示されます。変更箇所がズレとして視覚的に分かります。
コントロールバーの透過度スライダーで、オーバーレイの透明度を自由に調整できます。差分を見やすい透過度に設定しましょう。
「Window」ボタンで別ウィンドウにスナップショットを表示し、現在のページと横並びで比較できます。画面の右半分に自動配置されます。
オーバーレイ・ウィンドウどちらのモードでも、スクロールが自動同期されます。ページのどの位置でも差分を素早く確認できます。
スナップショットはHTML形式や画像（透過度選択可）でダウンロードできます。不要なスナップショットは削除ボタンで整理しましょう。
「デザインファイルを読み込む」ボタンからPNG/JPG等の画像ファイルを選択すると、デザインカンプがページに重なって表示されます。透過度を調整してデザインと実装の差分を確認しましょう。
Googleサインイン・Pro版アップグレード・サブスクリプション管理
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「Account」を選択します。
「Sign In with Google」ボタンをクリックしてGoogleアカウントで認証します。Chrome同期が有効になっている必要があります。
サインイン後、プロフィール写真・名前・メールアドレス・アカウント種別（Free/Pro）が表示されます。
Freeユーザーには「Upgrade to Pro」カードが表示されます。月額$1で全機能が無制限になります。
Stripe Checkoutの安全な決済ページにリダイレクトされます。カード情報を入力して購入を完了します。
Proユーザーは「Manage Subscription」からStripe Customer Portalにアクセスし、プラン変更やキャンセルが行えます。
組織管理のChromeでGoogle同期が使えない場合、トークン認証でPro版をアクティベートできます。登録メールに届くトークンを入力してください。
開発/本番環境のURLペアをワンクリックで切り替え
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「Switcher」を選択します。
ペア名（例:「マイプロジェクト」）、URL A（開発環境）、URL B（本番環境）を入力して追加ボタンをクリックします。
現在のページのURLがペアのいずれかに一致する場合、「Switch」ボタンで対応するURLに瞬時に切り替わります。
登録済みのURLペアがリスト形式で表示されます。各ペアの名前と両方のURLを確認できます。
URLペアをドラッグ&ドロップで並べ替えて、よく使うペアを上に配置できます。
「新しいタブで開く」オプションをONにすると、切り替え先のURLが新しいタブで開きます。現在のタブはそのまま維持されます。
不要なURLペアは削除ボタンでリストから除去できます。
ページ内のインラインstyle/scriptタグを検出
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「Embedded」を選択します。
「Check Embedded」ボタンをクリックして、現在のページのインラインstyleタグとscriptタグを検出します。
検出されたインラインstyleタグ数とscriptタグ数がサマリーとして表示されます。
各インライン要素のコードプレビュー・場所・サイズの詳細情報がリスト表示されます。
インラインコードを外部ファイル化することで、メンテナンス性の向上・ブラウザキャッシュの活用・Content Security Policy準拠が実現できます。
検出結果を元に、インラインのstyleを外部.cssファイルに、scriptを外部.jsファイルに移行して本番環境を最適化しましょう。
URLのエンコード・デコードをワンクリックで変換
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「URLTool」を選択します。
入力テキストエリアにURLやエンコード済みのテキストを貼り付けます。
「Decode」ボタンで%エンコード（%20, %3A等）を人間が読める文字に変換します。
「Encode」ボタンでURL中の特殊文字や日本語を%エンコードに変換します。
変換結果が出力テキストエリアに表示されます。
「Copy」ボタンで結果をクリップボードにコピーします。コピー完了メッセージが一瞬表示されます。
「Clear」ボタンで入力・出力の両方をリセットし、新しい変換作業を始められます。
JSON / HTML / CSS / JavaScript のコード整形・圧縮
拡張機能アイコンをクリックしてC-kitを開きます。
タブナビゲーションから「Formatter」を選択します。
入力テキストエリアにフォーマットしたいコードを貼り付けます。
ドロップダウンメニューから対象の言語を選択します: JSON、HTML、CSS、JavaScript。
「Format」ボタンで、コードに適切なインデント・改行を追加して読みやすく整形します。
「Minify」ボタンで、空白・改行・コメントを除去してコードを圧縮します。本番デプロイ前に最適です。
出力エリアではコードがシンタックスハイライトされて表示されます。構文の確認が容易になります。
「Copy」ボタンで整形済みまたは圧縮済みのコードをクリップボードにコピーします。
「Clear」ボタンで入力・出力をリセットし、別のコードのフォーマット作業に移れます。