【Webフロントエンジニア必見！】開発効率が上がるChrome拡張機能2選！

こんにちは！Taiです！(@tantakataitai)

先日からWebアプリ開発を本格的に学習し始めたのですが、その際に役立ったChrome拡張機能を2つ紹介したいと思います！

①HTML Tree Generator

HTML Tree Generator - Chrome Web Store

Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.

chromewebstore.google.com

こちらはブラウザに表示されるHTMLの要素をDOMに沿った記述である「ツリー構造」で表示できるようにしています。

みんな大好きQiitaのページ

この拡張機能を使うことで取得したいノードを簡単に把握することができ、JavaScriptを使用したHTMLの制御が容易になります。

②Debug CSS

Debug CSS - Chrome Web Store

Adds outline to all elements on the page to show the culprit element which is changing desired layout

chromewebstore.google.com

HTML要素を配置させたり、要素の位置関係を確認する時に重宝するツールです。

例えば以下のQiitaサイトで見てみましょう。

みんな大好きくぃいた

拡張機能を追加した後、以下のように要素構造が表示されます。

Ctrlを押しながらホバー

また、Ctrlを押しながら要素にホバーすることで要素の詳細を確認することができます。

まとめ

いかがだったでしょうか？

今回紹介したもの以外にもたくさん便利な拡張機能があると思うので見つけ次第本ブログで紹介して行けたらと思います。

本ブログでは「ライフハック」「語学学習」「海外旅行」に関する情報を発信しています。

以下記事も合わせてご覧ください。

【無料】Google翻訳より正確な翻訳アプリ「DeepL」を紹介します

こんにちは！Taiです！(@tantakataitai)本日は語学学習者必見、人工知能によるオンライン翻訳サービスアプリ「DeepL」を紹介したいと思います。▼DeepLはこんな方におすすめ・海外の文献を読む必要がある・翻訳業務に携わってい...

taikichi.com

2021.11.28

【招待コード 126110a4d36eb0d1】無料でビットコインが毎日もらえるCheeeseアプリ!

こんにちは！Taiです！(@tantakataitai)ビットコイン 、イーサリアム、リップルなどをはじめとしたくさん存在する仮想通貨。2022年現在仮想通貨はすっかり聞き慣れた言葉になっているのではないでしょうか？既に仮想通貨投資で成功し...

taikichi.com

2022.03.19

Excel VBA スタンダードに1週間で合格。対策や参考書を紹介！

こんにちは！Taiです！(@tantakataitai)2020年の3月に改訂版Excel VBAスタンダード試験を受け、勉強時間1週間で見事に合格したのでその際に使った参考書や勉強方法について紹介していきたいと思います。インターネットで調...

taikichi.com

2022.01.29