第4回 ウェブ開発を助ける拡張やノウハウ | gihyo.jp
デベロッパーツールの機能が基準となっている面も少なからずありますが、間違いなくデベロッパーツール・Web インスペクタは開発者向けツールの中で最も多機能な開発者向けツールといえます。 ただし、FirefoxのFirebugについてはAdd-onと連携することで機能を追加できるため、総合的にはFirefoxに一日の長があります。なお、Firebug用のAdd-onはFirebug Extensions - FirebugWikiなどから見つけることができます。 デバッグ時の注意点・ノウハウ 起動オプションの指定 Chromeではオプション項目にない設定を起動オプションで指定するという方針を取っています。起動オプションで指定するオプションでは、試験的に導入されている機能を試したり、特定の機能を無効にしたりすることができます。 まず、アドレスバー（OmniBox）に about: とだけ入力して
第1回 詳説：デベロッパーツールの使い方 | gihyo.jp
こんにちは、Google Chrome ExtensionsのAPI ExpertとChromium-Extensions-Japan管理人を担当している、太田と申します。いつもはクロスブラウザで連載していますが、今回はGoogle Chromeのデベロッパーツールについて紹介します。 昨今のJavaScript、HTML、CSSブームの背景には、開発環境、特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面、高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで、今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。 な
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
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と、
FireQuery - jQueryを扱う際に便利なFirebug拡張 - - monjudoh’s diary
FireQuery is a Firebug extension for jQuery development jQueryを扱う際に便利なFirebug拡張 現在のバージョンは0.3 結構前に紹介されていたけど、ちゃんと使いこなせてきた感じなので紹介する。 以下、各機能について紹介と解説。 jQueryオブジェクトのconsoleへの表示 jQueryオブジェクトをFirebugのconsoleへの出力 1.2系の場合通常のオブジェクトとして表示されてしまいどの要素を抱えているかぱっと見て把握出来ない、 1.3系の場合は通常の配列と同じように表示される。 jquery12.fn.jquery;// 1.2.6 jquery12('div');// Object length=6 0=div#main 1=div#outer1.outer jquery13.fn.jquery;// 1.3
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
jQueryを使った開発に便利！Firebug + jQuery·FireQuery MOONGIFT
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
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
FirebugにHTML/CSSリファレンスをアドオン、次からは"CodeBurner" | エンタープライズ | マイコミジャーナル
CodeBurner for Firebug James Edwards氏は20日(米国時間)、FireScopeの最新版となるCodeBurner 1.1を公開した。CodeBurner (旧名 FireScope)はFirebugで動作するエクステンション。FirebugにSitePointが提供しているリファレンス機能(HTML要素リファレンス、HTML属性リファレンス、CSSプロパティリファレンス、サンプルコード、Webブラウザ対応情報など)を付加するといったもので、WebデザイナにもWebデベロッパにも有益なツールとして注目されている。 名称を変更したのは同分野ですでにFireScopeという名称が使われているからで、混乱を避けるためだと説明されている。名称変更が主な目的だが、同時に次の変更も実施されているという。 Firebug 1.4サポートの追加 ライブデモや詳細情報へ簡単
Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
【ハウツー】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勧告に準拠しているかどうか 各種ブラウザ対応状況(
DjangoやPythonを使ったWebシステム開発のお供に·FirePython MOONGIFT
Webシステム開発を行っているとデバッグメッセージを表示したいと思うことは多々ある。画面にメッセージを出しても良いだろうが、常々使うのであればログファイルなどを利用した方が効率的だ（デザインへの影響もあるので）。 FirebugとPythonをつないでくれる 開発者には見えてユーザには見えない（見ることもできる）、そんな素敵なメッセージプラグインがFirePythonだ。 今回紹介するオープンソース・ソフトウェアはFirePython、Firebugと連携するPythonデバッグライブラリだ。 FirePythonは二つのライブラリが提供される。一つはPython側で利用するライブラリで、もう一つはFirefoxアドオンとして動作するものだ。Python側でメッセージを送信し、それをFirebugが受け取って表示してくれるようになる。 設定画面 PHPでは同様のソフトウェアとしてFireP
Firefox+Firecookie でCookieを監視/操作する | バシャログ。
最近、開発中にCookieの挙動で小一時間デバッグして、Firefoxの拡張機能であるFirecookieを使って解決したことがありました。Firecookieって実は便利だと思ったのでご紹介します。 デバッグの概要 CakePHPを利用して開発していたときにおこった、Cookieによるセッションが継続しない、といったトラブルだったとおもいます。ある条件下でCookieが読み出しできるパスがおかしくなるのが原因だったのですが、その特定にFirecookieが役立ちました。 Firecookieとは何か FirecookieはFirefox+Firebugの環境で利用できる拡張機能です。以下のページからインストールできます。 Firecookie :: Firefox Add-ons Webプログラムを作っていると、Cookieを使ってログイン状態を作ったりします。Cookieはユーザのマシ
Firebugでできること: ソースコードのエラー解析 - builder by ZDNet Japan
クラウド導入が進まない本当の課題 ITベンダーだからこそ知っている クラウドに二の足を踏む企業のボトルネック ビジネスとITの最前線 官民をあげてDXを急ぐ中で、 キーマンが語る成功へのポイント 大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 オープンソース活用はあたりまえ！ そんな今だからこそ改めて考える 企業ITにおけるOSS活用のメリットとリスク A Business New Era あらゆるモノ・コトが変化している今 デジタルでビジネスは生まれ変わる エッジ市場の活性化へ 高まるIoTを中心としたエッジ分野への期待 OSS活用が新しい時代のビジネスを拓く ID管理の基礎知識 新しい働き方におけるITガバナンスの 向上にむけて 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 アプリが簡単にでき
Firebugでできること: HTML/CSSの解析とオンザフライ編集 - builder by ZDNet Japan
日清食品グループのDX（後編） 内製化とローコードで実現？ビジネス部門 によるアプリ開発のリアルボイス！ 自社利用の知見・経験を顧客に提供 コンテナ活用を推進する日立製作所 VMware Tanzuを利用したモダナイズを伝授 ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが連携し パブリッククラウドへの移行を支援 エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること 現場業務のデジタル化を促進 リモートワークが生んだ課題をアプリで解消 ベネッセのデジタル変革を紹介 今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 新しい働き方にあわせて変革を！ デバイ
【ハウツー】人気のデバッグツールが待望の新版リリース! 「Firebug1.2」を使いこなそう (1) 新版の特徴 - Firefox3正式サポート、パフォーマンスの向上など | エンタープライズ | マイコミジャ��
Firebug1.2登場 - Firefox3正式サポート、パフォーマンス向上など 8月25日(米国時間)、Firebugの最新版である「Firebug 1.2」がリリースされた。 FirebugはFirefoxアドオンのひとつで、Firefox内で閲覧しているHTML、CSS、JavaScriptの内容を分析し、編集やデバッグ、各種モニタリングを実施できる。導入が容易なうえ、強力なデバッグがおこなえることからFirebugを愛用しているWebデベロッパも多いことだろう。 今回のリリースでの変更点はおもに次のとおり。 Firefox 3の正式サポート デフォルトでFirebugのデバッグ機能が無効に。Console/Script/Netのデバッグをおこなう場合は、どの機能を有効にするか選択する サスペンド/レジューム機能 HTML/CSSにおいて外部エディタを指定することができるように e
Firebug最新版、Firebug 1.2登場 | エンタープライズ | マイコミジャーナル
Firebug - web development evolved 25日(米国時間)、Firebugの最新版となるFirebug 1.2が公開された。Firebug :: Firefox Add-onsにおいてダウンロードできる。FirebugはFirefoxエクステンションとして開発されたWebサイト/アプリケーション開発支援ツール。Webデザインの調整からJavaScript開発やロード時間分析まで幅広く活用できる有益なツールだ。 Firebugは有益なWebサイト/アプリケーション開発ツールとして高い人気を誇っているが、1.2の開発は長い間ベータ扱いのままで正式版としてはリリースされてこなかった。今回正式版として公開されたことで、1.2以前のバージョンを使ってきた開発者やデザイナには1.2へのアップグレードが推奨されることになる。 Firebug 1.2 - 動作対象はFirefo
Firebugについてまとめ - monjudoh’s diary
随時更新 公式ドキュメント Firebug Console API http://getfirebug.com/commandline.html 気になったところ $$(selector) 複雑なCSSセレクタでなければjQueryの$関数の変わりとして使える感じ。 dirxml(node) outerHTML相当のHTMLを出してくれる感じ $$(selector)と組み合わせると便利そう。 inspect(object[, tabName]) 指定したオブジェクトを指定したタブで表示できる。特定要素をHTMLタブで表示させる時、「inspect($$('table#some-id td')[0],'html');」みたいにできる。今まで、「console.log($$('table#tab td')[0]);」を実行してconsoleタブに表示させた後、そこをクリックみたいにやっていた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3Dlivedoor)
Gogle Chromeエクステンション登場、Firebug Lite | エンタープライズ | マイコミジャーナル
TechCrunch | Startup and Technology News
