Skip to content
starLightDemo

デバッグ・テスト向け拡張機能

デバッグ・テスト向け拡張機能

Section titled “デバッグ・テスト向け拡張機能”

デバッグとテストを効率化するおすすめのChrome拡張機能を紹介します。

1. Requestly

Section titled “1. Requestly”

HTTPリクエストをインターセプト・変更する拡張機能です。

機能

Section titled “機能”
  • リクエストの変更: HTTPリクエストのURL、ヘッダー、ボディを変更
  • レスポンスの変更: HTTPレスポンスの内容を変更
  • リクエストのブロック: 特定のリクエストをブロック
  • リダイレクト: リクエストを別のURLにリダイレクト

使い方

Section titled “使い方”
  1. Chrome Web Storeから「Requestly」をインストール
  2. ルールを作成してリクエストを変更

実践例

Section titled “実践例”
// APIのレスポンスをモックする
// ルール: example.com/api/users → mock-users.json
{
  "source": {
    "url": "https://example.com/api/users"
  },
  "destination": {
    "url": "https://example.com/mock-users.json"
  }
}

2. ModHeader

Section titled “2. ModHeader”

HTTPリクエストヘッダーを追加・変更する拡張機能です。

機能

Section titled “機能”
  • カスタムヘッダーの追加: 任意のHTTPヘッダーを追加
  • ヘッダーの変更: 既存のヘッダーを変更
  • プロファイルの保存: ヘッダー設定をプロファイルとして保存

使い方

Section titled “使い方”
  1. Chrome Web Storeから「ModHeader」をインストール
  2. アイコンをクリックしてヘッダーを設定

実践例

Section titled “実践例”
// 認証トークンを追加
Authorization: Bearer your-token-here


// カスタムヘッダーを追加
X-Custom-Header: custom-value

3. User-Agent Switcher

Section titled “3. User-Agent Switcher”

User-Agentを変更する拡張機能です。

機能

Section titled “機能”
  • User-Agentの変更: ブラウザのUser-Agentを変更
  • デバイスのエミュレート: モバイルデバイスをエミュレート
  • プロファイルの保存: User-Agent設定をプロファイルとして保存

使い方

Section titled “使い方”
  1. Chrome Web Storeから「User-Agent Switcher」をインストール
  2. アイコンをクリックしてUser-Agentを選択

4. Clear Cache

Section titled “4. Clear Cache”

キャッシュをクリアする拡張機能です。

機能

Section titled “機能”
  • キャッシュのクリア: ブラウザのキャッシュをクリア
  • Cookieのクリア: Cookieをクリア
  • ローカルストレージのクリア: ローカルストレージをクリア

使い方

Section titled “使い方”
  1. Chrome Web Storeから「Clear Cache」をインストール
  2. アイコンをクリックしてキャッシュをクリア

5. Window Resizer

Section titled “5. Window Resizer”

ブラウザウィンドウのサイズを変更する拡張機能です。

機能

Section titled “機能”
  • プリセットサイズ: よく使われる画面サイズをプリセット
  • カスタムサイズ: カスタムサイズを設定
  • レスポンシブテスト: レスポンシブデザインをテスト

使い方

Section titled “使い方”
  1. Chrome Web Storeから「Window Resizer」をインストール
  2. アイコンをクリックしてサイズを選択

6. WhatFont

Section titled “6. WhatFont”

Webページのフォント情報を確認する拡張機能です。

機能

Section titled “機能”
  • フォントの確認: ページ上のフォント情報を確認
  • フォントサイズの確認: フォントサイズを確認
  • 行間の確認: 行間を確認

使い方

Section titled “使い方”
  1. Chrome Web Storeから「WhatFont」をインストール
  2. アイコンをクリックしてフォントを確認

7. Page Ruler

Section titled “7. Page Ruler”

ページ上の要素のサイズと位置を測定する拡張機能です。

機能

Section titled “機能”
  • 要素のサイズ測定: 要素の幅と高さを測定
  • 位置の測定: 要素の位置を測定
  • ガイドラインの表示: ガイドラインを表示

使い方

Section titled “使い方”
  1. Chrome Web Storeから「Page Ruler」をインストール
  2. アイコンをクリックして測定を開始

まとめ

Section titled “まとめ”

デバッグ・テスト向けのおすすめ拡張機能：

  1. Requestly: HTTPリクエストのインターセプト・変更
  2. ModHeader: HTTPヘッダーの追加・変更
  3. User-Agent Switcher: User-Agentの変更
  4. Clear Cache: キャッシュのクリア
  5. Window Resizer: ブラウザウィンドウのサイズ変更
  6. WhatFont: フォント情報の確認
  7. Page Ruler: 要素のサイズと位置の測定

これらの拡張機能を活用することで、デバッグとテストを効率化できます。