debug | Web活メモ帳

JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」

linja — Tue, 12 Apr 2011 02:05:00 +0000

JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。

出力したいメッセージを指定するだけできれいに整形して表示してくれます。

例えば、以下のようなJavaScriptを実行してみます。

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

↑すると、こんな感じで素敵に表示してくれちゃいます。
アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。

使い方

使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。

ほとんどのメジャーなブラウザで動作するようになっています。
IE6にも対応していますので、あのブラウザだけ動かないんだけど、、、
と言った時にも使えそうです。

便利なキーボードショートカット

ライブラリにはショートカットも含まれており、F2で表示非表示の切り替え、
Shift + F2でボックスの位置を変更、 Alt + Shift + F2でログメッセージをクリアしてくれます。

サイトには各ショートカットを実行するブックマークレットも有りますので、いちいち覚える必要もありません。

名前空間の変更も！

とは言っても既存のサイトでlogという名前をすでに使っているよ！という場合もあるかと思いますが、心配いりません。

簡単に名前空間を変更できるようになっています。

blackbird.jsを開いて11行目を変更すればOKです。

var NAMESPACE = 'log';

↑変更前

var NAMESPACE = 'myCustomLog';

↑これでmyCustomLog.debug(‘hoge’);が実行できるようになります。

ダウンロードは下のリンクからどうぞ。

The post JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 first appeared on Web活メモ帳.

Androidでwebサイトを開発する際に使える無料アプリ

linja — Fri, 12 Mar 2010 01:20:36 +0000

Androidからサイトの開発やデバッグを行えるアプリをまとめた「5 Free Android Apps for Web Developers」というエントリーのご紹介。

HTMLのソースの確認やFTP接続などをAndoroidから実行できるようです。
※ Androidの実機を持っていないので、動作確認はしておりません。

詳しくは以下

HTMLeditor

HTMLを作成してその場でプレビューできるアプリ

ダウンロード

AndFTP

Android携帯からFTP接続が可能になります。
FTP、 SFTPをサポートしています。

ダウンロード

View Web Source

サイトのソースを表示する事ができます。

ダウンロード

Magic Color Picker

Webデザインのアイデアのために。

ダウンロード

HTML Test

正しいHTMLの知識をテストするクイズアプリ。

ダウンロード

The post Androidでwebサイトを開発する際に使える無料アプリ first appeared on Web活メモ帳.

FirefoxでJavaScriptをデバッグできるアドオン「Venkman」

linja — Wed, 27 Jan 2010 01:08:12 +0000

VenkmanはFirefoxのために作られたJavaScriptのデバッガです。
ブレークポイント管理、コールスタック監視、変数/オブジェクト監視などができるため開発者にとっては強力なツールになりそうです。

ダウンロードはMozilla addonsからダウンロード可能です。

使い方

使い方ですが、まずはデバッガを起動します。
[ツール] > [JavaScript Debugger] を選択して起動します。

ウインドウ右下にあるコンソールからコマンドを実行します。

コマンドは以下のような形式になります。

/break [デバッグしたいファイル名] [行番号]

例)
/break jQeuery 10

このコマンドではJavaScriptを指定位置で停止させる事ができ、変数の内容などを取得する事が可能になっています。

Mozillaのサイトにて詳しい使い方も載っているのであわせてご覧下さいい。

Venkman

ただ、Firefox1.5と2.0で使用する場合にはバグがあるそうです。
一度アドオンのウインドウを閉じた後に再度開けないとの事。これはFirefox側の問題だそうです。

JavaScriptの制作に関わっている方は、導入してみてはいかがでしょうか。

The post FirefoxでJavaScriptをデバッグできるアドオン「Venkman」 first appeared on Web活メモ帳.