この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 ##Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表
is a totally awesome idea still being worked on. Check back later.
Google Chromeはシンプルに見えてオフラインやWebアプリショートカット作成などいろんな機能が搭載されています。 そんな中、JavaScriptデバッガがあるのも発見！ どんなもんかと思ってみてみたら、なんとコマンドラインベースのデバッガです。Firebugみたいな物を想定していたのですが、まさかgdb（GNU製C/C++デバッガ）みたいなのがブラウザに載ってるなんて・・・しかも全然情報ないし。 でも開発者にとっては、JavaScriptをランタイムでデバッグできると言うのは非常に嬉しい事ですね。そこで、Chromeデバッガの使用法についてちょっと調べてみました。 デバッガは、開発者向けメニューの中から選択する事が出来ます。立ち上げてみると、コマンドの表示結果が表示されるエリアと、コマンドを入力するテキストフィールドが並んでいるだけ、と言うシンプルなUIが表示されます。 最下部の
jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。 QUnit - jQuery JavaScript Library これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。 使い方は以下の通り。 提供されているメソッド test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。 module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。 ok( state, message ) : stateがtrueならOK、falseならNGという判定になります
ActionScriptのデバッグ方法として、 debuggerを使う方法 printデバッグする方法 の二つについて調べてみました。 debugger を使う方法 Flex 3.0 SDK には fdb というdebuggerが付属しています。 インストール作業 fdb を使うには flashplayer のインストールが必要です．flashplayer は Flex 3.0 SDK に同梱されていて、以下の手順でインストールできます $ tar xvfz flex/runtimes/player/lnx/flashplayer.tar.gz $ sudo cp flashplayer /usr/bin fdb の使い方 fdbを使って *swfをデバッグするためには、*swfにデバッグ情報を埋め込む必要があります。 デバッグ情報を埋め込むには、 mxmlc に -debug=true
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
さて、前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は、Firebugに実装されているConsole APIの紹介と、Console APIを利用したデバッグ手法について解説していきます。 Firebugで利用できるAPI Firebugには、デバッグに活用できる2つのAPIが実装されています。今回は、その2つあるAPIのうちConsole APIについて解説していきます。 Console API Console APIはFirebugのタブだけでなく、コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下に列挙しますので、目を通してください。 console.log(object[, object, ...]) 渡された全てのオブジェクトをconso
Drosera とは 1000speakers 後のハッカソンで 山岸くん が「Drosera っていうアプリがある！」って発見して、教えてもらいました。 Drosera は WebKit 用の JavaScript デバッガで、 Windows XP でも Mac でも動くみたいです。 WebKit Build Archives | WebKit からダウンロードした WebKit のアーカイブの中に同封されています。 で、実際に使ってみた感じ できること ステップ実行 コールスタックを見る レキシカルな変数をウォッチする などなどです。 まとめ Web インスペクタと併用すれば効果抜群ですね！
JavaScriptのデバッグ環境としては、FirefoxであればFirebugで問題ないだろう。だが、他のブラウザの場合はどうだろう。各ブラウザごとにデバッグ環境を作るのは非常に労力がかかるだろう。 そこで試してみたいのがこのソフトウェアだ。これであればどのブラウザでも利用できる可能性がある。 今回紹介するオープンソース・ソフトウェアはJackal、JavaScriptデバッグプロキシだ。 JackalはWindows向けのソフトウェアで、MirageというHTTPプロキシソフトウェアを使っている。インストールし、プロキシのアドレスをlocalhost:9889に設定すれば準備完了だ。 その状態でWebサイトを見ると、左上にJackalのアイコンが表示される。これをクリックするとデバッグウィンドウが表示される。JavaScriptの実行はもちろん、エレメントの構造を閲覧することもできる。
IEでJSのエラーになったときに立ち上がるデバッガって大体の人が使いこなせてないのではないでしょうか？ ちなみに僕もそうだったのですが、ふと思い立って調べてみました。 追記 (2008-01-10T14:24:30+09:00) はてブのコメントで、 MS Office持ってない人はVisual Web Developer(VWD)で。/ちょっと前にこんなの書いたので、VWD 2008使う人は参考にしてもらえると幸い。 http://d.hatena.ne.jp/terurou/20071218/119796573 とありました。 これはid:kaorunさんにも聞いていたので後で試そう〜と思ってたので助かります。 合わせてご覧になって下さい。 Microsoft Script Editorとは？ のようにOffice付属のツールだったりします。僕の環境では、 C:\Program Fil
Safari for Developers Safari is the best way to see the sites on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, hundreds of millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting edge technologies in Safari to deliver the best-in class websites and apps. Apple Pay on th
Seifi.org Blog Archive FireBug Tips and Tricks There is so much power packed into this little FireFox plug-in. FireBugで使える役立つ関数テクニック色々。 FireBugをインストールしていても、多くの機能を使っていない方が多いのではないでしょうか？ 次のような、便利な関数がFireBugには用意されています。 console.log 関数の sprintf 風使い方(次のように、sprintf 風に使えます) var x = "fubar"; var y = 543; console.log("value of x is %s and value of y is %d", x, y); console.info 関数 で情報アイコン付きでメッセージ表示 console.in
作業内容 ルンバみたいな自動で送られてくる棚に商品をバーコードでスキャンして入れるだけ ノルマは１日3000件 拘束時間11時間(勤務時間10時間プラス休憩1時間) 時給1050円 なんj民にオススメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
