Записки самоучки

Февраль 22, 2007

Firebug не одинок. Инструменты отладки веб-программиста

Filed under: AJAX,CSS,DOM,Броузеры,Ссылки,HTML,JavaScript — 4matic @ 12:10 дп

Последнее время очень много приходится заниматься отладкой скриптов на клиенте. До недавнего времени в этом мне помогал только Firefox с расширением Firebug.

Мне очень нравится работать с Firebug`ом. Что-то лучшее сложно придумать. DOM с полной раскладкой всех атрибутов элементов страницы: можно проследить наследование атрибутов стилей и родственные связи, возможно просматривать информацию, которой обменивается клиент север при работе с AJAX. Так же есть возможность пошаговой отладки JS. Мне очень нравится возможность редактирования страницы прямо в броузере. Да еще много чего — нужно просто установить и получать удовольствие от пользования.

Не так давно «проснулась» Opera. В очередной недельной сборке, а точнее, начиная с версии 9.2 в броузере появился инструмент Developer Console. Аналог FireBug, но только для Opera, но функционал скуднее. Этим инструментом еще толком не пользовался, поэтому что-то внятно-сравнительное не могу сказать.

Немного погугилив нашел похожий инструмент и для IE. Называется этот инструмент Internet Explorer Developer Toolbar. Фукнционал крайне аскетичен и проигрует Opera, но это лучше, чем конь в ваккууме.

Что еще полезно и чем пользуюсь:

  • ieHTTPHeaders — надстройки для IE. Позволяет просматривать заголовки, которыми обменивается клиент с сервером при получении страницы или XMLHttpRequest.
  • LiveHTTPHeaders — расширение для Mozilla, аналогичное по функционалу ieHTTPHeaders.
  • Web Developer Extension — расширение для Mozilla, которое помогает получить детальное представление о странице.
  • Font Finder — расширение для Mozilla, с помощью которого можно получить список атрибутов CSS выделенного фрагмента.
  • HTML VALIDATOR (based on Tidy and OpenSP) — расширение для Mozilla, которое позволяет проверять валидность сверстанных страниц.
  • FirePHP — пока что для меня темная лошадка. Буквально на днях нашел и повода познакомиться ближе не было. Привык работать связкой <pre> + var_dump() + exit().

Пожалуй — это все, что бывает у меня в руках при отладке программ на клиенте.

Декабрь 22, 2006

У атрибутов id и name общее пространство имен в Opera`е и IE`е

Filed under: DOM,Броузеры,Глюки,HTML,JavaScript — 4matic @ 12:28 дп

Представим ситуацию. У вас сложная форма с достаточно большим количеством элементов. Для доступа к некоторым элементам в скрипте вы используете тривиальную конструкцию document.getElementById(). К своему удивлению вы обнаруживаете, что атрибуты объекта отличаются от тех, которые вы ожидаете увидеть. Возможно причина в том, что у вас совпадают значения атрибута id одного объекта и атрибута name другого объекта. Пример:

<input type=»text» name=»test» id=»bad_id»>
<input type=»button» id=»test» onclick=’alert(document.getElementById(«test»).id)’>

Так вот, если мы кликнем по кнопке, то должны получить сообщение «test». НО. Вы получите ожидаемый результат только в Firefox, а вот в Opera и IE вы получите неожиданный результат в виде сообщения «id_test».

Согласно документации getElementById() возвращает первый найденный объект с искомым id. Согласно той же документации id должен быть уникальным, а вот name может повторяться.

В примере мы делаем все правильно и получаем некорректный результат. Скорее всего проблема в том, что в Opera и IE для name и id отведено общее пространство имён. А этого быть не должно. Немного погугилив я нашёл достаточно большое количество ссылок по озвученному вопросу. Показательными я считаю вот эти две:

  1. document.getElementById() returns element with name equal to id specified
  2. Element Name vs Id

Пойдя по первой ссылке мы увидим, что о баге известно уже больше года. Пойдя по второй ссылке мы получим трактование и описание аналогичное моему.

Как решить проблему?

Очень просто. Давать атрибутам id и name логичные значения. Ситуации, когда два разных объекта могут называться одинаково нужно еще поискать.

Если с логикой туго, то давать всем объектам уникальные id и name, уникальные в общем пространстве имен.

А еще лучше разработчикам браузеров устранить баг.

P.S. Нужно будет поэксперементировать с js-фреймворками.

Декабрь 18, 2006

Как удалить узел (node) DOM, зная его id

Filed under: DOM,JavaScript — 4matic @ 4:48 пп

На самом деле все просто. Достаточно знать, какие функции есть для работы с узлами, а так же немного понимать древовидную структуру объектной модели документа (DOM). Если у вас есть озвученные выше знания, то вы напишете следующую функцию, состоящую из одной строки:

function f(idname)
{
document.getElementById(idname).parentNode.removeChild(document.getElementById(idname));
}

Это все :-). Замечу, что в метод родителя removeChild вы должны передавать не идентификатор объекта, а сам объект.

Ссылка по теме:
1. DOM:element.parentNode
2. DOM:element.removeChild

Создайте бесплатный сайт или блог на WordPress.com.