Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (1) FireCrystalとは | エンタープライズ | マイコミジャーナル
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
ウノウラボ Unoh Labs: WEBアプリのテストに便利なFirefoxのアドオン
こんにちは！ のりPと同い年ですが、クラブ通いは●年前に卒業しました やまもと＠テスト番長です。 早いもので、もうお盆の帰省シーズンですね。 今年の夏は世間の騒がしい日々が続いておりますが、みなさんお変わりございませんでしょうか。 さて、Firefoxといえば豊富なアドオンですが、今回はテスター目線で WEBアプリケーションのテストに便利なFirefoxアドオンを並べてみたいと思います。 Firesizer ブラウザの画面サイズを整えることが出来ます。 InFormEnter 準備しておいた値を入力フォームにセットしてくれます。 MeasureIt 画面上のピクセルサイズを測ることが出来ます。 Regular Expressions Tester 正規表現での検索がその場で出来ます。 FireShot キャプチャにメモを書き込んだり出来ます。 Web Developer F
第2回 197X オフパーティーでDTraceについて話しました - いちいの日記
LT申し込んだはいいけどぜんぜん準備してなくて、比較的すぐに書ける内容ってことでDTraceの話をしてきました。LT中にも言ったんだけど、ほんとはplan9上のinfernoでlimboプログラミングとかやってみたかったけどまだムリポ。あと当日いろいろ不手際でごめんなさい > ymsr先生 資料張ってもいいんだけど、あまりに適当すぎたのでもうちょいまとめて書きます。 DTraceってなに? 詳しくは http://ja.wikipedia.org/wiki/DTrace とか http://www.opensolaris.org/os/community/dtrace/ を参照していただくとして、パフォーマンスチューニングのためのプロファイリングツールと思っていただければいいかと。 Solarisカーネルのデフォルト機能だし、Sunが配ってるJVMやApache, PHP, MySQLでは
PHPでのデバッグ方法
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog おひさしぶりです。オークション担当の山崎 賢です。 前回はPHP Serialize についてでしたが、 今回はPHPでのデバッグに関してお話します。 基本PHPはインタプリタ(厳密にはPHPは内部で一度コンパイルしていますのでインタプリタとは言い切れませんが) のデバッグではログ埋め込みが手軽です。 しかし、まれにSIGSEGVやSIGBUSなどでPHPスクリプトが落ちることがあり、途方にくれます。 地道にログを埋め込んでいき、箇所を特定するのも手法の1つですが、今回はgdbを用いたデバッグ方法を記載したいと思います。 ■STEP1 まずは、プログラムが落ちることを目的として以下のようなPHP Moduleを作成します。 ・ ・
Safari 4.0 (Beta) で WebKit の JavaScript デバッグ - アメリカでがんばりましょう
Apple が Safari 4.0 のベータ版を公開した。 (ダウンロードはこちら) 見た目が派手なスピードダイヤルやカバーフローな履歴表示などに目が行きがちだけど、Safari 4.0 で JavaScript デバッガが標準装備になったのは大きい。 これまでも WebKit の Nightly に Dorsera という JavaScript デバッガのアプリケーションが同梱されていたが、別アプリケーションということもあって何だか安定せず使い勝手もイマイチだった記憶がある。(出たてのころの印象なので、最近は良くなっていたかも) これが Safari 4.0 ではアプリケーション内にデバッガの機能も搭載されものすごく便利になっている。 JavaScript デバッガを起動するにはまず Preference メニューで Develop メニューを有効にする。 すると Develop メニ
John Resig - FireUnit: JavaScript Unit Testing Extension
In my work with the Firebug team over the past couple months I’ve been working with Jan Odvarko on a way to provide some form of unit testing that we can build off of. The result of my work is a new Firefox/Firebug extension called FireUnit. FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug. For example, here’s some of the API that you
一発で表示崩れの原因が分かるCSSの小技！： OLの本音は給湯室にて･･･
OL7人とその課長の実況型ブログです。OL達のホンネや女子に囲まれた課長の苦悩と悦び(?)を等身大でお送りします。娘だらけのお父さん！女同士の人間関係に悩む方も必見です!? ナッチーはたまにcssやhtmlのコーディングなどもします。 でも、たまになのでショボイです・・・ で、書いてるうちにいきなり表示が崩れたりします！ でも前のバージョンとソースの違いがわからない・・・・ そんな時のみんなに笑われる必殺hackがあります！ その名も！ Photosopで差の絶対値攻撃!!!! 以下手順になります～ 全然違いのわからない AとBのソースが仮にあったとします。 2つをスクリーンショットして Photoshopのレイヤーを分けてそれぞれにペースト で。レイヤー操作「差の絶対値」 すると・・・・・ 見てー！犯人はココダーーー 差異があるところは黒くならないんです。 本来は画像修正時の差分チェック
"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ
asActionScript 2 用のデバッグツールとして有名だった XRay が ActionScript 3 に対応したようです。DisplayObject の階層を表示してくれたり、オブジェクトのプロパティを修正したり、ログ用のコンソールになったりと機能豊富です。しかも、Flash CS3 だけでなく、Flex や AIR でも使えるようです。ということで、早速、試してみました。ダウンロードしてソースコードに２行追加するだけXRay のソースコードを拾ってきます。Google Code にあるので、SVN で拾ってきましょう。http://osflash-xray.googlecode.com/svn/trunk/as3/trunk/では、自分の Flash に仕込んでみましょう。ActionScript のソースコードに import 文を追加します。 import com.bli
Google Chrome JavaScriptデバッガ完全マニュアル。 - IT-Walker on hatena
Google Chromeはシンプルに見えてオフラインやWebアプリショートカット作成などいろんな機能が搭載されています。 そんな中、JavaScriptデバッガがあるのも発見！ どんなもんかと思ってみてみたら、なんとコマンドラインベースのデバッガです。Firebugみたいな物を想定していたのですが、まさかgdb（GNU製C/C++デバッガ）みたいなのがブラウザに載ってるなんて・・・しかも全然情報ないし。 でも開発者にとっては、JavaScriptをランタイムでデバッグできると言うのは非常に嬉しい事ですね。そこで、Chromeデバッガの使用法についてちょっと調べてみました。 デバッガは、開発者向けメニューの中から選択する事が出来ます。立ち上げてみると、コマンドの表示結果が表示されるエリアと、コマンドを入力するテキストフィールドが並んでいるだけ、と言うシンプルなUIが表示されます。 最下部の
Google Chromeの開発ツールは実務に耐えうる：Firebugなみの性能を発揮 - builder by ZDNet Japan
先日ベータ版が公開されたGoogleオリジナルのブラウザ「Google Chrome」。「無駄を削ぎ必要な機能のみを追求した」というのが謳い文句だが、その一方でウェブ開発者向けの機能が充実している点も見逃せないポイントだ。 高機能なJavaScriptコンソール Google Chromeはウェブ開発者向けの機能として、デフォルトでJavaScriptコンソールとJavaScriptデバッガが付属している。特にJavaScriptコンソールの方は、Firefoxのアドオンとして著名なFirebugに劣らない高機能さであり、実務でも十分に使えそうだ。 ChromeのJavaScriptコンソールおよびJavaScriptデバッガは、［開発/管理］メニューから起動できる（図1）。
2分でわかる Tamper Data の使い方 - @kyanny's blog
Firefox で HTTP ヘッダを扱う拡張機能としては LiveHTTPHeaders が有名だが、 Tamper Data はリクエストごとにヘッダをカスタマイズできる（偽装とか）点で、ウェブアプリケーションのデバッグ時により役に立つ。でもぐぐってもあんまり情報がなくていまいち使い方がわからなかったのだけど、最近なんとなくわかってきたので書いておく。大ざっぱだけどスクリーンキャプチャ画像つき。 Tamper Data のウィンドウを開いて左上の Start Tamper を押す。これを押さないと有効にならない。押したら Firefox のメインウィンドウに戻ってデバッグしたい URL へアクセスする。 ダイアログがでてなんか聞かれる。 Submit でリクエストを送信する（これ押さない限りはリクエストを送らない。何かしらボタン押すのを待ち続ける）。 Abort Request を押す
Firebug Lite 1.2登場、IE Safari OperaでFirebug活用 | エンタープライズ | マイコミジャーナル
Firebug - Firebug Lite 25日(米国時間)、Firebug Liteの最新版となるFirebug Lite 1.2が公開された。Firebug LiteはFirebugの機能をJavaScriptで実装したサブセット版。ページに挿入可能なJavaScriptとして実装されているためFirefoxのみならずIE、Safari、Operaなどのブラウザでも使えるという特徴がある。 Webアプリケーション開発やWebデザイン調整に人気のあるエクステンションがFirebugだ。しかしエクステンションとして実装されているためFirefox以外では使えないという制約がある。同じデバッグ機能をIEやSafariで試したいと思っても使えない。Firebug LiteはFirebugの機能を挿入可能なJavaScriptで実装することでIEやSafari、Operaでも動作するようにし
Perlプログラマのためのgdb入門(at Shibuya.pm #9 LT) - とあるはてな社員の日記
先日のShibuya.pm #9のLightening Talkで「gdbでXS on mod_perlをデバッグ」という話をしてきました。XSを使い出すと、従来のPerl的デバッグだけでは不十分なのでgdbをうまく使って、効率的にデバッグしましょう、という話です。実は、はてな社内では1年近く前に勉強で話したネタだったのですが、ようやく公開することができました。 Shibuya.pmでは5分という枠があったのでショートver.でしたが、ここでは制限はないので、本来のロングバージョンの資料をアップします。ちょっと公開できない情報が混っていたので、xxxで隠していますが、ご了承ください。 ちなみに、Rubyとかでも似た感じでデバッグできると思うので、そちらの人も参考にしてください。長いよ!という人は、最後の「これは設定しておけ的gdb初期化マクロ」だけでもどうぞ。かなり便利です。 (資料公開が
Webデバッガ最強はFirebugだが、ほかのブラウザでは… | エンタープライズ | マイコミジャーナル
JavaScriptベースのWebアプリケーションやWebサイトのデザイン調整に欠かせないツールがFirebugだ。Webブラウザ内で直接インスペクトやデバッグを実施するツールとしては実質的にデファクトスタンダードといっていい。どれも満足のいく機能ばかりだが、唯一不満な点をあげるとすればFirefoxエクステンションとして実装されているためほかのWebブラウザでは使えないというところだろう。IEが最大シェアを持っていることにかわりはなく、むしろ標準に準拠していないことが多いIEでこそ同様のツールが必要だ。 そこでKevin Yank氏がSitePointにアップしたドキュメントIn-browser Development Tools: Firebug Still Kingに注目したい。同氏は代表的なWebブラウザとそのデバッグ/インスペクトツールに言及し現状をまとめている。内容を簡単にかい
Webdeveloperのダウンロード：ミナトラボ
ローカライズについて Web Develoerの日本語にかかわる問題が、ほぼすべて解決したことと、Infoaxia社から管理を移管したことを受けて、今後のWeb Developerのローカライズは、BabelZillaで行うことにしました。ローカライズの議論については、BabelZillaのディスカッションパネル、またはメッセージボードでやりとりできればと思っています。自分のアカウントは「minato」です。遠慮なくお声をかけてください。 Webdeveloperとは Web Developerとは、ウェブ制作を補助する拡張機能です。拡張機能は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。そのため、それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows, MacOS X, Linuxでの動作を確認していま
2008-06-03 - 最速チュパカブラ研究会
マイコミの記事の通り、長らくWebKitが使ってきたJavaScript Coreに大工事を施して、バイトコードを導入するようです。（私はSurfin' Safariのフィードで知りました） ↑ちなむと、これが Squirrel Fish（イットウダイ） Wikipediaより。 ↑Appleの人たちにはこう見えるらしい バイトコードなんてのは、ブラウザの裏方であるJS処理系のさらに裏側にあるもので、本来表に出る類のものじゃありませんが、どうしてもバイトコードを見たいという変態さん達のために、WebKitチームがいいものを作ってくれました。 WebKitのソースツリー一式を落として、 WebKitTools/Scripts/build-testkjs というスクリプトを実行すると testkjs.exe（あるいはtestkjs_debug.exe）という実行ファイルが出てきます。これ自体は
WebKitのデバッガが超絶便利になっている件 - os0x.blog
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、IEの互換性検証用にXP/Vistaの仮想マシンイメージを無償公開
はてなブログ | 無料ブログを作成しよう
