Open7

Web制作に便利なChrome拡張

Favicon Detector

ユーザーが見ているのはサイトのタイトルではない、Faviconだ!(言い過ぎ)
というわけでこれを入れておくとそのサイトのFaviconのセットを一覧することができます。
ダウンロードも可。

なおNetflixのFaviconは大変潔く理にかなってて好き😇

ダウンロード・画像引用元

https://chrome.google.com/webstore/detail/favicon-detector/jlfeffjhgmgblofcgpbgpkkhfniipejm

fonts infos

ページのフォントの情報をチェックできる。
フォントサイズの確認などに威力を発揮😇
確認できる項目は以下。画面上にレイヤーで表示してくれる。

  • font Weight
  • font Size
  • font Family
  • font Style
  • font Color
  • line height
  • letter spacing
  • text transform
  • text decoration

ダウンロード

https://chrome.google.com/webstore/detail/fonts-infos/dcmemojljgjdnjfckdmffgkcnooejahg

Lighthouse

Webサイトのパフォーマンス改善のヒントに。
開発者ツールにも入っている Lighthouse だけど、拡張版は専用のページに出力してくれるため見やすい。
そしてChromeのコンテキストメニューの「日本語に翻訳」が使えるのも魅力💚

ダウンロード

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Wappalyzer

みんな大好き Wappalyzer!
任意のWebサイトに使われてる技術をチェックできます。
へ〜こんなのあるんだ〜などの発見に。楽しい。

あと例えば「Javascriptフレームワーク」のリンクからサイトに飛ぶと、
マーケットシェアとかも見れてなお楽しいです😇 React.js と Backbone.js が強いですネ〜
おすすめ!

https://www.wappalyzer.com/technologies/javascript-frameworks/

ダウンロード

https://www.wappalyzer.com/

Workona Tab Manager

これは絶対に入れたほうがいいです。絶対にだ。

  • タブが大量に増えて1タブ5mmくらいになってるあなた。
  • タブの中に複数の案件用のページが混ざってしまうあなた。
  • タブの中にAmazonのタブとかあって気が散ってしまうあなた。
  • ブックマーク機能じゃちょっと不便かなと思ってるあなた。

そんなあなたにおすすめです。
生産性が5倍くらい上がります(当社比)。
私はこれで、案件ごとにワークスペース(タブのセット)を作ってその時々で切り替えて使ってます😇
住んだ案件はしばらくアーカイブして取っておく。

詳しくはインストールしてください。

ダウンロード

https://chrome.google.com/webstore/detail/workona-tab-manager/ailcmbgekjpnablpdkmaaccecekgdhlh

Octotree

Githubの使いやすさが向上するChrome拡張。
特に「IDE-like」なファイルツリーがどこでも使えて便利😇
そしてファイル検索、あとはダークモード。
これに加えてpro版ではマルチタブやコードレビュー用の機能、コードのフォント変更など
色々あるのでぜひお試しあれ〜(無料お試し期間あり)

#ダウンロード

https://www.octotree.io/
ログインするとコメントできます