Web開発中のデバッグに役立つちょっとした機能をまとめた、シンプルなブラウザ拡張機能です。
この拡張機能はSafariのために作られていますが、一部の機能はWebExtensions APIに対応した他のブラウザでもお使いいただけます。
- 外部サイト移動アラート
- あなたが指定したドメインと異なるページに移動した際に画面上部でお知らせします。
例えばステージング環境でWebサイトのテストをする際、誤って本番環境に接続されているリンクをタップした場合、この機能を使えばすぐに気づくことができます。
- あなたが指定したドメインと異なるページに移動した際に画面上部でお知らせします。
- Titleタグの取得
- 現在開いているタブのTitleタグテキストを取得し、コピーしやすいフィールドを表示します。
- Windowsインターネットショートカットの作成(Windows以外のみ)
- 現在のページのロケーションをWindowsインターネットショートカット(
.url
ファイル)で出力します。
他プラットフォームのユーザーにWebサイトのショートカットを共有することができます。
(Apple M1以降のチップを搭載したMacでファイルをローカルに保存する場合、Shareful を使うと便利です)
- 現在のページのロケーションをWindowsインターネットショートカット(
今後他にも機能を追加するかもしれません。
- node.jsおよびnpm等のパッケージマネージャーをインストールします。
- 次のコマンドを実行して、リポジトリをクローンします。
git clone [email protected]:shugomatsuzawa/Simple-Debugging-Tools-for-Web.git
- 次のコマンドを実行して、依存関係をインストールします。
cd "Shared (Extension)/Resources" npm install
- ブラウザで実行します。
- Safariの場合 : Xcodeでビルドします。
- その他のブラウザの場合 : ブラウザのデベロッパーモードで、
Shared (Extension)/Resources
ディレクトリを読み込みます。
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サイトやソーシャルメディアからお気軽にご連絡ください。