この記事は、アムステルダムで2015年に開かれたFronteersのカンファレンスで私が行った講演、「デバッグの技術」に対応するものです。 要約：利用可能なあらゆるツールの使い方を学び、必要なときにそれを使うことで、バグの撃退を楽しみましょう。そのほうが、キーボードを無暗に叩いて6か月も費やしてしまうより、ずっと楽しいものです。 本題に入る前に… この記事を終わりまでスキップしたければ…… Don’t. Write. Bugs. とはいえ…… おそらくこれを読んでいるあなたはロボットではないでしょうから、1個や2個のバグぐらいは書いてしまったことがあるでしょう。「銀の弾丸」は存在しないのです。 実際、先ほどジョークで申し上げた『バグを書くな』というのは、デバッグの仕方を学ぶことの対極にあるものです。必要なのは経験です。バグに対するアプローチを見つけられるようになるためにはバグに遭遇しなけれ
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
https://www.youtube.com/watch?v=VV7b7fs4VI8 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 パッケージ（apt, yum, gem等）レポジトリのホスティングサービスであるPackageCloudを開発している、James Golickの講演です。 パフォーマンスの高いハイクオリティなソフトウェアをデプロイしたければ、あらゆるレベルでバグ修正ができるようになること。 まず、エピソードとして紹介しているのが、友人の会社のサイトが落ちて、あいにく、その会社のエンジニアが出払ってしまっていて、どうにかしてほしいと助けを求められたときのこと。 ソースコードを見たことない。 システムの構成を知らない。 phpは詳しくない。 SSHでアクセスできる情報だけはある。 とい
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
Ajaxを含め、WebアプリケーションのプログラミングではJavaScriptのコードをデバッグをすることが良くあります。 何らかのエラーが発生した場合、FirefoxであればJavaScriptコンソールに出力され、IEであればエラーアイコンが表示され詳細を見ることが可能です。 大体は、その内容を見れば解決可能なエラーですが、いわゆる「printデバッグ」を行いたいときがあります。 たとえば変数の値を書き出したり、関数の呼び出しをトレースしたりと「printデバッグ」で解決するものも多いはずです。 もちろんデバッガを利用するのが一番良いのでしょうが、そんなに大げさじゃない場合に良く使っている手を紹介します。 HTML中に以下のように textarea を追加します。 <textarea cols=100 rows=50 id="debug"></textarea> そしてJavaScri
PHPプログラムを解析して何処が重いか？がブラウザ上で簡単に分かる「XHProf」 2009年03月25日- XHProf Documentation (Draft) PHPプログラムを解析して何処が重いか？がブラウザ上で簡単に分かる「XHProf」。 通常、PHPでのプロファイリングというと、Xdebugでファイルを吐き出して、WinCacheGrindやKCacheGrindで読み込むというのが定番です。 ですが、この方法だと、ファイルを吐き出したファイルをGETして、ソフトに読み込ませる、というちょっと面倒な手順が必要でした。 XHProf を使えば、ブラウザ上で、プロファイリングが出来るみたいです。 XHProfの特徴 まず、セグメントごとの実行時間やメモリ利用の状況なんかがブラウザで見れます。 プログラムの構造を把握するのにも使えます。 プロファイリングの階層表示 ２つのプロファ
id:yaneurao さんにひなた先生が教えるデバッグが256倍速くなるテクニック を献本いただきました。ありがとうございます。 連載当時に数回レビューさせていただいた事があったのでそのご縁。 今読み返してみると、自分が二分法によるバグ原因特定を明確に意識したのは、この本からだったことが分かる。それ以前は、経験的に有用性に気付いていたもの、積極的に使ってはいなかったのだよなあ。半自動的にバグを見つけるとかもそう。 この本は表紙の絵が摩訶不思議な雰囲気で手に取るのを躊躇するかもしれないが、個人的には特に前半が勉強になる人は多いと思う。 バグの原因特定までの基礎的な道のり スタックを覗いてみる など、デバッグには多くのテクニックがあるのだけど、そういった基礎を学べる。 ちなみに泥まみれで、たくさんデバッグしてきた以下のような経験のある人には易しすぎるかも。 gdb でデバッグしようにも自分の
asXRayAS2 では定評のあったツール。AS3 にも対応している。サイトhttp://code.google.com/p/osflash-xray/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コンソール出力 (専用ビューワ)参考"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ Alconインスペクタとコンソールのセット。パフォーマンス情報が見れたり、オブジェクトの詳細な情報をダンプできるようだ。ビューワは AIR 製。サイトhttp://blog.hexagonstar.com/alcon/対応バージョンActionScript 2.0, ActionScript 3.0 (Flash CS3, Flex 2)機能インスペクタ、コ
Google Chromeはシンプルに見えてオフラインやWebアプリショートカット作成などいろんな機能が搭載されています。 そんな中、JavaScriptデバッガがあるのも発見！ どんなもんかと思ってみてみたら、なんとコマンドラインベースのデバッガです。Firebugみたいな物を想定していたのですが、まさかgdb（GNU製C/C++デバッガ）みたいなのがブラウザに載ってるなんて・・・しかも全然情報ないし。 でも開発者にとっては、JavaScriptをランタイムでデバッグできると言うのは非常に嬉しい事ですね。そこで、Chromeデバッガの使用法についてちょっと調べてみました。 デバッガは、開発者向けメニューの中から選択する事が出来ます。立ち上げてみると、コマンドの表示結果が表示されるエリアと、コマンドを入力するテキストフィールドが並んでいるだけ、と言うシンプルなUIが表示されます。 最下部の
Firefox 3とFirebugで始めるJavaScript開発 第2回Firebugによるデバッグの基本、Console APIとその活用 さて、前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は、Firebugに実装されているConsole APIの紹介と、Console APIを利用したデバッグ手法について解説していきます。 Firebugで利用できるAPI Firebugには、デバッグに活用できる2つのAPIが実装されています。今回は、その2つあるAPIのうちConsole APIについて解説していきます。 Console API Console APIはFirebugのタブだけでなく、コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下
１９６０年代前半のこと，ベル研究所が米国政府のミサイル防衛計画に参加していたことがある。そこで開発されたミサイル追跡システムは，実地試験の際，計６５発の試射のうち６発だけを取りこぼしたという。 ここで問題になったのは，その６発のうち１発はプロセッサーのエラーによって発生した失敗だったということ。単なる誤差ではなくハードウェアの信頼性に問題があるとしたら大変だ。そこで研究所では，この原因の調査に２人の従業員が割り当てられることになった。 この２人の調査チームは試験データを基にひたすら原因を調べ続けた。しかし，調査開始から１年経っても原因を特定することはできなかった。ついにはチームの拡充が図られることになった。その結果，ようやくレースコンディションらしきものを，回路の一部に見つけることができた。 そののち，同様の不具合が他にも無いかどうか確かめるために総ざらいの調査が行われた。結果として計１２
Win32のデバッグ Win32アプリケーションでは、デバッグ情報をコンソールに出力するようなこともできません。手軽なMessageBox関数を使う方法と、デバッグをサポートするAPIについて解説していきます。 MessageBoxを使う MessageBox関数は簡単なデバッグには便利です。例えば MessageBox( NULL, "呼ばれたよ", "title", MB_OK); とすれば、次のようなダイアログが表示されます。 メッセージボックスの例 MessageBoxで現れるダイアログはモーダルなので、ダイアログを閉じるまで制御は帰ってきません。例えば、アプリケーションが異常終了してしまう場合は、原因となりそうな周辺に１行づつMessageBox関数を挿入すれば、どこで異常終了が発生しているかを判断できます。 ただし、MessageBoxには、printf関数のように変数の値を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く