こんにちは!Taiです!(@tantakataitai)
先日からWebアプリ開発を本格的に学習し始めたのですが、その際に役立ったChrome拡張機能を2つ紹介したいと思います!
▼こんな方におすすめ
・駆け出しのWebフロントエンジニア
・開発効率を上げたい方
・駆け出しのWebフロントエンジニア
・開発効率を上げたい方
①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.
こちらはブラウザに表示されるHTMLの要素をDOMに沿った記述である「ツリー構造」で表示できるようにしています。
この拡張機能を使うことで取得したいノードを簡単に把握することができ、JavaScriptを使用したHTMLの制御が容易になります。
②Debug CSS
https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj/related
HTML要素を配置させたり、要素の位置関係を確認する時に重宝するツールです。
例えば以下のQiitaサイトで見てみましょう。
拡張機能を追加した後、以下のように要素構造が表示されます。
また、Ctrlを押しながら要素にホバーすることで要素の詳細を確認することができます。
まとめ
いかがだったでしょうか?
今回紹介したもの以外にもたくさん便利な拡張機能があると思うので見つけ次第本ブログで紹介して行けたらと思います。
本ブログでは「ライフハック」「語学学習」「海外旅行」に関する情報を発信しています。
以下記事も合わせてご覧ください。
【無料】Google翻訳より正確な翻訳アプリ「DeepL」を紹介します
こんにちは!Taiです!(@tantakataitai)本日は語学学習者必見、人工知能によるオンライン翻訳サービスアプリ「DeepL」を紹介したいと思います。▼DeepLはこんな方におすすめ・海外の文献を読む必要がある・翻訳業務に携わってい...
【招待コード 126110a4d36eb0d1】無料でビットコインが毎日もらえるCheeeseアプリ!
こんにちは!Taiです!(@tantakataitai)ビットコイン 、イーサリアム、リップルなどをはじめとしたくさん存在する仮想通貨。2022年現在仮想通貨はすっかり聞き慣れた言葉になっているのではないでしょうか?既に仮想通貨投資で成功し...
Excel VBA スタンダードに1週間で合格。対策や参考書を紹介!
こんにちは!Taiです!(@tantakataitai)2020年の3月に改訂版Excel VBAスタンダード試験を受け、勉強時間1週間で見事に合格したのでその際に使った参考書や勉強方法について紹介していきたいと思います。インターネットで調...
コメント