Чтобы выполнить что-либо в этой консоли, нужно ввести в главную панель свою программу и нажать кнопку "run script". Скрипт для создания такой консоли достаточно прост:

//mouse down on dragged DIV element
function startdrag(t, e) {
	if (e.preventDefault) e.preventDefault(); //line for IE compatibility
	e.cancelBubble = true;
	window.document.onmousemoveOld = window.document.onmousemove;
	window.document.onmouseupOld = window.document.onmouseup;
	window.document.onmousemove=dodrag;
	window.document.onmouseup=stopdrag;
	window.document.draged = t;
	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//move the DIV
function dodrag(e) {

	if (!e) e = event; //line for IE compatibility
	t = window.document.draged;
	t.style.left = (t.offsetLeft + e.clientX - t.dragX)+"px";
	t.style.top = (t.offsetTop + e.clientY - t.dragY)+"px";

	t.dragX = e.clientX;
	t.dragY = e.clientY;
	return false;
}
//restore event-handlers
function stopdrag() {
   window.document.onmousemove=window.document.onmousemoveOld;
   window.document.onmouseup=window.document.onmouseupOld;
}
function WRITE(s) {
	document.getElementById('ScriptOutArea').innerHTML+= s.toString().replace("\n", "<BR>");
}
function runScipt() {
	new Function("{\n"+document.getElementById('ScriptArea').value+"\n}")();
	document.getElementById('ScriptOutArea').scrollTop = document.getElementById('ScriptOutArea').scrollHeight;
}
function clearOut() {
	document.getElementById('ScriptOutArea').innerHTML = "";
}
function onerrorscript(err) {
	document.getElementById('ScriptOutArea').innerHTML += "<FONT color=red>"+err.replace("\n", "<BR>")+"</FONT><BR>";
	document.getElementById('ScriptOutArea').scrollTop = document.getElementById('ScriptOutArea').scrollHeight;
}

function initJavaScriptConsole() {
	if (document.getElementById('javascriptconsolediv') != null) {
		document.body.removeChild(document.getElementById('javascriptconsolediv'));
		return;
	}
	s = "";
	s+="<TABLE cellpadding=1 cellspacing=0 width=400>";
	s+="<TR><TD><DIV style='background:#bbccdd;color:black;border:1px solid black;font:11px courier new' onmousedown=startdrag(getElementById('javascriptconsolediv'),event)>javascript console, Anton Teryaev, 2008</DIV></TD></TR>";
	s+="<TR><TD><DIV style='border:1px solid black;padding:0px'><TEXTAREA style='padding:0px;width:100%;height:200px;border:0px solid black' id=ScriptArea>";
	s+="i = document.getElementsByTagName('BR');\n";
	s+="WRITE('There are '+i.length+' BR elements here\\n');";
	s+="</TEXTAREA></DIV></TD></TR>";
	s+="<TR><TD><INPUT TYPE=BUTTON VALUE='run script' onclick=runScipt() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px courier new'> <INPUT TYPE=BUTTON VALUE='clear output' onclick=clearOut() style='width:100px;background:#eeeeee;color:black;border:1px solid black;font:11px courier new'></TD></TR>";
	s+="<TR><TD><DIV style='background:#eeeeee;overflow:auto;height:100px;color:gray;border:1px solid black;font:11px courier new' id='ScriptOutArea'>";
	s+="<i>Output area, use WRITE(string) function.</i><BR>";
	s+="</DIV></TD></TR>";
	s+="</TABLE>";

	var sd = document.createElement("DIV");
	sd.style.position="absolute";
	sd.style.background="white";
	sd.style.border="1px solid black";
	sd.style.font="11px courier new";
	sd.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight/2-180)+"px";
	sd.style.left = (document.documentElement.scrollLeft+document.documentElement.clientWidth/2-200)+"px";
	sd.id = "javascriptconsolediv";
	sd.innerHTML=s;

	document.body.appendChild(sd);

	window.onerror = onerrorscript;
	window.onscroll = onwinscroll;
}
function onwinscroll() {
	md = document.getElementById('javascriptconsolediv');
	if (md.offsetTop > document.documentElement.scrollTop+document.documentElement.clientHeight-350) md.style.top = (document.documentElement.scrollTop+document.documentElement.clientHeight-350) + "px";
	if (md.offsetTop < document.documentElement.scrollTop) md.style.top = document.documentElement.scrollTop + "px";
	if (md.offsetLeft < document.documentElement.scrollLeft) md.style.left = document.documentElement.scrollLeft + "px";
}

Ну и неменее прост этот скрипт в использовании. Для того чтобы включить или выключить консоль, нужно вызвать одну единственную функцию:

initJavaScriptConsole();

Увидеть скрипт в действии можно на блоге автора.

