Здравствуйте, RobinHood, Вы писали:
RH>привет! RH>может кто небудь посоветует как делаеть debug javascript. RH>понимаю что можно делать что то типа алерт и вызывать в функции. но что делать если RH>функция возврашает object. неужели нет никакой возможности делать дебаг на клиентскои RH>стороне(имею доступ практически к любым средствам разработки vs7,6. может dot.net ето делает???)... RH> если кто знает какои то open sourse project на ету тему поделитесь ссилочкои RH>спасибо
1. Microsoft Visual Studio .NET точно умеет — сам видел
2. Mozilla. Имеет JavaScript Console + DOM Inspector
3. А можно и самому сделать дебаггер (для любителей всё сделать своими руками) :
например, вот такой:
/**
* Класс jsDump для отладки
*
* @author Mikhail Stadnik aka }|{yK <root@autoweb.ws>
* @copyright (c) 2004
*/function jsDump() {
this.strDump = '';
this.wnd = window.open( 'about:blank');
}
/**
* Делает "мгновенный снимок" HTML.
* Это может быть полезно когда мы динамически изменяем
* HTML страницы и хотим посмотреть, на чо он похож в какой то определенный момент.
*/
jsDump.prototype.dumpHTML = function() {
if (navigator.appName == 'Netscape') {
this.strDump = '<HTML>' + document.getElementsByTagName( 'HTML').item(0).innerHTML + '</HTML>';
} else {
this.strDump = document.getElementsByTagName( 'HTML').item(0).outerHTML;
}
this.wnd.document.write( '<pre style="font-family: Courier;">' + this.strDump.html2view() + '</pre><HR size="1px">');
this.strDump = '';
}
/**
* Распечатывает переменную.
* Нужно отнестись с пониманием к работе данной функции и учитывать,
* что она абсолютно бесполезна в тех случаяк, когда с ёё помощью производится
* попытка "отдампить" объект, содержащий рекурсивные ссылки объектов на самих себя
* (эт такие объекты, как window, document, document.body и т.п.), так как это приведет
* к stack overflow at line xxx, потому что мы никак не сможем выйти из рекурсии
* Зато можеть быть полезной при попытке "отдампить" какие-то свои объекты, или,
* например, такой объект, как document.body.style
*
* З.Ы. Виду позднего времени (безумно хочется спать) нет желания сию минуту решить
* проблемму с рекурсией объектов. Возможно оно не появится и завтра :) Поэтому
* буду благодарен, если кто-то своим наметанным глазом увидит и подскажет всем остальным,
* как обойти данную проблемму...
*/
jsDump.prototype.dumpVar = jsDump_dumpVar;
function jsDump_dumpVar( _var, rem) {
this.strDump += '<i style="color: #0000FF;">' + typeof( _var) + '</i> <b>=</b> ';
switch ( typeof(_var)) {
case 'object': {
this.strDump += ' {<blockquote>';
for (var i in _var) {
this.strDump += '[<b>' + i + '</b>] ';
this.dumpVar( _var[i], true);
}
this.strDump += '</blockquote>}<br>';
break;
}
default: {
var addStr = typeof( _var) == 'string' ? '"' : '';
this.strDump += addStr + _var.toString().html2view() + addStr + '<br>';
break;
}
}
if (!rem) {
this.wnd.document.write( '<pre style="font-family: Courier;">' + this.strDump + '</pre><hr size="1px">');
this.strDump = '';
}
}
/**
* А это просто безумно хитрая приблуда :D
* Угадайте - что она делает?
*/
String.prototype.html2view = function() {
return this.replace( /&/g, '&').replace( /</g, '<').replace( />/g, '>');
}
// Пример использованияvar var1 = 'Blablabla';
var var2 = new Array(1, 2, 3, 4, 5, 6, 7, 'Blablabla');
var var3 = new Object();
var3.gg = var2;
var3.rr = 'Hahaha';
var3.cc = 4.236;
var3.ii = 456875;
var dd = new jsDump();
dd.dumpVar( var1);
dd.dumpVar( var2);
dd.dumpVar( var3);
dd.dumpVar( document.body.style);
dd.dumpHTML();
Думаю, что alert() + jsDump в большинстве случаев будет достаточно (если под рукой не оказалось путёвого дебаггера)
Здравствуйте, ЖуК, Вы писали:
ЖуК>З.Ы. Я обновил исходники у себя, так что все теперь могут посмотреть на них, ссылки были приведены в предыдущих постах. Для очень ленивых напомню.
ЖуК>Пример здесь ЖуК>Исходник здесь ЖуК>Качать отсюда или отсюда
есть такая идея (проверил — работает):
в bookmark'ах создается закладка со следующим содержанием:
при нажатии на эту закладку появится окошко с приглашением ввести имя переменной/объекта, и далее, после ввода, отобразится дамп этой переменной/объекта... по моему весьма удобно...
я думаю скрипт в закладке можно даже переработать так, что саму в саму страницу ничего не нужно будет дописывать... а скрипт будет присоединяться динамически...
тогда минимальный документ будет создан автоматически, соответственно там будет и пустой <body>... возможно это прокатит и в других браузерах — не проверял...
A>но есть проблема, если скрипт не успел подгрузиться, то будет ошибка... ищем решение...
Решения:
1. В конце скрипта выставляем глобальную переменную. В закладке в цикле проверяем ее на существование
2. Все, что должно вызыватся после загрузки скрипта ложим в функцию. В скрипте в конце ее вызываем.
3. В цикле после начала загрузки скрипта проверяем его состояние.
A>P.S. Жук, ничего что скрипт пользователи с твоего сайта подгружать будут?...
Здравствуйте, ЖуК, Вы писали:
ЖуК>Так как со временем всплывают всякие глюки, исходники меняются. ЖуК>На свежую версию исходников вы можете посмортеть здесь ЖуК>Для того, чтобы скачать исходники жмите сюда
Слегка поколдовал над твоим творением.
1. Сделал наглядное (цветовое) выделение раскрываемых нодов
2. Сделал сворачивание, разворачивание нодов.
привет!
может кто небудь посоветует как делаеть debug javascript.
понимаю что можно делать что то типа алерт и вызывать в функции. но что делать если
функция возврашает object. неужели нет никакой возможности делать дебаг на клиентскои
стороне(имею доступ практически к любым средствам разработки vs7,6. может dot.net ето делает???)...
если кто знает какои то open sourse project на ету тему поделитесь ссилочкои
спасибо
Здравствуйте, RobinHood, Вы писали:
RH>привет! RH>может кто небудь посоветует как делаеть debug javascript. RH>понимаю что можно делать что то типа алерт и вызывать в функции. но что делать если RH>функция возврашает object. неужели нет никакой возможности делать дебаг на клиентскои RH>стороне(имею доступ практически к любым средствам разработки vs7,6. может dot.net ето делает???)... RH> если кто знает какои то open sourse project на ету тему поделитесь ссилочкои RH>спасибо
В VS7 вообще есть дебагер скриптов. Есть еще и Microsoft Script Editor.
Вот гадина... обязательно ей документ подовывай иначе никак... может у кого-нибудь есть какие-нибудь соображения по этому поводу?
А то не нравится мне что-то этот урл на реальный файл...
Вот наваял новую версию, в которой устранен глюк с рекурсией объектов
В принципе, мне самому даже понравилось Очень удобно тем, что этот дебагер не привязан к какому-то браузеру. Правда тестил только в ИЕ 6 и Мозилла 1.6. Так вот дампим одно и то же но в разных браузерах — сразу же можно искать отличия, посмотреть какие свойства, методы и т.п. присущи одному и тому же объекто в одном браузере, какие в другом...
Вообщем предлагаю глянуть всем, кому это интересно. Клацайте мышкой на объекты с фигурными скобками, чтобы их раскрывать. Пример работы дебаггера здесь.
Исходник дебагерра:
/**
* Класс jsDump для отладки
*
* @author Mikhail Stadnik aka }|{yK <root@autoweb.ws>
* @copyright (c) 2004
*/function jsDump() {
this.wnd = window.open( '');
this.doc = this.wnd.document;
this.entries = new Array();
this.pre = this.doc.createElement( 'PRE');
this.doc.body.appendChild( this.pre);
this.variable = null;
this.dumpString = new String();
}
/**
* Распечатывает переменную.
* Дампит все возможные переменные. Если в переменной есть вложенность
* объектов - дампит по частям, требует от пользователя инициализации
* распечатки следующего блока
*/
jsDump.prototype.dumpVar = jsDump_dumpVar;
function jsDump_dumpVar( variable, oEntryPoint, name) {
var oEntryPoint = oEntryPoint || this.pre;
var oCaption = this.doc.createElement( 'SPAN');
oEntryPoint.appendChild( oCaption);
switch (typeof( variable)) {
case 'object': {
var idPrfx = this.entries.length;
var eI = this.doc.createElement( 'I');
eI.style.color = "navy";
eI.appendChild( this.doc.createTextNode( typeof( variable) + " "));
oCaption.appendChild( eI);
var eB = this.doc.createElement( 'B');
eB.appendChild( this.doc.createTextNode( (name ? name : variable) + " = "))
oCaption.appendChild( eB);
if (variable != null) {
oCaption.appendChild( this.doc.createTextNode( "{"));
var oBlock = this.doc.createElement( "BLOCKQUOTE");
oBlock.setAttribute( 'id', 'oBlock' + idPrfx);
this.entries[idPrfx] = oBlock.getAttribute( 'id');
oCaption.setAttribute( 'id', 'oCaption' + idPrfx);
oCaption.style.cursor = navigator.appName == 'Netscape' ? 'pointer' : 'hand';
oEntryPoint.appendChild( oBlock);
oEntryPoint.appendChild( this.doc.createTextNode( "}"));
oEntryPoint.appendChild( this.doc.createElement( "BR"));
var __js__dd = this;
oCaption.onclick = function() {
for (var i in variable) {
__js__dd.dumpVar( variable[i], oBlock, i);
}
this.style.cursor = '';
this.style.backgroundColor = '#EEEEEE';
this.onclick = '';
}
} else {
var oBlock = this.doc.createTextNode( variable);
oEntryPoint.appendChild( oBlock);
oEntryPoint.appendChild( this.doc.createElement( "BR"));
}
break;
}
default: {
var eI = this.doc.createElement( 'I');
eI.style.color = "navy";
eI.appendChild( this.doc.createTextNode( typeof( variable) + " "));
oEntryPoint.appendChild( eI);
var eB = this.doc.createElement( 'B');
eB.appendChild( this.doc.createTextNode( name + " = "))
oEntryPoint.appendChild( eB);
oEntryPoint.appendChild( this.doc.createTextNode( variable));
oEntryPoint.appendChild( this.doc.createElement( "BR"));
break;
}
}
}
/**
* Делает "мгновенный снимок" HTML.
* Это может быть полезно когда мы динамически изменяем
* HTML страницы и хотим посмотреть, на чо он похож в какой то определенный момент.
*/
jsDump.prototype.dumpHTML = function() {
if (navigator.appName == 'Netscape') {
this.dumpString = '<HTML>' + document.getElementsByTagName( 'HTML').item(0).innerHTML + '</HTML>';
} else {
this.dumpString = document.getElementsByTagName( 'HTML').item(0).outerHTML;
}
this.pre.appendChild( this.doc.createElement( 'HR'));
this.pre.appendChild( this.doc.createTextNode( this.dumpString));
this.dumpString = '';
}
// Пример использованияvar dd = new jsDump();
dd.dumpVar( document);
dd.dumpHTML();
Так как со временем всплывают всякие глюки, исходники меняются.
На свежую версию исходников вы можете посмортеть здесь
Для того, чтобы скачать исходники жмите сюда
Здравствуйте, uzzy, Вы писали:
U>Слегка поколдовал над твоим творением. U>1. Сделал наглядное (цветовое) выделение раскрываемых нодов U>2. Сделал сворачивание, разворачивание нодов.
U>Забрать можно отсюда
Я немного переделал так, чтобы работало в Mozilla. Все ссылки в предыдущем посте
Здравствуйте, ЖуК, Вы писали:
ЖуК>Спасибо, uzzy! Если честно, я как раз и надеялся на то, что кто-то подхватит идею — она не так уж и бесполезна!
я то и ее подхватил, когда под рукой было только notepad, и отлаживать alert-ами задолбался . В общем если у меня еще появятся идеи, то реализация за мной не застоит.
[skiped]
A>тогда минимальный документ будет создан автоматически, соответственно там будет и пустой <body>... возможно это прокатит и в других браузерах — не проверял...
Спасибо, anonymous! Правда в Опере упорно не желает работать ни так, ни так...
В дополнение добавлю, что кроме изменения, предложенного товарищем anonymous я сделал возможность не показывать переменные, которые равны null || undefined, и так теперь по-умолчанию
Появилось свойство jsDump::showEmpty и метод jsDump::showEmptyVars( needShow), который как раз и предназначен для того, чтобы задавать это свойство
Мало того, метод jsDump::dumpVar() вторым параметром теперь тоже принимает флаг showEmpty приоритет которого будет выше, чем у jsDump::showEmpty
Таким образом мы можем теперь управлять выводом нулл переменных (зачастую они не нужны и скорость отработки без их вывода увеличивается)
A>но есть проблема, если скрипт не успел подгрузиться, то будет ошибка... ищем решение...
Решаем проблемму
javascript:var w=window; if (w.jsDump==undefined){var d=w.document;var s=d.createElement('script');s.src='http://scripts.kiev.ua/scripts/jsdump.js';d.body.appendChild(s)}; while(!JS_DUMP_LOADED) { try { var dd=new jsDump(); } catch(err) { continue; }} var v=w.prompt('Enter object name:'); dd.dumpVar(eval(v));
Только протестить сейчас не могу... Вообщем такова идея, возможно при реализации нужно будет добавить задержку по времени в цикл...
Намекни, если заработает
A>P.S. Жук, ничего что скрипт пользователи с твоего сайта подгружать будут?...
Здравствуйте, King Oleg, Вы писали:
KO>Решения: KO>1. В конце скрипта выставляем глобальную переменную. В закладке в цикле проверяем ее на существование KO>2. Все, что должно вызыватся после загрузки скрипта ложим в функцию. В скрипте в конце ее вызываем. KO>3. В цикле после начала загрузки скрипта проверяем его состояние.
Клево, пока ты писал идею я писал ее реализацию и чуть позже тебя запостил — бывает же так
A>>но есть проблема, если скрипт не успел подгрузиться, то будет ошибка... ищем решение...
ЖуК>Уже нету проблемы. Вот код, который все решает:
Хотя с практической точки зрения эта фича нифиг не нужна
Потому что нам нужно дампить нечто в какой-то момент, а в данном случае мы дампим конечный результат. Хотя ингода и это нужно...
Здравствуйте, ЖуК, Вы писали:
ЖуК>И последний штришок для придания завершенности:
...
Понять не могу, то ли дома машина быстрая, то ли я не знаю.
В общем скачал последнюю версию, открываю в IE вылетает с ошибкой мол, нету такого проперти или объекта в стр. 12.
Пытаюсь в дебаге прогнать все нормально.
На работе проверил ошибки нет, не вылетает.
В Mozille и дома и на работе все пучком.
Кстати по Опере, попробовал первоначальный вариант дампера — все нормально Опера показывает (Опера 7.1).
Здравствуйте, ЖуК, Вы писали:
U>>Кстати по Опере, попробовал первоначальный вариант дампера — все нормально Опера показывает (Опера 7.1).
ЖуК>В настоящем варианте она ругается на this.doc.body — говорит null или undefined
знаю
Здравствуйте, uzzy, Вы писали:
U>Здравствуйте, ЖуК, Вы писали:
U>>>Кстати по Опере, попробовал первоначальный вариант дампера — все нормально Опера показывает (Опера 7.1).
ЖуК>>В настоящем варианте она ругается на this.doc.body — говорит null или undefined U>знаю
Йоу! Я ее вылечил мля!!!
Рассказываю. Вначале я все тестил под ИЕ и писал
this.wnd = window.open( 'about:blank');
В Mozilla это упорно не хотело работать. Точнее все работает, но нифига не отображается. Экспериментальным путем установил ("метод научного тыка" ), что это связано с урлом about:blank. Когда такой урл она, собака бланк тебе и все тут! Что ты ни делай — создавай ноды — нифига не показует. Канает только document.write....
А ослик работает и так и так...
А вот Опера, если открывает окно с пустым урлом, то оно бланк по полной программе — в нем даже элемента HTML нету! Поэтому пришлось сделать вот так:
Здравствуйте, anonymous, Вы писали:
A>Здравствуйте, uzzy, Вы писали:
ЖуК>>>И теперь все фунцикулирует U>>Нифига в Opera 7.23 Build 3227 не фунциклирует
A>а как на счет этого: A>
A> this.wnd = window.open( '', '', 'scrollbars=yes, toolbar=no, location=no, status=no, menubar=no, width=800, height=600, resizable=yes');
A> this.doc = this.wnd.document;
A> if (!this.doc.body) {
A> this.doc.open();
A> this.doc.write('<html><body></body></html>');
A> this.doc.close();
A> }
A>
Здравствуйте, ЖуК, Вы писали:
R>>Все ссылки умерли. Не могли бы участники обсуждения их подновить? ЖуК>Ох, насчёт всех незнаю, но вот эта должна теперь заработать. Но её по идее должно хватить...
Шаман, однако, вчера вроде в такую же тыкал выше по ветке — 404 получил.
. В общем если у меня еще появятся идеи, то реализация за мной не застоит
