以前にも少し触れましたが、今日もfirefoxのpluginのweb developerです＾＾
この前は、サイドバーにタブ形式でCSSを閲覧、さらには編集しその結果をブラウジングに反映といった機能についてでしたが、今日は「情報」メニューについてです。
firefoxのメニュバーにある「情報」を押下すると、下記のようなメニュー内容がポップアップされます。
１つ例を挙げてみます。
「div要素の順序を表示する」これを選ぶと、以下の様にあたかもwebsiteのオーサリングでプレビューを見ているかのような表示が可能です。
これがそのキャプチャです。
これらの「情報」内の項目は複数アクティブな状態で選択できるので色々と使い道がありそうですね。
Internet ExplorerではHTMLソースの閲覧に使用するテキストエディタは簡単に普段使い慣れているものに設定可能ですが、Firefoxでは、それは出来ませんでした？（僕が知らないだけでしょうか？）
前に触れたWeb Developerで簡単にソースを表示するテキストエディタを設定できますね。ViewSourceWithなんてプラグインも見つけたんですが、Web Developerは既に投入しているプラグインという事もあり、とりあえず今回もこのプラグインで。
右のイメージの様に、「ツール / Web Developer [日本語版] / 設定 / 設定」を選択し
中央やや下の追加を押下し、「ソース追加」の小窓から選択を押すとエクスプローラ画面が出るので、エディタを選ぶだけ
Firefoxのツールバーからこの様にプルダウンするだけで、好きなツールで表示させられますし勿論既存のSource Viewerも使用できます。
あるウェブサイトのCSSを見る時に、皆どうやって見ているんでしょうか？ 色んな方法・ツールがあると思いますが、今回はweb developerの機能から。
CSSが分割されており複数のcssをimportしているような形が多いと思うんですが、そんな時にもこのツールは役に立ちます。ツールバーにこのweb developerのバーが加わり、そのCSSメニューから「CSSを表示する」を選ぶだけでCSSをhtmlとしてブラウジング出来、さらにimportされているファイルはハイパーリンクとして表示されるので複数のCSSファイルで構成されている場合なんかも便利ですね。
CSSだけでなくCookie、Javascript、画像、ソース表示など色んな機能がありますが、CSSをクローズアップするとこんな事ができます。
単にCSSを表示するだけでなく「CSSを編集する」などはサイドバーに各CSSファイルがタブ形式で表示され、それを編集するとその内容がリアルタイムでブラウジングに反映されCSSを勉強したり開発などでも使い道がありそうですね。
インストールはInfoxiaのページから(web developer 1.0.2)
http://www.infoaxia.com/tools/webdeveloper/download.html
これの存在を知るまでFirefoxはほとんど使っていなかったんですが、これは便利。
HTTPリクエスト・レスポンスをサイドバー・別窓で簡単に見れます。
現在最新版は、0.12
インストールはfirefoxで下記サイトからダウンロードし再起動するだけ
http://livehttpheaders.mozdev.org/
使い方は、サイドバーで見るなら、表示→サイドバー→LiveHTTPHeaders
ショートカットではWindowsでAlt+L。他は知らん。
別窓で見るなら、ツール→LiveHTTPHeaders
firefoxやmozilla等で正常に動かないアプリケーションでないと意味は無いですが、取得したログをファイルにも保存できますし他にも色んな機能があるようなので開発とかにもなかなか便利な気がします＾＾；
