FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。 しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で) 現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。 特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います コマンドラインに履歴ボタン コンソールパネルでのコマンドエディタ(でかい方のコマンドライン)にHistoryボタンが新たに追加されました。 過去に実行したコマンドをポップアップから選択して挿入することができます。(以前はCtrl+ZでUndoし続ける必要があった) コマンドライン
Firebugを使って無名関数への参照を手に入れる - monjudoh’s diary
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂の応用編 参照が欲しい無名関数の中の適当な所で、 breakpointを設定し、条件を↓にする。 (window.someFunction = arguments.callee),false この無名関数が1度でも実行されれば、someFunctionで参照できるようになっている。 someFunction.toSource(); とかやると以下のようになる。 (function ($) {var map = new Array;$.Watermark = {ShowAll: function () {for (var i = 0; i < map.length; i++) {if (map[i].obj.val() == "") {map[i].obj.val(map[i
Page Speed Home
Getting started Download Page Speed. Run Page Speed against your web pages. Read about the Page Speed performance best practices. What is Page Speed? Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. How does Page Speed work? Page Speed performs several
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と、
FirebugでJSON形式を見易くフォーマットするuserChrome.js
FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。 あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。 こっからダウンロード Firebug JSON formatting.uc.js 例えばニコニコ動画のマイリストでmy.currentItemes[0].toSource() をやると下のようなものが表示されます。 整形されていないしUTF-8などが混ざっていて読みづらいです。 ({item_type:0, item_id:"1237006406", description:"", item_data:{video_id:"sm6429247", title:"u3010u521Du97F3u30
Firebug コマンドラインのフォントを変更とDOM Inspectorの使い方
Firebugのコンソール部分のフォントが見づらいので、変更しようとFirebugのコマンドラインが見難いのでフォントを変えてみた – cloned.logを参考にやったが、 色だけしか変わらなかったので、少し調べてみた。 ChromeフォルダにあるuserChrome.cssに以下を記述することで変更できた。(Stylishでもいいと思う) #fbLargeCommandLine > .textbox-input-box { font-size: 11pt !important; font-family: Consolas !important; } CSSで指定するクラス名をDOM Inspectorで特定する流れ。 <p> 1. てきとーなページを開く <br /> 2. Firebugを開いて、ウインドウを分離する <br /> 3. DOM Inspectorを開く <br />
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 - Firebug 1.4とFireQuery | バシャログ。
最近ActionScript3.0を再入門しているtanakaです。PHPや、JavaScriptに比べるとカタい言語だと感じますが、PHPではあまり扱わない図形などがでてきて新鮮ですね。さて、本日はActionScript3.0の話ではなくて、Firebugの話です。Firefox3.5用になって変わったことや、jQueryを使った開発で役に立つFireQueryの紹介をいたします。 Firebug 1.4はFirefox3.5/3.0と組み合わせて動きます。単に3.5に対応しただけでなく、使い勝手の面で改良が見られます。 Offボタン OffボタンですぐにFirebugの機能を無効にすることができるようになりました。単純な変更ですが、日常的にFirefoxを使っているひとには重要です。Firebugは有効にしたままにしておくとWebページの動作を割と遅くさせてしまう拡張機能ですが、Of
[Web] Google Page Speedでサイトを高速化
3～4回で書けると思ったについて。 ひとつの項目について思った以上に長くなってしまっているので、順番を間違えた気もしますが、ここでインデックス的に全体をまとめておきます。 おさらいしておくと、このツールはFirebugと組み合わせて使う、ページのボトルネック調査ツールです。 Page Speedを実行したからといって、自動的にページの表示スピードが速くなるようなことはありません。リストアップされた問題点を理解し、自分の環境にあわせた対応策をとって、はじめてページは高速になります。 自サイトに対して挙げられた項目であれ、そうでなくても、注意すべき点として基本的な内容を理解しておくことは有益です。 キャッシュの最適化 – Optimizing caching ネットワーク転送量を減らすことは、ページの表示速度を劇的に速められます。ブラウザやプロキシのキャッシュの仕組みを学び、効率良くデータを交
CakePHP のデバッグ出力を FirePHP で表示する。 - FICC LABS
たけしです。 CakePHP で開発をしている時は、core.php のデバッグレベルを２とか３とかにして開発をしているのですが、これがhtmlの最後の方にブリッと大量に吐かれて案外邪魔です。 そこで FirePHP (FireBugのPHP版のようなもの)を導入して、consoleタブ色々なデバッグ情報を出力してみます。ちなみにPHP5限定です。 [ 用意するもの ] ・Firefox の２か３ ・FireBug ・FIrePHP ・FirePHPコアライブラリ [ インストール手順 ] 1. FirePHP.class.php を /app/vendors に配置します 2. /cake/libs/model/datasources/dbosource.php を 任意のAPPディレクトリ/model/datasources/dbosource.php にコピーします 3. dbo_
FirefinderはJavaScriptプログラマ以外も使うべき - monjudoh’s diary
Firefinderとは何か？ https://addons.mozilla.org/en-US/firefox/addon/11905/ CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。 どんな人にお勧めか？ hiddenフィールドの値を閲覧したり、 formのどの要素のnameが何かとかさくっと見たくなることないですか？ あるならお勧めです。 Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが？ CSSセレクタのサポートの度合いが違います。 $$関数では基本的なCSSセレクタしかサポートされていないので、 例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja $$('input'); // [input, input ja, input Google 検索, i
Google製サイト高速化Firefoxアドオン「Page Speed」を試してみました:phpspot開発日誌
Page Speed Home Google製サイト高速化Firefoxアドオン「Page Speed」というのがリリースされたようで試してみました。 同様のFirefoxアドオンである、Yahoo!製のYSlowがあったりますが、後から出ただけあってYSlowにない便利機能なんかもあるみたいなので併用してもいいかも。 インストールすると、「Page Speed」、「Page Speed Activity」がタブに追加されました。 Analyze ボタンでページの検証が始まります。 検証結果画面。アイコン付きでYSlowより見やすいかも。 ここに表示される警告を直していけばページの高速化が簡単にできますね。 見出しをクリックすると解説ページに移動できます。 ブラウザベースのキャッシュをもうちょっと使うように、ということでメッセージが表示されました。 ブラウザキャッシュに対応するには、apa
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」:phpspot開発日誌
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった！という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか？見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
FirePHPがますます便利になっている件:phpspot開発日誌
FirePHP - Firebug Extension for AJAX Development FirePHPがますます便利になっている件、ということで、以前に紹介したFirePHPですが、色々と更新されているようなのでご紹介。 アイコンも変わってます まず、どういうことが出来るか、という点です。以前紹介した時とやり方が結構改善されているみたい。 <?php FB::log('Log message'); FB::info('Info message'); FB::warn('Warn message'); FB::error('Error message'); ?> と書くと、以下のように表示されます。 firebugのconsole.logみたいに使えます。 PHPのコード内で、１行でかけるのでなかなか便利そうです。 次のように、オブジェクト指向で書くこともできるみたい <?php
最小完全ハッシュ関数の作り方 を JavaScript で - てっく煮ブログ
JavaScriptActionScript/Flex ネタが続いているので、たまには JavaScript ネタを。はてブ経由で知った 最小完全ハッシュ関数の作り方 が面白そうだったのだけど、「最小完全ハッシュ関数」が何か分からないまま読み進めたら、やっぱり話が分からなくなってしまった。分からないまま JavaScript に移植。 /* 順列型の最小完全ハッシュ関数 */ function ChangeNumber(arr) { var work = arr.concat(); var hash = 0; // 階乗値テーブル作成 var FACTOR = [1]; for(var i=0; i { FACTOR.unshift(FACTOR[0] * (i+1)); } for(var i=0; i { hash += work[i] * FACTOR[i]; for (j=i+1;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage
TechCrunch | Startup and Technology News
http://www.orioa.com/yslow-200b1
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
Web ページを高速化する
