Webのバグを燃やしまくるFirebugと、そのアドオン7選
Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
【ハウツー】YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを! (1) YSlowでWebページパフォーマンス計測 | エンタープライズ | マイコミジャーナル
Webページの表示パフォーマンスの向上は、Webデベロッパやフロントエンドプログラマにとって永遠の課題だ。ページの表示が速いかどうかは、ユーザの満足度に大きく影響する。リッチなUIや機能を実現しつつも、ページの表示は軽くしたい。 そこで重要になってくるのが、ページの読み込み速度を測定して分析してくれるツールの存在だ。Webページパフォーマンス計測ツールを使うことで定量的に状況を把握し、改善策を練ることができるというわけだ。Webページパフォーマンス計測ツールはいくつかあるが、最も導入が簡単で、かつ効果の高いもののひとつがYahoo! Developer Networkを通じて提供されているYSlowだ。執筆現在での最新版は0.9.2となっている。 YSlowはFirebugを活用しつつJavaScriptで開発されたWebページパフォーマンス計測ツール。Yahoo! Exceptional
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル
あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(
Firebugクックブック #1 - bits and bytes
最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
Webデバッガ最強はFirebugだが、ほかのブラウザでは… | エンタープライズ | マイコミジャーナル
JavaScriptベースのWebアプリケーションやWebサイトのデザイン調整に欠かせないツールがFirebugだ。Webブラウザ内で直接インスペクトやデバッグを実施するツールとしては実質的にデファクトスタンダードといっていい。どれも満足のいく機能ばかりだが、唯一不満な点をあげるとすればFirefoxエクステンションとして実装されているためほかのWebブラウザでは使えないというところだろう。IEが最大シェアを持っていることにかわりはなく、むしろ標準に準拠していないことが多いIEでこそ同様のツールが必要だ。 そこでKevin Yank氏がSitePointにアップしたドキュメントIn-browser Development Tools: Firebug Still Kingに注目したい。同氏は代表的なWebブラウザとそのデバッグ/インスペクトツールに言及し現状をまとめている。内容を簡単にかい
ウェブ制作にかかせないFirebugの機能を更に強化する機能拡張集 | コリス
Sofrware is hardのエントリーから、豊富な開発ツールを備えたFirefoxのアドオン「Firebug」の機能を強化する機能拡張を紹介します。 List of Firebug Extensions Firebug HTML, CSS, JavaScriptなどを編集・デバッグ・モニタリングできる開発ツール。 以下の全ての機能拡張は、Firebug上で動作します。 Firebug Firebug -Firefox Add-ons YSlow ページの分析、パフォーマンスレポート、HTTP/HTMLサマリー、コンポーネントのリスト YSlow YSlow -Firefox Add-ons Firecookie クッキーの管理 Firecookie Firecookie -Firefox Add-ons FirePHP PHPのデバッグ FirePHP FirePHP -Firefo
norah# : Firebug日本語版
norah'# - "You do your job. If you get results and people thank you for it, so much the better" norahmodel.exblog.jp ブログトップ 開発版 Firebug 1.6.0.20100126 - ダウンロード 更新履歴 :: ChangeLog 2010/01/26: Firebug 1.6.0.20100126 Dev Edition Release 2009/07/22: Firebug 1.4.0 Release 2009/05/23: Firebug 1.4.0.20090523 Dev Edition Release 2009/05/06: Firebug 1.4.0.20090506 Dev Edition Release 2009/04/08: Firebug 1.4
FirebugでPHPをデバッグするツールまとめ
こんにちは、亀本です。最近は体調がすこぶる絶不調です。季節の変わり目なので、皆さんも気をつけてください。 さて、ちょろちょろと話題に上ることの多いFirefoxを使ったPHPのデバッグ手法ですが、いくつか出てきたのでこの辺でサクッとまとめておこうかと思いました。 結果的に、だいぶ膨らみましたが。。。まとめ力ないなorz 1.Buggy クラス AJAX magazine というサイトで公開されていたサンプルスクリプトで、クラス１つだけの小さなライブラリです。 以前、PHPプロ！ニュースでもご紹介した方法です。 この方法は、PHPのエラーをハンドリングし、その内容をscriptタグに出力し、console.info()を用いてFirebugのコンソールに渡す、という仕組みです。そのため、Firebugは必須です。 記事掲載当時は、buggy.class.phpがダウンロードできたのでしょうか
Firebug - Web Development Evolved
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
【レビュー】これは凄い! Ajax最強のデバッグツール"FireBug 1.0"リリース (1) デベロッパのアツい視線を受ける実力派エクステンション (MYCOMジャーナル)
デベロッパがFirefoxを使う理由はエクステンション! Ajax Webアプリケーションの開発者には、WebブラウザとしてFirefoxを愛用しているユーザが多い。その理由のひとつに豊富なエクステンション機能が挙げられる。Firefoxを使っているからエクステンションを使っているというよりも、エクステンションを使いたいからFirefoxを使っているという感じだ。 デベロッパに人気のあるエクステンションはいくつもあるが、代表的なところではAll-in-One GesturesやDictionarySearch、Greasemonkey、User Agent Switcher、ScrapBookなどを挙げることができる。そしてAjax Webアプリケーションの開発において必須ともいえるエクステンションに、Firebugがある。 Firebugに対する称賛の声は枚挙にいとまがない。「Fireb
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Digital Marketing Guides, Software Reviews & Nearby Agencies | Web Monkey