サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Chrome版のFirebugことGoogleChrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
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では
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog おひさしぶりです。オークション担当の山崎 賢です。 前回はPHP Serialize についてでしたが、 今回はPHPでのデバッグに関してお話します。 基本PHPはインタプリタ(厳密にはPHPは内部で一度コンパイルしていますのでインタプリタとは言い切れませんが) のデバッグではログ埋め込みが手軽です。 しかし、まれにSIGSEGVやSIGBUSなどでPHPスクリプトが落ちることがあり、途方にくれます。 地道にログを埋め込んでいき、箇所を特定するのも手法の1つですが、今回はgdbを用いたデバッグ方法を記載したいと思います。 ■STEP1 まずは、プログラムが落ちることを目的として以下のようなPHP Moduleを作成します。 ・ ・
Apple が Safari 4.0 のベータ版を公開した。 (ダウンロードはこちら) 見た目が派手なスピードダイヤルやカバーフローな履歴表示などに目が行きがちだけど、Safari 4.0 でJavaScript デバッガが標準装備になったのは大きい。 これまでも WebKit の Nightly に Dorsera というJavaScript デバッガのアプリケーションが同梱されていたが、別アプリケーションということもあって何だか安定せず使い勝手もイマイチだった記憶がある。(出たてのころの印象なので、最近は良くなっていたかも) これが Safari 4.0 ではアプリケーション内にデバッガの機能も搭載されものすごく便利になっている。JavaScript デバッガを起動するにはまず Preference メニューで Develop メニューを有効にする。
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 canbuild off of. The result of my work is a new Firefox/Firebug extension called FireUnit. FireUnit provides asimpleJavaScriptAPI for doingsimple testlogging and viewing within a new tab of Firebug. For example, here’s some of theAPI that you
OL7人とその課長の実況型ブログです。OL達のホンネや女子に囲まれた課長の苦悩と悦び(?)を等身大でお送りします。娘だらけのお父さん！女同士の人間関係に悩む方も必見です!? ナッチーはたまにcssやhtmlのコーディングなどもします。 でも、たまになのでショボイです・・・ で、書いてるうちにいきなり表示が崩れたりします！ でも前のバージョンとソースの違いがわからない・・・・ そんな時のみんなに笑われる必殺hackがあります！ その名も！ Photosopで差の絶対値攻撃!!!! 以下手順になります～ 全然違いのわからない AとBのソースが仮にあったとします。 2つをスクリーンショットして Photoshopのレイヤーを分けてそれぞれにペースト で。レイヤー操作「差の絶対値」 すると・・・・・ 見てー！犯人はココダーーー 差異があるところは黒くならないんです。本来は画像修正時の差分チェック
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
GoogleChromeはシンプルに見えてオフラインやWebアプリショートカット作成などいろんな機能が搭載されています。 そんな中、JavaScriptデバッガがあるのも発見！ どんなもんかと思ってみてみたら、なんとコマンドラインベースのデバッガです。Firebugみたいな物を想定していたのですが、まさかgdb（GNU製C/C++デバッガ）みたいなのがブラウザに載ってるなんて・・・しかも全然情報ないし。 でも開発者にとっては、JavaScriptをランタイムでデバッグできると言うのは非常に嬉しい事ですね。そこで、Chromeデバッガの使用法についてちょっと調べてみました。 デバッガは、開発者向けメニューの中から選択する事が出来ます。立ち上げてみると、コマンドの表示結果が表示されるエリアと、コマンドを入力するテキストフィールドが並んでいるだけ、と言うシンプルなUIが表示されます。 最下部の
先日ベータ版が公開されたGoogleオリジナルのブラウザ「GoogleChrome」。「無駄を削ぎ必要な機能のみを追求した」というのが謳い文句だが、その一方でウェブ開発者向けの機能が充実している点も見逃せないポイントだ。 高機能なJavaScriptコンソールGoogleChromeはウェブ開発者向けの機能として、デフォルトでJavaScriptコンソールとJavaScriptデバッガが付属している。特にJavaScriptコンソールの方は、Firefoxのアドオンとして著名なFirebugに劣らない高機能さであり、実務でも十分に使えそうだ。ChromeのJavaScriptコンソールおよびJavaScriptデバッガは、［開発/管理］メニューから起動できる（図1）。
Firefox で HTTP ヘッダを扱う拡張機能としては LiveHTTPHeaders が有名だが、 Tamper Data はリクエストごとにヘッダをカスタマイズできる（偽装とか）点で、ウェブアプリケーションのデバッグ時により役に立つ。でもぐぐってもあんまり情報がなくていまいち使い方がわからなかったのだけど、最近なんとなくわかってきたので書いておく。大ざっぱだけどスクリーンキャプチャ画像つき。 Tamper Data のウィンドウを開いて左上の Start Tamper を押す。これを押さないと有効にならない。押したら Firefox のメインウィンドウに戻ってデバッグしたい URL へアクセスする。 ダイアログがでてなんか聞かれる。 Submit でリクエストを送信する（これ押さない限りはリクエストを送らない。何かしらボタン押すのを待ち続ける）。 Abort Request を押す
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でも動作するようにし
先日のShibuya.pm #9のLightening Talkで「gdbでXS on mod_perlをデバッグ」という話をしてきました。XSを使い出すと、従来のPerl的デバッグだけでは不十分なのでgdbをうまく使って、効率的にデバッグしましょう、という話です。実は、はてな社内では1年近く前に勉強で話したネタだったのですが、ようやく公開することができました。 Shibuya.pmでは5分という枠があったのでショートver.でしたが、ここでは制限はないので、本来のロングバージョンの資料をアップします。ちょっと公開できない情報が混っていたので、xxxで隠していますが、ご了承ください。 ちなみに、Rubyとかでも似た感じでデバッグできると思うので、そちらの人も参考にしてください。長いよ!という人は、最後の「これは設定しておけ的gdb初期化マクロ」だけでもどうぞ。かなり便利です。 (資料公開が
JavaScriptベースのWebアプリケーションやWebサイトのデザイン調整に欠かせないツールがFirebugだ。Webブラウザ内で直接インスペクトやデバッグを実施するツールとしては実質的にデファクトスタンダードといっていい。どれも満足のいく機能ばかりだが、唯一不満な点をあげるとすればFirefoxエクステンションとして実装されているためほかのWebブラウザでは使えないというところだろう。IEが最大シェアを持っていることにかわりはなく、むしろ標準に準拠していないことが多いIEでこそ同様のツールが必要だ。 そこでKevin Yank氏がSitePointにアップしたドキュメントIn-browser Development Tools: Firebug Still Kingに注目したい。同氏は代表的なWebブラウザとそのデバッグ/インスペクトツールに言及し現状をまとめている。内容を簡単にかい
ローカライズについて Web Develoerの日本語にかかわる問題が、ほぼすべて解決したことと、Infoaxia社から管理を移管したことを受けて、今後のWeb Developerのローカライズは、BabelZillaで行うことにしました。ローカライズの議論については、BabelZillaのディスカッションパネル、またはメッセージボードでやりとりできればと思っています。自分のアカウントは「minato」です。遠慮なくお声をかけてください。 Webdeveloperとは Web Developerとは、ウェブ制作を補助する拡張機能です。拡張機能は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。そのため、それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows,MacOS X,Linuxでの動作を確認していま
マイコミの記事の通り、長らくWebKitが使ってきたJavaScript Coreに大工事を施して、バイトコードを導入するようです。（私はSurfin' Safariのフィードで知りました） ↑ちなむと、これが Squirrel Fish（イットウダイ） Wikipediaより。 ↑Appleの人たちにはこう見えるらしい バイトコードなんてのは、ブラウザの裏方であるJS処理系のさらに裏側にあるもので、本来表に出る類のものじゃありませんが、どうしてもバイトコードを見たいという変態さん達のために、WebKitチームがいいものを作ってくれました。 WebKitのソースツリー一式を落として、 WebKitTools/Scripts/build-testkjs というスクリプトを実行すると testkjs.exe（あるいはtestkjs_debug.exe）という実行ファイルが出てきます。これ自体は
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
