Хотели бы вы иметь возможность работать с JavaScript консолью в любом веб броузере? Прекрасное решение, реализующее эту возможность, создал Антон Теряев. Его консоль представляет собой динамически генерируемое перетаскиваемое окно, в которое можно вводить и выполнять программы JavaScript.
В Firebug – популярном плагине для Firefox, существует фукнция console.trace(), которая позволяет просмотреть стэк фукнций, т.е. просмотреть последовательность вызова функций до определенной точки. Но если вы его не используете, либо, что более вероятно, вам нужно просмотреть стэк вызова функций на других браузерах, не поддерживающих Firebug, то вам возможно пригодится следующая функция, созданная Эриком Венделином (Eric Wendelin):
Может для кого-то это и не новость, но я об этом плагине узнал только сейчас на Стартаперы.ru. Судя по описанию, CompanionJS предоставляет браузеру Internet Explorer функциональность для работы с JS как у Firebug – лог ошибок, JavaScript консоль и т.д.
Мне не совсем понравилась кнопочка “Buy” в меню на домашней странице, однако как я позже выяснил, использование программы в личных целях абсолютно бесплатно. Еще один не совсем положительный факт – программа зависит от Microsoft Script Debugger. Я не готов утверждать на 100%, но по-моему Microsoft Script Debugger установить можно только на лицензионный Windows, так что это может не всем подойти.
Вы наверно удивитесь, но производить отладку скриптов JavaScript можно при помощи Microsoft Office. Смешно, не правда ли? Тем не менее, в комплект поставки Microsoft Office 2003/XP входит Microsoft Script Editor – прекрасный дебаггер, внешне напоминающий Visual Studio. Он способен производить пошаговый проход, просмотр переменных, редактирование файлов и многое другое, и все это доступно для Internet Explorer 6/7 (и скорее всего для MS Office тоже 
).
Сегодня я хочу обратить ваше внимание на один довольно интересный (если с ним не сталкиваться ) баг, с которым мне довелось повстречаться. Мне нужно было создать таблицу в которую я добавлял строки при помощи innerHTML. Код для добавления строк был приблизительно следующим.
function insertData( name, value ){
var table = document.getElementById('dataTable');
table.innerHTML += '<tr><td>'+name+'</td><td>'+value+'</td></tr>';
}
Все работало отлично везде, кроме IE. После долгих поисков я все-таки обнаружил причину. Дело в том, что innerHTML нельзя использовать для добавления содержимого в тэги table, thead, tfoot, tr, которые в Internet Explorer доступны только для чтения (больше об этом можно узнать здесь). Поэтому эти элементы нужно создавать при помощи стандартных методов DOM. Однако и здесь хитро подложены грабли. Оказывается, что при создании таблицы в IE, элемент tbody является обязательным, т.е. структура таблицы должна иметь следующий вид table > tbody > tr > td. Например, следующий код будет работать везде, кроме Internet Explorer:
function createTable(){
var body = document.getElementsByTagName('body')[0];
var table = document.createElement('table');
table.setAttribute('border','2');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.setAttribute('id','myCell');
td.appendChild(document.createTextNode('Это таблица'));
tr.appendChild(td);
table.appendChild(tr);
body.appendChild(table);
}
В IE таблица будет создана и добавлена в документ (это видно в IE Developer Toolbar), но отображаться она не будет! Теперь, если добавить в таблицу элемент tbody, то проблемы исчезнут:
function createTable(){
var body = document.getElementsByTagName('body')[0];
var table = document.createElement('table');
table.setAttribute('border','2');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.setAttribute('id','myCell');
td.appendChild(document.createTextNode('Это таблица'));
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
body.appendChild(table);
}
Не правда ли, жесткий баг? И уж очень он смахивает на peekaboo баг, при котором элементы в IE точно так же не отображаются на странице.
И напоследок, интересная ссылка на сайт с описанием четырех багов innerHTML – Web bug track.
До встречи!