シンプルWebデバッグツール

Web開発中のデバッグに役立つちょっとした機能をまとめた、シンプルなブラウザ拡張機能です。
この拡張機能はSafariのために作られていますが、一部の機能はWebExtensions APIに対応した他のブラウザでもお使いいただけます。

• 外部サイト移動アラート
  • あなたが指定したドメインと異なるページに移動した際に画面上部でお知らせします。
    例えばステージング環境でWebサイトのテストをする際、誤って本番環境に接続されているリンクをタップした場合、この機能を使えばすぐに気づくことができます。
• Titleタグの取得
  • 現在開いているタブのTitleタグテキストを取得し、コピーしやすいフィールドを表示します。
• Windowsインターネットショートカットの作成（Windows以外のみ）
  • 現在のページのロケーションをWindowsインターネットショートカット（.urlファイル）で出力します。
    他プラットフォームのユーザーにWebサイトのショートカットを共有することができます。
    （Apple M1以降のチップを搭載したMacでファイルをローカルに保存する場合、Shareful を使うと便利です）

今後他にも機能を追加するかもしれません。

ローカルで実行する

1. node.jsおよびnpm等のパッケージマネージャーをインストールします。
2. 次のコマンドを実行して、リポジトリをクローンします。

   git clone git@github.com:shugomatsuzawa/Simple-Debugging-Tools-for-Web.git

3. 次のコマンドを実行して、依存関係をインストールします。

   cd "Shared (Extension)/Resources"
   npm install

4. ブラウザで実行します。
   • Safariの場合 : Xcodeでビルドします。
   • その他のブラウザの場合 : ブラウザのデベロッパーモードで、Shared (Extension)/Resourcesディレクトリを読み込みます。

CSSクラス(Tailwind CSS)を編集する場合

CSSを編集する場合は、Tailwind CSSで作ったCSSを再度ビルドする必要があります。

# Shared (Extension)/Resourcesに移動
cd "Shared (Extension)/Resources"

# ビルドする
npm install
npx tailwindcss -i ./tailwind.css -o ./style.css --minify

貢献する

バグを見つけた場合は、GitHub Issuesからできるだけ詳しい再現手順を教えていただけると助かります。
感想などありましたら私のWebサイトやソーシャルメディアからお気軽にご連絡ください。