https://github.com/shugomatsuzawa/simple-debugging-tools-for-web
Web開発中のデバッグに役立つちょっとした機能をまとめた、シンプルなブラウザ拡張機能です。 外部サイト移動アラート / Titleタグの取得 / urlファイルの作成
https://github.com/shugomatsuzawa/simple-debugging-tools-for-web
javascript safari-extension web-extensions
Last synced: 10 months ago
JSON representation
Web開発中のデバッグに役立つちょっとした機能をまとめた、シンプルなブラウザ拡張機能です。 外部サイト移動アラート / Titleタグの取得 / urlファイルの作成
- Host: GitHub
- URL: https://github.com/shugomatsuzawa/simple-debugging-tools-for-web
- Owner: shugomatsuzawa
- License: lgpl-2.1
- Created: 2024-02-24T16:12:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-09T11:19:13.000Z (about 2 years ago)
- Last Synced: 2025-03-31T23:57:57.875Z (over 1 year ago)
- Topics: javascript, safari-extension, web-extensions
- Language: HTML
- Homepage: https://shugomatsuzawa.com/works/2024/simple-debugging-tools-for-web/
- Size: 699 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# シンプルWebデバッグツール
Web開発中のデバッグに役立つちょっとした機能をまとめた、シンプルなブラウザ拡張機能です。
この拡張機能はSafariのために作られていますが、一部の機能はWebExtensions APIに対応した他のブラウザでもお使いいただけます。
- 外部サイト移動アラート
- あなたが指定したドメインと異なるページに移動した際に画面上部でお知らせします。
例えばステージング環境でWebサイトのテストをする際、誤って本番環境に接続されているリンクをタップした場合、この機能を使えばすぐに気づくことができます。
- Titleタグの取得
- 現在開いているタブのTitleタグテキストを取得し、コピーしやすいフィールドを表示します。
- Windowsインターネットショートカットの作成（Windows以外のみ）
- 現在のページのロケーションをWindowsインターネットショートカット（```.url```ファイル）で出力します。
他プラットフォームのユーザーにWebサイトのショートカットを共有することができます。
（Apple M1以降のチップを搭載したMacでファイルをローカルに保存する場合、[Shareful](https://sindresorhus.com/shareful) を使うと便利です）
今後他にも機能を追加するかもしれません。
## ローカルで実行する
1. node.jsおよびnpm等のパッケージマネージャーをインストールします。
1. 次のコマンドを実行して、リポジトリをクローンします。
```sh
git clone git@github.com:shugomatsuzawa/Simple-Debugging-Tools-for-Web.git
```
1. 次のコマンドを実行して、依存関係をインストールします。
```sh
cd "Shared (Extension)/Resources"
npm install
```
1. ブラウザで実行します。
- Safariの場合 : Xcodeでビルドします。
- その他のブラウザの場合 : ブラウザのデベロッパーモードで、```Shared (Extension)/Resources```ディレクトリを読み込みます。
## CSSクラス(Tailwind CSS)を編集する場合
CSSを編集する場合は、Tailwind CSSで作ったCSSを再度ビルドする必要があります。
```sh
# Shared (Extension)/Resourcesに移動
cd "Shared (Extension)/Resources"
# ビルドする
npm install
npx tailwindcss -i ./tailwind.css -o ./style.css --minify
```
## 貢献する
バグを見つけた場合は、[GitHub Issues](https://github.com/shugomatsuzawa/Simple-Debugging-Tools-for-Web/issues)からできるだけ詳しい再現手順を教えていただけると助かります。
感想などありましたら私の[Webサイト](https://shugomatsuzawa.com/contact/)やソーシャルメディアからお気軽にご連絡ください。