Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Get FireBug, что в переводе означает...
краткое содержание

Get FireBug, что в переводе означает...

...берите и пользуйтесь. Инструмент по скорости работы, удобству пользования и мощности может считаться дружественным не только разработчику, но и начинающему разработчику скриптов. Есть просмотр и редактирование структуры документа, отладка скриптов, и всё с минимальным объёмом кода.
Существует дней: 319
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
28.02.07

FireBug для FireFox.

 Инструмент для обучения, отладки и разработки, плагин для FireFox. Он не кроссбраузерный, но его возможности заставят всех познакомиться с тем, что могут дать правильно построенные технологии браузера в таком малом объёме. Несмотря на некроссбраузерность его стоит серьёзно рекомендовать для обучения при написании кода HTML, CSS и JavaScript.

В стане разработчиков плагинов для Firefox неустанно появляются новые, периодически очень толковые инструменты. Недавнее появление инструмента FireBug ( http://getfirebug.com/, сейчас версия 1.01) внесло его в список необходимых и избранных инструментов разработчика. Конечно, он работает только с FireFox, потому что тесно интегрирован с ним. В этом можно усмотреть недостаток, что столь глубокой отладке не подлежат особенности IE, в котором по-прежнему придётся довольствоваться IE Developer Toolbar, Microsoft Script Editor, HttpAhalyzer, MS Visual InterDev. Для Firefox же получаем очень мощный и компактный инструмент в виде плагина. Его 300 с небольшим килобайт достаточно инсталлировать в Firefox и включать из его меню (или по F12), когда потребуется.

Вызов фрейма плагина из меню (скриншот 1).

Инстумент полезен не только для серьёзной разработки, но и для начального знакомства с HTML, CSS и JavaScript. (Осторожно, может вызвать привыкание только к одному типу браузеров!) Посудите сами, панель Firebug показывает структуру загруженного документа, стилей и скриптов. Можем немедленно отредактировать загруженную страницу и посмотреть результат. Можем увидеть структуру Dom, а в табе (странице) консоли - выполнить скрипт, чтобы посмотреть значения переменных или выражений в JS. Если водить мышью над страницей (в режиме "Inspect"), подсвечиваются соответствующие блоки с кодом в окне отладчика. Окно можно держать фреймом или отдельным окном.

Визуальное представление стилей блока (скриншот 2).

Структура блоков, выбранных в отладчике, подсвечивается на реальной странице и наглядно отображается в схеме стиля (ширина границ, отступов, размеры - основная страница - с табом "HTML", правая вспомогательная страница - с табом "Layout"), в которой немедленно можно исправить любое значение. Получаемую отличную гибкость для подгонки вёрстки (опять же, только для FF). В результате, сруктура плагинов FF доказывает свою приспособленность к построению очень мощной системы отладки, не требующей при этом гигантских ресурсозатрат или эмулирования страницы в отладчике. Если хотим узнать название свойства - смотрим страницу "DOM" в правых табах.

Просмотр свойств документа - имена и значения (скриншот 3).

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

Код JS и кнопки отладчика (скриншот 4).

Страница (таб) "Net" - исключает необходимость в HttpAnalyzer. Показывает заголовки, размеры и время загрузки (наглядно) каждого элемента страницы. Реальный код ответа, без структурных преобразований (в то время как в других табах в режиме просмотра (Inspect) код уже структурирован, независимо от того, каким был изначально). Показ рисунков, если это были рисунки.

В режиме просмотра тоже можно менять отдельные атрибуты и значения тегов, наблюдая и двигаясь по структуре кода. Способности замены подвержены и значения в правом табе "DOM", где описаны атрибуты и значения элементов. Те, которые только на чтение, просто не изменятся, а изменяемые дадут немедленное отображение изменения в окне браузера.

...Для полного управления потоком контента осталось дождаться инструмента типа Proxomitron - он в FF возможен, судя по подобным плагинам.

Для остальных браузеров появились утешительные новости. Разрабатывается инструмент Firebug Lite ( http://getfirebug.com/lite.html ) - архив на 8 КБайт со скриптами JS размером около 20 К. Его необходимо подключать к каждой странице внедрением кода: <script language="javascript" type="text/javascript" src= "/path/to/firebug/firebug.js" ></script>. Работает только инструмент, похожий на окно консоли полного FireBug. Пока он заслуживает только номинального упоминания в связи с основным продуктом.

 

Что про него пишут другие. В основном пока охи и ахи. "Нереально удобный", "Very great tool!", "must have for all web-dev-s". Выделим содержательное.

AJAX Debugging with Firebug (10.1.2007, англ., 6 страниц, с илл.). Как раз на 3-й странице - иллюстрация лога загрузки, отсутствующая здесь, и далее - работа с отладкой, точками останова. (Впрочем, если есть FF, стоит давно уже скачать этот плагин и посмотреть вживую, а если нет, скачать к нему FF.) Почему-то нет имени автора. Появление на ajaxian.com "Ajax Debugging with Firebug" (18.1.2007, англ.) - краткой статьи с тем же названием и скриншотом даёт основания думать, что автор - тоже Dion Almaer.

Презентация продукта разработчиком (Joe Hewitt, видео). Не смотрел: оно потоковое, весьма длинное (минут 15-20), содержит выступление на некоторой конференции со слайдами, а вовсе не то, что поможет быстро разобраться в продукте. Практически, достаточно просто установить плагин и поработать с ним на нескольких страницах.

На тему редакторов JS с отладчиками:

http://www.c-point.com/index.html - JavaScript and AJAX editor, ready-to-use solutions, JavaScript framework, плюс к этому редакторы PHP, C#, мастер создания электронной книги, генератор диаграмм (JS?), форматтер кодов. Это из рода "тяжёлой артиллерии", типа DW, хотя и содержит отладчик с показом переменных окружения (Inspect Variable), как в InterDev.

 

Уровень: для программистов
 javascript.aho.ru , © I.Svetlov, 2005-2006 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
11. Анимация падающего снега в окне браузера.
10. Инструменты Web 2.0 - приложения, работающие через браузер.
9. Многуровневое меню с навигацией по наведению мыши.
8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

Форум сайта рассылки, почта автора рассылки.

 
В избранное