function printStackTrace() {
    var callstack = [];
    var isCallstackPopulated = false;
    try {
        i.dont.exist+=0; //does not exist - that's the point
    } catch(e) {
        if (e.stack) { //Firefox
            var lines = e.stack.split("\n");
            for (var i = 0, len = lines.length; i < len; i++) {
                if ( lines[i].match( /^\s*[A-Za-z0-9\-_\$]+\(/ ) ) {
                    callstack.push(lines[i]);
                }
            }
            //Remove call to printStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
        else if (window.opera && e.message) { //Opera
            var lines = e.message.split("\n");
            for (var i = 0, len = lines.length; i < len; i++) {
                if ( lines[i].match( /^\s*[A-Za-z0-9\-_\$]+\(/ ) ) {
                    var entry = lines[i];
                    //Append next line also since it has the file info
                    if (lines[i+1]) {
                        entry += " at " + lines[i+1];
                        i++;
                    }
                    callstack.push(entry);
                }
            }
            //Remove call to printStackTrace()
            callstack.shift();
            isCallstackPopulated = true;
        }
    }
    if (!isCallstackPopulated) { //IE and Safari
        var currentFunction = arguments.callee.caller;
        while (currentFunction) {
            var fn = currentFunction.toString();
            //If we can't get the function name set to "anonymous"
            var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf("(")) || "anonymous";
            callstack.push(fname);
            currentFunction = currentFunction.caller;
        }
    }
    output(callstack);
}

function output(arr) {
    //Optput however you want
    alert(arr.join("\n\n"));
}

Как и console.trace() эта функция показывает стэк вызова функций. Работает она в IE, Firefox, Opera и Safari. Пример использования:

function foo() {
    var blah;
    bar("blah");
}

function bar(blah) {
    var stuff;
    thing();
}

function thing() {
    if (true) { //your error condition here
        printStackTrace();
    }
}

foo();

Вероятно более простым способом просмотра стэка было бы использование Firebug Lite, который может работать в IE, Opera и Safari, но все же, ситуации бывают разные.

Мне не совсем понравилась кнопочка “Buy” в меню на домашней странице, однако как я позже выяснил, использование программы в личных целях абсолютно бесплатно. Еще один не совсем положительный факт – программа зависит от Microsoft Script Debugger. Я не готов утверждать на 100%, но по-моему Microsoft Script Debugger установить можно только на лицензионный Windows, так что это может не всем подойти.

домашняя страница проекта

Итак, рассмотрим установку и настройку Microsoft Script Editor. Если у вас не установлен Microsoft Office, установите его. Если установлен, то зайдете в “Панель управления” -> “Установка и удаление программ” -> “Microsoft Office”, и жмите “Изменить”. Затем выберите “Добавить или удалить компоненты”, жмем “Далее”. На появившейся странице выбора компонентов нужно поставить галочку возле “Расширенная настройка приложений”, и опять жмем кнопку “Далее”. Следующей страницей будет панель выбора устанавливаемых компонентов, где нужно включить компонент “Веб-отладка” в разделе “Средства Office” -> “Редактор для языка HTML” -> “Веб-сценарии” (см. рисунок). Точно такая же процедура выбора компонентов будет и при новой установке Office:

Далее нажимаем “Обновить” (”Установить” если это новая установка). На этом установка Microsoft Script Editor закончена, переходим к настройке Internet Explorer. Откройте его, и в меню “Сервис” выберите “Свойства обозревателя”. В диалоге настройки откройте вкладку “Дополнительно” и снимите две галочки с пунктов “Отключить отладку сценариев (Internet Explorer)” и “Отключить отладку сценариев (другие)”:

На этом установка завершена. Теперь, каждый раз при обнаружении ошибки на странице, вместо стандартного сообщения об ошибке будет появляться диалог, предлагающий начать отладку.

Нажимаем “Да”, и в следующем диалоге выбора дебаггера выбираем “New instance of Microsoft Script Editor” и жмем “Yes”. Далее появится отладчик с открытой в нем страницей в том месте, где произошла ошибка.

Для пошагового прохода, используйте команды Step Into, Step Out, Step Over из меню Debug. Чтобы добавить точки останова, просто щелкните мышкой в поле слева возле нужной строки либо откройте диалог New Breakpoint (Alt+F9), в котором можно указать файл, строку или функция для останова. Для удобного просмотра переменных откройте панель Watch из меню Debug -> Windows (или Ctrl+Alt+W). Также можно просматривать переменные из диалога Debug -> Quick Watch (Ctrl+Alt+W). В любом случае отслеживаемые переменные необходимо вводить вручную.

Microsoft Script Editor можно также открывать вручную из меню “Вид”->”Отладчик сценариев”->”->”Открыть” Internet Explorer-а, либо просто запустив приложение из C:\Program Files\Microsoft Office\OFFICE11\MSE7.EXE. Далее, открываем нужный нам скрипт либо HTML файл, содержащий нужный нам скрипт, устанавливаем точки останова и запускаем отладку в меню Debug -> Start (F5).

Теперь, я думаю от отладки при помощи alert() можно отказаться. На мой взгляд, FireBug гораздо лучше приспособлен для отладки, однако IE порой выбрасывает такие ошибки, что только диву даешься. Так что, данная утилита может принести огромную пользу.

К сожаления Microsoft Script Editor мало документирован, и большинство информации в интернете доступно на английском. Единственное более-менее полное описание на русском языке я нашел здесь.

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.
До встречи!