4 заметки с тегом

debug РСС

21 августа 2013, 12:43

jQuery: Вывод дампа через pre делаем в виде простого дерева

$("pre").each(function(){
	$(this).html(
		$(this).text()
		.split("Array\n").join("<b>Array toggle</b>")
		.split("(").join("<i> [all]</i><div><pre>")
		.split(")").join("</pre></div>")
	)
});

$("pre").each(function(){
	var ptext = $(this).text(),
		ptextlen = ptext.length;
	if (ptextlen < 40) { /*  || (ptextlen < 20 && ptext.indexOf(' ') == -1) */
		$(this).parent().prev("i").remove();
		$(this).parent().prev("b").remove();
		$(this).parent().html("("+ptext+")").contents().unwrap();
	}
});

$("pre b").click(function(e){$(this).next().next("div").toggle();});
$("pre i").click(function(e){$(this).parent().find("div").show();});

$("pre b, pre i").css({
	"font-size":"12px",
	"color":"#000",
	"cursor":"pointer",
});
$("pre div").hide();


Что делает этот код:
* содержимое pre по дужкам разбивает на блоки
* добавляет кнопку сворачивания/разворачивания ветки и кнопку разворачивания всех подветок
debug   jquery

1 апреля 2011, 19:42

PHP: отладка в сложнодоступных местах :)

ob_start();

	print_r(get_defined_vars());
	
$output = ob_get_contents(); 
ob_end_clean();

$f = fopen('output.txt', 'w+');

fwrite($f, $output);
fclose($f);
debug   php

29 октября 2009, 13:11

Странный CSS, диагностика сайта

Тему диагностики ( CSS дебага сайта) можно расширить ;)

Некто Eric Meyer углубился в тему такого дебага, и разработал такой себе debug.css для правильных браузеров:
div:empty, span:empty, li:empty, 
p:empty, td:empty, th:empty {
	padding: 0.5em; background: yellow;}
*[style], img, a[href], font, center {
	outline: 5px solid red;}
table, th {border: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}
table[summary], 
th[scope="col"], 
th[scope="row"] {border: 1px solid #AAA;}
a[title] {outline-width: 0;}
a[title=""] {outline-width: 3px;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
li {margin: 0.67em 0;} 
Что тут происходит? Всё просто:
  • всем пустым контейнерам фон жёлтый
  • сразу всем картитнкам внешний бордер (аутлайн) 5пх, таблицам простой 5пх, а также ссылкам и порочащим css тегам :D
  • у картинок с альтом и тайтлом убераем аутлайн
  • у картинок с альтом меняем цвет аутлайна
  • у картинок с альтом или тайтлом меняем стиль аутлайна
  • если пустое что-то одно, меняем толщину
  • если нету ничего делаем точечками
  • аналогично ссылкам (только тут учитывается тайтл и хреф)
  • землю крестьянам, фабрики рабочим, евреям палестину


css   debug

21 июля 2009, 14:55

CSS-debug — непонятные вещи ;)

Зачем нужен? А что бы видеть вложенность всех элементов и блоков, и быстро разобраться где какой тэг не закрыт ;) ну и WebDeveloper toolbar в помощь!
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
Для ИЕ6-7 вместо outline, пишем border.
ЗЫ: почему outline а не border? потому что это бордер который не создаёт лишний пиксель ;), хотя он строится вне элемента!
css   debug