自WebサイトたちをテストしたいChrome拡張コレクション

[Google Chrome拡張17選](https://dev.to/codenblog/17-google-chrome-extensions-for-developers-3974) 
[これ無しではいられないChrome拡張](https://dev.to/aemiej/top-10-chrome-extensions-i-can-t-live-without-2bdf)
および各種拡張紹介を読んでいて、一連自分のためのテストなりに使ったら面白そうなものを集めておいた。見つけ次第増やす、という落書き。

### 1. 応答性能: Browserstack

URL: http://www.browserstack.com/
異なるブラウザ上でのウェブサイトの応答性を即座にテストすることができる。
[BrowserStackを使ってブラウザテストに取り組んでいる知見](https://qiita.com/hotu_ta/items/759a64b1108860740894) でも紹介あり。
[ここから入手](https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb?hl=en)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ad35b182-9b8c-cad0-d3e6-6f5b99314880.png)


### 2. 色: ColorZilla
http://colorzilla.com/
[ウェブ開発者は必ず入れたいブラウザ拡張機能13選](https://qiita.com/baby-degu/items/83f674c0eb91d1ea1521#colorzilla) でも紹介あり。
ブラウザの任意のポイントから色の読み取り、色を調整、別のプログラムに貼り付けることができる。
[ここから入手](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/e58cd554-ba87-333f-4349-fa1904405b33.png)



### 3. CSS: CSS Viewer

シンプルなCSSプロパティビューア。
[ここから入手](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/5d8459a7-533e-c656-1e3c-7f0404c3cf86.png)

### 4. CSS: User CSS

簡単にCSSを適用して遊べる。
[ここから入手](https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb/related?hl=en) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ba7f51e4-2495-b60d-4c5b-0e7863a7a3a7.png)



### 5. リンク: Check My Link
URL: https://logflare.app/
ウェブページをクロールして壊れたリンクを探すリンクチェッカー。
[ここから入手](https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf?hl=en)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/e66640be-20e5-a156-3af3-231b09bf615f.png)



### 6. キャッシュ: Clear Cache

ワンクリックで、キャッシュや閲覧データをクリアする。
[GoogleChromeのおすすめ拡張機能](https://qiita.com/sozaiya/items/fb30f6fd3df4a8a6c3a5) にも紹介あり。
[ここから入手](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) 


### 7. ダークモード: Dark Reader
URL: https://darkreader.org/
あらゆるウェブサイトにダークモードを。
[Dark Readerを利用してWebサイトをとことんダークモードにする](https://qiita.com/kai_kou/items/8b33e599668926d80e7e) にも紹介あり。

[ここから入手](https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en) 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/aa3453bd-cb13-8f9e-4981-0c49eb2604a9.png)


### 8. 要素間の距離: Dimensions
URL: https://www.felixniklas.com
マウスポインタを上下左右に動かしたときの寸法を、境界線に当たるまで測定。ウェブサイト上の要素間の距離を測定したい場合に。
[ここから入手](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/aa29bc05-928b-e455-b2e9-117e1b286654.png)


### 9. ウィンドウサイズ: Window Resizer

URL: http://coolx10.com/
ブラウザのウィンドウサイズを変更して、様々な画面解像度をエミュレートする。
[ここから入手](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/c9fced6f-ac47-fa4c-186a-d37e64387aee.png)

### 10. Htmlのアウトライン構造: HTML5: Window Resizer

アウトライン構造が正しくできているかのチェック。
[Web制作によく使うChromeのエクステンション](https://qiita.com/nadonado/items/f5248aafd0a157216898) にも紹介あり。
[ここから入手](https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/25fe86cf-f907-2dad-b094-378b862cd4c1.png)


### 11. Alt/Meta 要素: Alt&Meta viewer

Alt, Metaタグを簡単に確認できる。
[Web制作によく使うChromeのエクステンション](https://qiita.com/nadonado/items/f5248aafd0a157216898) にも紹介あり。
[ここから入手](https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/1cb9dc1d-e2a9-f469-e1fc-602909a3abe3.png)



### 12. フォント: WhatFont

URL: http://chengyinliu.com/
ページで使用されているフォントを調べる。
[ここから入手](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/7024c537-a6be-7f10-1ec5-d7c30ea00b26.png)


### 13. 利用技術: Wappalyzer
URL: http://wappalyzer.com/
ウェブ技術を識別。どのようなウェブサイトがどのように構築されているかを示す技術プロファイラー。
[「このサイト何の技術でできているんだろう？」が一発で解決できる機能を紹介](https://qiita.com/TeppeiMimachi/items/d421ffce13fb67ab9bbf) でも。
[ここから入手](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/72532f0d-e387-e9c4-db16-f7fe3dde668e.png)



### 14. 網羅的に: Web Developer Checklist

URL: http://toptal.com
ベストプラクティスに違反していないかどうか分析する。
開発者がウェブサイトの問題点を簡単に発見するのに便利。
[ここから入手](https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/8b7d5dfb-a47a-bf58-35cc-38c2ad5b2adb.png)


## おわりに
自分のお庭、色々掃除していきたいなあ。
一連、なにかの参考になればさいわいです。