Webサイトの開発時に、よく使うChrom拡張をまとめていきます。
随時、更新予定です。
目次
HTMLエラーチェッカー
HTMLに閉じタグ忘れなどのエラーがないかチェックしてくれるツールです。
自分で開発するものであれば、エディタのプラグイン等で、HTML LINTかければよいですが。
簡易にチェックしたいときはこちらを使います。
チェックしたいページを表示して、拡張ボタンを押下するだけです。
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079349/b68f565ff359d47242a4e4ea962028b5/b68f565ff359d47242a4e4ea962028b5.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_74,c_scale/f_auto,q_auto/v1613079349/b68f565ff359d47242a4e4ea962028b5/b68f565ff359d47242a4e4ea962028b5.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_188,c_scale/f_auto,q_auto/v1613079349/b68f565ff359d47242a4e4ea962028b5/b68f565ff359d47242a4e4ea962028b5.jpg?_i=AA 768w)
SEO META in 1 CLICK
SEO上重要になるmetaタグなどの設定を簡単に確認することができます。
公開するサイトは、こちらのツールをかけて、適切にタグが設定されているか確認するのがおすすめです。
チェックしたいページを表示して、拡張ボタンを押下するだけです。
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/w_996,h_1024,c_scale/f_auto,q_auto/v1613079344/95311bae753926ef40ba4152a6cac2a4/95311bae753926ef40ba4152a6cac2a4.jpg?_i=AA 996w, https://res.cloudinary.com/dz7ruywxa/images/w_292,h_300,c_scale/f_auto,q_auto/v1613079344/95311bae753926ef40ba4152a6cac2a4/95311bae753926ef40ba4152a6cac2a4.jpg?_i=AA 292w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_790,c_scale/f_auto,q_auto/v1613079344/95311bae753926ef40ba4152a6cac2a4/95311bae753926ef40ba4152a6cac2a4.jpg?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079344/95311bae753926ef40ba4152a6cac2a4/95311bae753926ef40ba4152a6cac2a4.jpg?_i=AA 1000w)
User-Agent Switcher for Chrome
あんまり最近だと使う機会がなくなりつつありますが、ユーザーエージェントをクリックだけで切り替えることができるツールです。
古いサイトだとUA見て出し分けをしていたりするので、そういったときの確認にはいいですが、ChromeのDevToolsで十分な気もします。
UAは、Chromeなどでは今後廃止される可能性もあるみたいです。
切り替えたいブラウザをクリックで選択するだけで変わります。
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079339/1b492f43f63bd5741f64ddf6198b9723/1b492f43f63bd5741f64ddf6198b9723.jpg?_i=AA 528w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_249,c_scale/f_auto,q_auto/v1613079339/1b492f43f63bd5741f64ddf6198b9723/1b492f43f63bd5741f64ddf6198b9723.jpg?_i=AA 300w)
Wappalyzer
このサイトどんなツール使ってできているのかな?というときに使います。
結構丸裸になります。
チェックしたいページを表示して、拡張ボタンを押下するだけです。
ウィジェット、プログラミング言語、アナリティクス、マーケティングオートメーションツール、タグマネージャー、エディタ、タグマネージャー、JavaScriptライブラリ、Webサーバなど知りたいことが一発で確認できます。
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079335/fb9fa402deda734a1c0ee1f4e310d6bd/fb9fa402deda734a1c0ee1f4e310d6bd.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_296,c_scale/f_auto,q_auto/v1613079335/fb9fa402deda734a1c0ee1f4e310d6bd/fb9fa402deda734a1c0ee1f4e310d6bd.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_758,c_scale/f_auto,q_auto/v1613079335/fb9fa402deda734a1c0ee1f4e310d6bd/fb9fa402deda734a1c0ee1f4e310d6bd.jpg?_i=AA 768w)
Scraper
サイト内の表やテキストを簡単にscrapeできるツールです。
リストで表示されているようなものは簡単に抽出でき、csvファイルやspreadsheetとして保存することができます。
取得したいページを表示して、抽出したいリストの一部を選択状態にして、右クリック、Scrape similar…を押します。
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079330/b1f595871892aa77cfcc6c89434302d0/b1f595871892aa77cfcc6c89434302d0.png?_i=AA 940w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_246,c_scale/f_auto,q_auto/v1613079330/b1f595871892aa77cfcc6c89434302d0/b1f595871892aa77cfcc6c89434302d0.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_631,c_scale/f_auto,q_auto/v1613079330/b1f595871892aa77cfcc6c89434302d0/b1f595871892aa77cfcc6c89434302d0.png?_i=AA 768w)
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/w_908,h_1024,c_scale/f_auto,q_auto/v1613079325/db67b03d89c4fd02dce80becb42f5452/db67b03d89c4fd02dce80becb42f5452.jpg?_i=AA 908w, https://res.cloudinary.com/dz7ruywxa/images/w_266,h_300,c_scale/f_auto,q_auto/v1613079325/db67b03d89c4fd02dce80becb42f5452/db67b03d89c4fd02dce80becb42f5452.jpg?_i=AA 266w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_866,c_scale/f_auto,q_auto/v1613079325/db67b03d89c4fd02dce80becb42f5452/db67b03d89c4fd02dce80becb42f5452.jpg?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079325/db67b03d89c4fd02dce80becb42f5452/db67b03d89c4fd02dce80becb42f5452.jpg?_i=AA 926w)
![よく使うChrome拡張(随時更新)](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613079321/36f0342d81892b9aaf71db6c55aae8d9/36f0342d81892b9aaf71db6c55aae8d9.png?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_119,c_scale/f_auto,q_auto/v1613079321/36f0342d81892b9aaf71db6c55aae8d9/36f0342d81892b9aaf71db6c55aae8d9.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_305,c_scale/f_auto,q_auto/v1613079321/36f0342d81892b9aaf71db6c55aae8d9/36f0342d81892b9aaf71db6c55aae8d9.png?_i=AA 768w)
本当に簡単にデータを抽出することができます。
XPathとかを覚えると更に便利になります。
Video Speed Controller
YoutubeやAmazonPrime、Netflixなどのブラウザ上で再生する動画を倍速再生するためのツールです。
1倍速で見ていたら時間が勿体ないですよね。
そんなときは、これで再生スピードを調整してみると時間の節約にもなります。
動画が表示されている状態で、Dを押すとスピードアップ、Sを押すとスピードダウンします。
これなしでは、もう動画を見ることはできません。
こえもじ
Google Meetを使う人にはおすすめです。