Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

「Web Developer」を使いこなすとフロンエンド開発がかなり捗りそうなことがわかった

フロントエンドの開発をしている時に自分が書いた HTMLの要素 や CSS セレクタやプロパティが実際にどのように組まれて表示されているかを確認するために Chrome DevTools を立ち上げてインスペクト機能や Elements を見ながら確認をする必要がある.

しかし,いちいち Chrome DevTools を立ち上げるのも手間な時があり,「パっと見ることができないものかなぁ」と思っていたら「Web Developer」という便利...というより,かなり多機能で便利な拡張機能があることを思い出したためため今回はこれについてまとめていく.

使い方

ここからダウンロードする.どうやら昔からある拡張機能のようだが,現在もばっちりメンテされているようだ. chrome.google.com

GitHub はこちら. github.com

Web Developer を使って HTML の id や div,CSS の Class 名を確認してみる. まずは確認したいページを表示する.いつものように自分のブログを例にする.

f:id:bake0937:20200727223604p:plain

Web Developer のアイコンを押し,タブ「Information」で下記の項目にチェックを入れる.

f:id:bake0937:20200727224150p:plain

すると下記のように Chrome DevTools を立ち上げてなくても HTML の id や div,CSS の Class 名 がパッとわかるようになる.

f:id:bake0937:20200727224324p:plain

他にも便利な機能が沢山ある!!!

この他にも様々な機能がある.例えばタブ「Tools」にある Validate を利用すると表示しているページを W3C の検証サービスを利用して1クリックで検証できる機能やタブ「CSS」にある「Disable All Styles」を押すと表示されている CSS を外すことができる.

f:id:bake0937:20200727224800p:plain

他にも便利な機能沢山あるので,フロントエンドの開発では Web Developer を積極的に使っていこうと思う.

まとめと所感

今回は「Web Developer」についてまとめてみた.実は4,5年前にインストールしたことがあったが結局使いこなせずにアンイストールしてしまっていたが,今回をきっかけに使いこなしていく気持ちになることができて良かったと感じている.

作者のページを見る限り,各機能についての説明が特別書いて無さそうなので実際に使ってみて,使えそうなものを見つけていこうと思う.

chrispederick.com


と,最近,Chrome 拡張機能の記事が続いていたが,最近プライベートで Ansible を触ってみたのでそろそろインフラ周りの記事も書いていこうかと思う.