This presentation describes main frontend developer tools

1. Инструменты
frontend-разработчика

2. 1. Измерения
PerfectPixel - сверяем
верстку с макетом

3. 1. Измерения
Линейка
Pixus
JRuler Pro 3.1

4. 1. Измерения
Colorpicker
Em to px калькулятор

5. 2. Работа в браузере
Clear Cache - быстрая очистка кеша в
Live Reload - автоматическая перезагрузка
страницы браузера
при изменении кода

6. 3. Спрайты
Генератор css-спрайтов
SpritePad - создание спрайтов

7. 4. Bootstrap
1. Конструктор форм
2. Генератор кнопок
3. Bootstrap сниппеты

8. 5. Генераторы
1. Css-треугольники
2. CSS3-генератор теней, градиентов, и.т.д
3. Еще один css3-генератор
4. Генератор css3-анимаций

9. 6. Кроссбраузерность
1. Проверка кроссбраузерности свойств
2. BrowserStack - кроссбраузерность,
множество устройств

10. Google Chrome, DevTools
1. Панель Network:
- список загруженных файлов
- скорость их загрузки
- удобство просмотра ajax-запросов

11. Google Chrome, DevTools
2. Панель Console:
- возможность написания скриптов
прямо в ней
- просмотр ошибок скриптов

12. Google Chrome, DevTools
3. Панель Resources:
- список всех подгруженных файлов,
возможность их просмотра
- просмотр Cookies, Local Storage

13. Google Chrome, DevTools
4. Панель Timeline:
- удобное отслеживание
производительности скриптов