ilog*：Webとデザインの輪郭: Firefox拡張機能アーカイブ

Firefox拡張機能 - 使えるWeb開発ツール Firebug

(DATE:2008年5月 2日 15:56) | Permalink | Comment(1)

1クリックで使えるWeb開発ツールFirebug。すべてのWebページのCSS、...

1クリックで使えるWeb開発ツールFirebug。すべてのWebページのCSS、HTML、および JavaScript をリアルタイムに編集、デバッグなどができます。僕の場合はdivボックスを視覚的に確認したり、CSSを調整、margin、paddingなどの確認に使用しています。JavaScriptを覚えたらさらに使用頻度は上がりそうですね。

以下、Firebug - Web Development Evolved より機能紹介です。

HTML の調査と編集
CSS を調整
CSS の距離計算法を視覚化
ネットワークの接続を監視
JavaScript のデバッグと分析
エラーを迅速に発見
DOM を調査
JavaScript を素早く実行
JavaScript のログを取る

Firebug - Web Development Evolved
http://getfirebug.com/jp.html

※ブラウザの右下にある緑色のボタンを押せばFirebugが表示されます。

よかったらぽちっと→

Firefox拡張機能 - Web制作に役立つ Web Developer 日本語版

ワタナベカズキ

(DATE:2008年4月21日 07:48) | Permalink

かなり便利なFirefox拡張機能のWeb Developer。ツールバーとし...

かなり便利なFirefox拡張機能のWeb Developer。ツールバーとして配布されているので、OSに依存せずに使用できます。僕はもっぱら参考サイトのCSSを確認する時や、Divの名前や幅を計測する時に使用していますね。それと、制作したソースの検証する際などにもツールにHTML構文の検証（HTML-Lint）やCSS構文の検証（W3C）などもついてるので便利です。

下記ミナトラボさんより機能一覧

クッキー、Java、JavaScript、CSSなどを無効にする
CSSをその場で編集する
フォームの各属性値を表示する
画像を非表示にする
alt属性のない、あるいはalt属性値が空の画像を枠で囲む
リンクのパスを表示する
ブラウザの画面内を拡大あるいは縮小する
テーブルのセルを表示する
ブラウザのウィンドウおよび表示領域の幅と高さを表示する
HTMLおよびCSSの構文をチェックする
W3C/WCAG 1.0 あるいは米国リハビリテーション法508条でアクセシビリティをチェックする
Webページのソースコードを表示する

■Web Developer ダウンロードサイト

ミナトラボ

http://lab.tubonotubo.jp/tools/webdeveloper/index.html

よかったらぽちっと→

Firefox拡張機能 - 「PicLens」でウェブサービス内の写真をスライドショー

ワタナベカズキ

(DATE:2008年4月 9日 17:25) | Permalink

Firefoxの拡張機能に、ウェブサービス内の写真をスライドショーや拡大画像とし...

Firefoxの拡張機能に、ウェブサービス内の写真をスライドショーや拡大画像としてみれるプラグインがあります。Web制作の際に参考になる写真を探すのもよし、奇麗なインターフェースを眺めるもよし。沢山の写真がまとめて観れるので便利です。

今のところ対応しているのは、FlickrやFacebook、そしてGoogleとYahooの画像検索結果です。

参考サイト：
ウェブサービス内の写真を拡大表示できるFirefox拡張『PicLens』

よかったらぽちっと→