Yahoo!UI Library：Loggerを使ってみる

Yahoo!UIライブラリのLoggerについて。

Loggerコントロールは、一行のコードでログの読み書きを提供します。
Loggerコントロールは、フィルタ、ポーズ、レジューム、ログクリアの簡単なメッセージインターフェースを提供します。

javascriptのデバッグにalertを使ってみたり、document.writeしたり、debug用のdivのinnerHTMLに入れたりしてデバッグをしてましたが、面倒くさいです。そんな人にYUIのLoggerを使うと少し便利です。

使い方

下記のcssとjsのファイルを読み込む必要があります。

<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.3.0/build/logger/assets/skins/sam/logger.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Drag and Drop (not required if not enabling drag and drop) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/dragdrop/dragdrop-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/logger/logger-min.js"></script>

bodyにyui-skin-samを指定しないとログ用のエリアがお洒落に表示されません。

<body class="yui-skin-sam">

YAHOO.widget.LogReaderをnewします。
そのあとから、YAHOO.logを使って、ログを表示することができます。

<script type="text/javascript">
	var myLogReader = new YAHOO.widget.LogReader();
	YAHOO.log ("LOG!");
</script>

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library: Logger</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.3.0/build/logger/assets/skins/sam/logger.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Drag and Drop (not required if not enabling drag and drop) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/dragdrop/dragdrop-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/logger/logger-min.js"></script>

</head>
<body class="yui-skin-sam">
</body>
<script type="text/javascript">
var myLogReader = new YAHOO.widget.LogReader();
YAHOO.log ("LOG!");
</script>
</html>

デモ

http://paranoid.dip.jp/dev/yahoo/yui/log.html

ログレベル

YAHOO.logの第2引数にログレベルを指定することができます。

<script type="text/javascript">
	var myLogReader = new YAHOO.widget.LogReader();
	YAHOO.log ("LOG!", "warn");
</script>

ドキュメント
http://developer.yahoo.com/yui/logger/

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12