こんにちは！テラーノベルのオスカルです。最近Webの開発をしてます。日本語はまだまだ勉強してます！ 応援してください！ 🙏
今回、結構使ってるweb開発に向けChrome拡張機能を紹介したいと思います。
それでは、僕の選りすぐりはこちら：
1. ColorPick Eyedropper
CSSを書いたらこれはおすすめです。時々サイトを作って何色使ったかどうかわからなくなちゃって、Chrome開発ツールで確認できますが、エレメントを見つけてプロパティを探して。。。めんどくさいじゃないですか？。その時この拡張機能を使って、すぐ確認できます：
それとも画像内の色も確認できますのでとても便利です。
2. CSSViewer
色だけ調べたかったら先の方が早いと思いますけど、こちらはChrome開発ツールを開けずにホバーだけですぐエレメントのCSSプロパティが見れます。fを押したらプロパティボックスは固定になって、ゆっくり見れます。それともcを押したら、CSSコードは全部コピーできますよ：
3. Lorem ipsum generator
こんな場合は結構ありますかね：レイアウトとデザインをして、いい感じだったけどユーザーは思ったより長いテキストを入れたらデザインは崩れてしまいます。 🙀
起こらないように、開発時もいろんなテキストとテストをした方がいいと思うのでダミーテキストを生成できるツールを紹介します：
ダミーテキストをコピーして、開発ツールでペストできるので、すぐレイアウト確認できます。
例えば、テラーノベルだったら、ストーリーのあらすじは長くてもセーフ！
4. Dimensions
CSSを見たら、エレメントのwidth, height, margin, paddingなどを確認できるけど、そのエレメントから次のエレメントまでの幅をどうやって知りますか？ 画面の幅からエレメントの大きさを引く、マージンを引く。。。 🧐 計算しなくても大丈夫ですよ！このツールを使ってすぐ見れます！
5. Wappalyzer
これは自分のサイトじゃなくて、他のサイトは何使ってるかどうか知りたかったらウェブ技術を特定してくれるツールです。フレームワークとライブラリとCMSなどを認識してますよ。例えば、メルカリサイトを分析すると：
元のリンクも付いてるので、すぐ自分のサイトに使えるかどうかリサーチできます。👀
6. GoFullPage
新しいページを作って、デザイナーさんにすぐ見せたいけどデプロイの時間は長いのでスクリーンショットを送りますと考えると。。。サイトは長すぎて。。。どうやって全部撮りますかね？ 😅
GoFullPageは自動でどんどんスクリーンショットを撮ってスクロールして、全部取ったら大きな画像を作成してくれてるので、簡単！
↓
7. Responsive Viewer
レスポンシブサイトを作るならこの拡張機能は絶対おすすめです。デスクトップからモバイルをさまざまなデバイスでテストできます。ページを開いて拡張ボタンを押したら：
定義済みのデバイスを入ってますので、便利です！
8. VisBug
VisBugでサイトのデザインとコンテンツは変更できます。本当にとてもパワフルなツールです、ライブでテキストと画像変更とエレメント移動、色変更。。。
デザインアプリみたいなツールバー表示してなんでもできます！ 💪 Figmaみたい！
9. SEO Pro Extension
サイトのSEOデータを、簡単に手早く確認できます！
10. EASY LGTM
これは開発的に便利だといえないけど、僕はすごい好きです🙃。GitHubでプルリクレビューを承認すると面白いLGTM画像を出せます!
終わりに
この記事に記載されていないけど、もちろんReactかVueなどの開発フレームワークの拡張機能は必要だと思いますので是非確認してください。
もしもっと便利なツールか上に書いてるより良い代替を知っているなら、是非コメントに書いてください 🙏
Discussion