ants Lab. | その他 | JavaScriptデバッグ ツール作ってみました＜第1回＞
JavaScriptは、開発するのはエディタとWebブラウザがあれば事足りるのに、デバッグが恐ろしく面倒なんです。数千行のコードを書くと、Webブラウザごとの動作の違いだとか、オブジェクトの振る舞いの違いに苦労させられます。そこで、オリジナルでデバッグ ツール「Geranium」を作ってみることにしました。 まず現物を見てもらった方が分かりやすいと思うので、こちらをご覧ください。今回は手軽なサンプルということで、カラー ピッカーを作ってみました。このページにGeraniumを組み込んであります。 ■カラー ピッカー colorPicker.html 「へ？ 何も起きないじゃん……」と思った人は大正解です。このままではGeraniumは動き出しません。ブラウザの別画面で立ち上がったカラー ピッカーのURL欄の末尾に、「?debugger=true」を追加してみてください。 デバッグ出力がモリ
Jash: JavaScript Shell
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[to-R]
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/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
IEでjavascriptのエラーをデバッグする方法 - bits and bytes
FirefoxであればFirebugで簡単に問題の場所をみつけられますが、IEでjavascriptのエラーが出ると、素っ気ないうえに意味不明な日本語のエラーメッセージが出てきてお手上げなので、エラーが出ている場所の特定すら困難です。 そんなときでもOfficeについているスクリプトエディタ(前はスクリプトデバッガという名前だった気が....)を使うと、Visual Studioのデバッガとおんなじインターフェイスのデバッガを使ってjavascriptのエラーを出している場所をすぐに見つけることができます。Firebugと比べると極めて重たいですが、関数呼び出しをバックトレースすることもできますし、各スコープでの変数の値を調べることもできるので、これを使わない手はありません。 が、いつもどうやってインストールするのかを忘れてしまうのでメモ代わりに書いておきます。 コントロールバネルのプロ
FirebugによるWebコードのデバッグ | OSDN Magazine
Webサイトの開発は、世紀の変わり目となった7年前の頃ほど単純な作業ではない。新たなツール、テクノロジ、開発方法論の氾濫により、もはやWebページはかつての単純なHTMLコードの列ではなく、各種のスタイルシート、マークアップ言語、スクリプトが複雑に入り混じったものになっている。だが、こうした複雑なブレンドものをデバッグするのは容易ではない。そこで登場するのが、WebブラウザFirefox用のオープンソースのアドオンFirebugだ。このアドオンを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。 各種Webプロジェクトの作成とデバッグに携わるWeb開発者を支援するアプリケーションは、いくつか存在する。SANIsoftの最高技術責任者で『Professional PHP4 Programming
[ThinkIT] 第1回：マイクロソフトキーマンが語る 〜ASP.NET AJAXはこうしてうまれた (2/3)
— 製品としてはやはり統一感がメリットになるのでしょうか 鈴木氏 まさにそうですね。サーバとクライアントでプログラミングモデルを共通化できるということには大きなメリットがあります。なぜなら、通信するデータのフォーマットなど考えなくてもよいからです。 これはソースコードを簡略化させ、開発効率を大きく向上させます。 また、ASP.NETを用いた既存のページ組み込みやすいというメリットもあります。ASP.NET AJAXはライブラリ化されており、それを組み込むだけで動作するからです。 — ASP.NET AJAXには、Microsoft AJAX Library、ASP.NET 2.0 AJAX Extensions、AJAX Control Toolkitの3つが含まれていますが、それぞれどのような役割をするのでしょうか 鈴木氏 AJAX LibraryはJavaScriptのライブラリで、W
Opera 最新ビルドの Developer Console を試す - WebOS Goodies
インストール方法は従来の開発者向けツールと同じです。 Opera 9.0 で開発者向けツールのページを表示し、「Developer Console」のリンクを適当なツールバーにドラッグしてください。ただ、この方法だとアイコンが表示されないので、 Hideto さんが作成されたボタンを利用されるほうがお勧めです。ご好意により Tips に転載させていただきましたので、ご利用ください。便利なボタンを作成してくださった Hideto さんに感謝です。 Developer Console は現在の正式版（Opera 9.1）には実装されていませんので、最新の Weekly Build をインストールする必要があります。 OPERA DESKTOP TERM のページのタイトルの下に最新版インストーラへのリンクがありますので、そこからダウンロードしてインストールしてください。ただし、場合によっては不
MyEclipseを使ったAjaxアプリケーションのピーピング：CodeZine
はじめに Ajaxを活用したリッチなページが多く見られるようになってきました。これらのページでは一体どういった処理をしているのでしょうか。 MyEclipseを使うと、たとえ外部のページであっても、どのようにAjaxアプリケーションが動作しているのかを覗き見ることができます。JavaScriptにブレークポイントを設定して、一行ずつステップ実行したり、どのような非同期通信が行われているのかが確認できます。 本記事では、MyEclipseが提供しているAjax用の機能を使ってAjaxアプリケーションの動作を確認する方法を紹介します。対象読者 本記事は、次のような方を読者対象としております。Ajaxを活用したサイトがどのように実現されているか興味がある方サーバサイドJavaの開発は行っているけれども、そろそろAjaxアプリケーション開発も始めようと考えている方 なお、Eclipseの基本操作
Opera が純正の開発者ツールをリリース - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日公開された Opera の開発者向け情報サイト Dev.Opera にて、 Opera 純正の開発者ツールが公開されました！今回公開されたのは以下の 3 つです。 DOM Console インタラクティブに DOM ツリーを表示し、スタイルや属性などの状態を調査できます。 DOM Snapshot 現在の DOM ツリーのスナップショットを別ページに表示します
IEBlog
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ThinkIT] 第2回：「VS.Php」に用意された機能を活用する (1/3)