Posted by Pavel Podlipensky on February 05 6:05 AM
<p> Одной из моих излюбленных фич в Firebug является <strong>console.log</strong>. Полагаю, у меня есть единомышленники. И мы (я и мои единомышленники) часто забываем в коде, на продакшин серверах, наши излюбленные console.log. А пользователи, не поставившие себе Firebug, лицезреют некоторые Javascript ошибки... Решением данной проблемы могут быть либо таблетки от склероза (если такие уже придумали) или <strong>иммитация console объектов и методов</strong>. Выглядит это примерно следующим образом: </p> <div id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:f6332ecc-eb16-4abe-8471-d824c7ac8b45" class="wlWriterEditableSmartContent" style="margin: 0px; padding: 0px; display: inline; float: none"> <pre style="overflow: auto; background-color: White; font-size: 1.5em"> <div> <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: #0000ff">if</span><span style="color: #000000"> (</span><span style="color: #000000">!</span><span style="color: #000000">window.console </span><span style="color: #000000">||</span><span style="color: #000000"> </span><span style="color: #000000">!</span><span style="color: #000000">console.firebug) { </span><span style="color: #0000ff">var</span><span style="color: #000000"> names </span><span style="color: #000000">=</span><span style="color: #000000"> [</span><span style="color: #000000">"</span><span style="color: #000000">log</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">debug</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">info</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">warn</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">error</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">assert</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">dir</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">dirxml</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">group</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">groupEnd</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">time</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">timeEnd</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">count</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">trace</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">profile</span><span style="color: #000000">"</span><span style="color: #000000">, </span><span style="color: #000000">"</span><span style="color: #000000">profileEnd</span><span style="color: #000000">"</span><span style="color: #000000">]; window.console </span><span style="color: #000000">=</span><span style="color: #000000"> {}; </span><span style="color: #0000ff">for</span><span style="color: #000000"> (</span><span style="color: #0000ff">var</span><span style="color: #000000"> i </span><span style="color: #000000">=</span><span style="color: #000000"> </span><span style="color: #000000">0</span><span style="color: #000000">; i </span><span style="color: #000000"><</span><span style="color: #000000"> names.length; </span><span style="color: #000000">++</span><span style="color: #000000">i) window.console[names[i]] </span><span style="color: #000000">=</span><span style="color: #000000"> </span><span style="color: #0000ff">function</span><span style="color: #000000">() {} }</span> </div> </pre> <!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --> </div> <p> Этот код можно смело копировать в ваши javacript библиотеки и просто куски кода. Также можно просто сослаться на </p> <div id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:66d03669-3b3b-4cbf-8727-190f819eb2d1" class="wlWriterEditableSmartContent" style="margin: 0px; padding: 0px; display: inline; float: none"> <pre style="overflow: auto; background-color: White; font-size: 1.5em"> <div> <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: #008000"><!--</span><span style="color: #008000"> graceful degradation of firebugs console obj </span><span style="color: #008000">--></span><span style="color: #000000"> </span><span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="http://www.getfirebug.com/firebug/firebugx.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #000000"> </span> </div> </pre> <!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --> </div> <p> После чего можно смело писать так </p> <div id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:c4c0df6a-a092-4905-b6a1-d39fdcc307b0" class="wlWriterEditableSmartContent" style="margin: 0px; padding: 0px; display: inline; float: none"> <pre style="overflow: auto; background-color: White; font-size: 1.5em"> <div> <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: #000000">console.error(</span><span style="color: #000000">'</span><span style="color: #000000">an error</span><span style="color: #000000">'</span><span style="color: #000000">); console.warn(</span><span style="color: #000000">'</span><span style="color: #000000">a warning</span><span style="color: #000000">'</span><span style="color: #000000">); </span> <br /> </div> </pre> <!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --> </div> <p> Или даже так: </p> <div id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E7:d5e0d543-bcd7-4b37-bb77-1623d6ac6eac" class="wlWriterEditableSmartContent" style="margin: 0px; padding: 0px; display: inline; float: none"> <pre style="overflow: auto; background-color: White; font-size: 1.5em"> <div> <!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --><span style="color: #000000">console.dir({thanks:</span><span style="color: #000000">'</span><span style="color: #000000">for</span><span style="color: #000000">'</span><span style="color: #000000">, reading:</span><span style="color: #000000">'</span><span style="color: #000000">that</span><span style="color: #000000">'</span><span style="color: #000000">, cool:</span><span style="color: #0000ff">function</span><span style="color: #000000">(){ alert(</span><span style="color: #000000">'</span><span style="color: #000000">being cool</span><span style="color: #000000">'</span><span style="color: #000000">); }}); </span> </div> </pre> <!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin. http://dunnhq.com --> </div> <p> P.S. </p> <p> И все же, если кто-то знает, где можно купить таблетки от склероза - прошу в комментарии. </p> <p> <strong>Полезные ссылки</strong> </p> <p> <a rel="nofollow" href="http://getfirebug.com/console.html" target="_blank">http://getfirebug.com/console.html</a> </p> <p> <a rel="nofollow" href="http://code.google.com/support/bin/answer.py?answer=94630" target="_blank">Google Code - Fun with Firebug</a> </p>

Одной из моих излюбленных фич в Firebug является console.log. Полагаю, у меня есть единомышленники. И мы (я и мои единомышленники) часто забываем в коде, на продакшин серверах, наши излюбленные console.log. А пользователи, не поставившие себе Firebug, лицезреют некоторые Javascript ошибки... Решением данной проблемы могут быть либо таблетки от склероза (если такие уже придумали) или иммитация console объектов и методов. Выглядит это примерно следующим образом:

if (!window.console || !console.firebug) { var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; window.console = {}; for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {} }

Этот код можно смело копировать в ваши javacript библиотеки и просто куски кода. Также можно просто сослаться на

<!-- graceful degradation of firebugs console obj --> <script type="text/javascript" src="http://www.getfirebug.com/firebug/firebugx.js"></script>

После чего можно смело писать так

console.error('an error'); console.warn('a warning');  

Или даже так:

console.dir({thanks:'for', reading:'that', cool:function(){ alert('being cool'); }});

P.S.

И все же, если кто-то знает, где можно купить таблетки от склероза - прошу в комментарии.

Полезные ссылки

http://getfirebug.com/console.html

Google Code - Fun with Firebug

blog comments powered by Disqus