FrontTalks #1: Денис Чистяков – Отладка расширений для IE и FF

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

Transcript

1. Фронтэнд разработчик Отладка расширений для FF и IE Чистяков Денис
2. Отладка, да не совсем • Про отладку веб-страниц написано множество статей и написано много удобных инструментов • К сожалению, не все из них работают при отладке расширений • Попытаемся свести всё к классической отладке 2
3. Самые частые проблемы • HTML, CSS и JS файлы упаковываются в архив • Стили и скрипты отдаются по специальным протоколам • Встроенные отладчики не всегда могут работать с расширениями 3
5. • Всегда предусматривайте два варианта сборки: development и production • Процесс сборки должен быть полностью автоматизирован • Bash / GNUMake / Grunt.js — не важно • Используйте symlink на файлы внутри расширения • Используйте слежение за файлами и автоматическую пересборку, например: lmd watch … 5 Сборка — это просто
6. Протоколы такие протоколы • В FF и Chrome файлы статики раздатся по протоколам chrome:// • file:// тоже не панацея • В IE они могут быть ещё более экзотическими • Firebug не может отлаживать файлы по этому протоколу и начинает при этом очень сильно тормозить • Отладчик IE не может отслеживать и редактировать стили на лету 6
8. • Всегда имейте возможность переопределить ссылки на вашу статику в расширении • Отдавайте файлы с локального веб-сервера по протоколу HTTP: nginx, Apache, Node.js — не важно • Этим же вы решаете проблему кэширования по «встроенным» протоколам 8 Протоколы такие протоколы
9. И всё было бы хорошо, если бы не IE • Отладчик в IE 9-10 неплох, но не всегда может получить доступ к стеку ошибок JavaScript • До сих пор нет нормального Console API • Отладчик в IE 8 имеет еще меньший функционал 9
10. И всё было бы хорошо, если бы не IE • Отладчик в IE 9-10 неплох, но не всегда может получить доступ к стеку ошибок JavaScript • До сих пор нет нормального Console API • Отладчик в IE 8 имеет еще меньший функционал • А в IE 6-7 вообще нет отладчика 10
11. Нам поможет
12. Что нам даст Visual Studio? • Возможность зааттачиться к процессу браузера • Автоматическое открытие студии в случае ошибки • Возможность навигации по коду из стека ошибки • Детальное состояние всех объектов • Возможность пошаговой отладки 12
13. Кратко о главном • Автоматизируйте сборку и пересборку на лету • Отдавайте файлы по «трационным» протоколам в режиме отладки • Используйте IDE и дебаггеры 13
14. Фронтэнд разработчик dench@yandex-team.ru Спасибо Чистяков Денис