FireFox AddOn『Web Developer』

5月 29, 2017

Web Developer Gang Sign
FireFoxでweb開発をする時に超便利なアドオンです。
WordPressを利用してるとちょっと修正しただけで実は、あれもこれもと、かなり変わってしまったりすることはありませんか?
プロなら良いですが素人だとスタイルシートのどの要素がどこに影響しているかまで既存のテーマでしっかり把握してる人は、そんなにいないとおもいます。しっかり把握できてる人はコーダーになれますよ。
そんな時に便利なのがこのアドオンです。あらゆる要素やキャッシュのクリアなど思い通りのレイアウトを作るときに役立ちます。
Web Developer :: Add-ons for Firefox

利用方法は様々

CSS▶情報表示
 CSSの要素確認に利用できます。
 Wordpressの既存テーマを利用しちょっと弄りたいときにどこをいじれば良いか一目瞭然です。
CSS▶CSS無効
 CSSを無効にすることで今のHTMLだけでどのように表示されるか確認することが出来る。
無効化▶JavaScript
 JavaScriptを無効化した場合にどのように表示されるか確認することが出来る。
 これはブラウザによって無効にされている場合等のための確認
画像▶無効化
 回線が遅かったり何らかの理由で画像が表示されないこともあります。
 そんな時にどのように表示されるか確認
リサイズ▶ウィンドウサイズ変更
 様々なウィンドサイズで実際どのように表示されるのか確認することができます。
 FireFoxに搭載されている開発ツールでもできますがせっかく入れたのでこちらで確認。
 タブレットサイズやiPhoneの縦表示、横表示、ワイドサイズの画面等レイアウト確認が可能
アウトライン▶ブロックレベル要素を枠で囲う
 Wordpress等をいじっているとブロック要素が数多くあり複雑です。
 この機能を使うとブロック要素が一目瞭然なので修正する手助けになります。
ということでこれを使って地味に少しづつ変えているのですがキャッシュがききすぎてて変更内容がいつ反映されることやら…(^_^;)
ちなみに見出しデザインは丸ごとパクって色とフォントサイズを変えました。

【WP】h2やh3の見出しデザインを可愛くしたい!見出しに点線を入れるのに必要な呪文と初心者向けの注意点。 | りんろぐ。【WP】h2やh3の見出しデザインを可愛くしたい!見出しに点線を入れるのに必要な呪文と初心者向けの注意点。 | りんろぐ。

WordPressのデザインを作りたい人へオススメする関連記事

WordPressヘッダに検索バーを埋め込む方法 | 思いつかなかった
Windowsのローカル環境へWordpressのインストール | 思いつかなかった
WordPressテスト用環境を作ってみた。 | 思いつかなかった

こんな記事のリクエストからディズニーランドに一緒に遊びに行きませんか?というお誘い、写真を一緒に撮りに行きましょうというお誘い、誤字・脱字をはじめ全てのお問い合わせは、こちらへお願いします。
定期的な購読はRSSにご登録お願いします。
掲載している写真の個人的利用、保存はOKですが、複製、再利用、営利目的の利用は禁止です。


TOP