複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
JavaScriptは、開発するのはエディタとWebブラウザがあれば事足りるのに、デバッグが恐ろしく面倒なんです。数千行のコードを書くと、Webブラウザごとの動作の違いだとか、オブジェクトの振る舞いの違いに苦労させられます。そこで、オリジナルでデバッグ ツール「Geranium」を作ってみることにしました。 まず現物を見てもらった方が分かりやすいと思うので、こちらをご覧ください。今回は手軽なサンプルということで、カラー ピッカーを作ってみました。このページにGeraniumを組み込んであります。 ■カラー ピッカー colorPicker.html 「へ？ 何も起きないじゃん……」と思った人は大正解です。このままではGeraniumは動き出しません。ブラウザの別画面で立ち上がったカラー ピッカーのURL欄の末尾に、「?debugger=true」を追加してみてください。 デバッグ出力がモリ
Home Features Documentation Download Screenshots A Cross-Browser Javascript Command-Line Debugging Tool Download Latest Stable Version Source code Jash.js (minified) Jash_source.js (non-minified) Jash.css Bookmarklet Jash bookmarklet - right click to copy or drag to bookmarks panel or toolbar to save. Release Notes for Latest Version Release Notes Previous Versions Browse Previous Versions
IE版のFirebug IE Developer Toolbar みなさんはInternet Explorer Developer Toolbarというのを知っているでしょうか？ マイクロソフトが現在ベータ版として提供しているツールで、簡単に説明すればIE版のFirebugです。 IEで使えるFireBugとして聞くとFireBug Liteを思い浮かべがちですがFireBug Liteのようにソースにjavascriptを埋め込むことなく実行することが可能です。 ちなみにFirebugとはjavascritpやCSSのデバッグなどを行えるFirefoxのアドオン(拡張機能)になります。 すごく便利ですので、使ったことがない方はFirebugの方からお使いください。 話は戻りますが、Internet Explorer Developer Toolbarのインストール方法について解説したいと
![IE版のFirebug IE Developer Toolbar[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a01a0c31d440f29a491fdd71f76aedb1d5a3f40b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fblog.webcreativepark.net%2Ficon_200x200.png)
FirefoxであればFirebugで簡単に問題の場所をみつけられますが、IEでjavascriptのエラーが出ると、素っ気ないうえに意味不明な日本語のエラーメッセージが出てきてお手上げなので、エラーが出ている場所の特定すら困難です。 そんなときでもOfficeについているスクリプトエディタ(前はスクリプトデバッガという名前だった気が....)を使うと、Visual Studioのデバッガとおんなじインターフェイスのデバッガを使ってjavascriptのエラーを出している場所をすぐに見つけることができます。Firebugと比べると極めて重たいですが、関数呼び出しをバックトレースすることもできますし、各スコープでの変数の値を調べることもできるので、これを使わない手はありません。 が、いつもどうやってインストールするのかを忘れてしまうのでメモ代わりに書いておきます。 コントロールバネルのプロ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
インストール方法は従来の開発者向けツールと同じです。 Opera 9.0 で開発者向けツールのページを表示し、「Developer Console」のリンクを適当なツールバーにドラッグしてください。ただ、この方法だとアイコンが表示されないので、 Hideto さんが作成されたボタンを利用されるほうがお勧めです。ご好意により Tips に転載させていただきましたので、ご利用ください。便利なボタンを作成してくださった Hideto さんに感謝です。 Developer Console は現在の正式版（Opera 9.1）には実装されていませんので、最新の Weekly Build をインストールする必要があります。 OPERA DESKTOP TERM のページのタイトルの下に最新版インストーラへのリンクがありますので、そこからダウンロードしてインストールしてください。ただし、場合によっては不
はじめに Ajaxを活用したリッチなページが多く見られるようになってきました。これらのページでは一体どういった処理をしているのでしょうか。 MyEclipseを使うと、たとえ外部のページであっても、どのようにAjaxアプリケーションが動作しているのかを覗き見ることができます。JavaScriptにブレークポイントを設定して、一行ずつステップ実行したり、どのような非同期通信が行われているのかが確認できます。 本記事では、MyEclipseが提供しているAjax用の機能を使ってAjaxアプリケーションの動作を確認する方法を紹介します。対象読者 本記事は、次のような方を読者対象としております。Ajaxを活用したサイトがどのように実現されているか興味がある方サーバサイドJavaの開発は行っているけれども、そろそろAjaxアプリケーション開発も始めようと考えている方 なお、Eclipseの基本操作
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日公開された Opera の開発者向け情報サイト Dev.Opera にて、 Opera 純正の開発者ツールが公開されました！今回公開されたのは以下の 3 つです。 DOM Console インタラクティブに DOM ツリーを表示し、スタイルや属性などの状態を調査できます。 DOM Snapshot 現在の DOM ツリーのスナップショットを別ページに表示します
日本ティブコソフトウェアの「TIBCO General Interface」は、無償のAjax開発環境。高度なリッチクライアントアプリケーションの開発効率を向上させることができる。 日本ティブコソフトウェアは、SOA（ソフトウェア指向アーキテクチャ）やBPM（Business Process Management）を主力とした製品群を提供している。その製品群にAjax開発環境「TIBCO General Interface」が新たに加わった。TIBCO General Interfaceを使えば、リッチクライアントアプリケーションの開発のコストを削減できる。また、開発用途のProfessional Editionならば無償で使用可能だ。 開発者にとって朗報なのは、TIBCO General InterfaceによりJavaScriptの開発・デバッグ環境が無償で入手できる点だ。また、Aja
Internet Explorer Team Blog We've moved! Find us at the new Microsoft Edge Dev Blog As we announced last week, with the reveal of Microsoft Edge we are archiving the IEBlog. Future... Date: 05/08/2015 Microsoft Edge is the browser for Windows 10 This morning, Joe Belfiore took to the stage at Build 2015 to share more about the next chapter in... Date: 04/29/2015 Announcing improvements to Enterpri
_ 前にどこかに書いた気がするし (16:22) どこかで誰かが似たようなことを書いてもいるだろうけど、JavaScriptでprintデバッグしたい場合は、 <script language="javascript"> var debugWindow; function h(str) { return str.replace('&', '&').replace('<', '<').replace('>', '>').replace('"', '"'); } function debugInit() { if (debugWindow != undefined && debugWindow.document != undefined) {return;} debugWindow = window.open('about:blank'); } function debugPrint(str)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
