Статья, перевод которой мы публикуем сегодня, посвящена 10 полезным инструментам, которые предназначены для веб-разработчиков. Автор материала считает, что это — как раз такие инструменты, которые позволяют, как говорится, «работать с умом, а не до ночи».
![](https://habrastorage.org/webt/i8/bw/xy/i8bwxyoh8axudchruujiuv4bh1s.jpeg)
Website Vulnerability Scanner — это сканер уязвимостей веб-сайтов, разработанный в Pentest-Tools.com. Этому инструменту нужно дать ссылку на сайт, который нужно проверить на уязвимости, после чего будет сформирован отчёт.
![](https://habrastorage.org/getpro/habr/post_images/4b0/172/986/4b01729865bd1614a3178cbfb38611f7.png)
Результаты проверки сайта в Website Vulnerability Scanner
Nibbler — это инструмент, направленный на разносторонний анализ веб-проектов. В отчёт, формируемый им, входят оценки доступности контента сайта, оценки того, насколько позитивными могут оказаться впечатления пользователей от работы с ним. Nibbler анализирует сайты на предмет поисковой оптимизации и того, насколько хорошо они спроектированы и созданы.
![](https://habrastorage.org/getpro/habr/post_images/cef/d92/d78/cefd92d78419862dd24fc2df9f589726.png)
Nibbler даёт высокую оценку сайту dev.to
Meta Tags — это простой онлайновый инструмент, который можно использовать для быстрой проверки мета-тегов веб-сайтов.
![](https://habrastorage.org/getpro/habr/post_images/e1e/e82/0c1/e1ee820c18ef3ab0616199b3faec7ee4.jpg)
Проверка мета-тегов с помощью Meta Tags
Google Lighthouse — это опенсорсная автоматизированная система, позволяющая оценивать качество веб-проектов.
Она выводит оценки, имеющие отношение к разным аспектам устройства и функционирования сайтов. В частности, с её помощью можно оценить производительность, доступность, поисковую оптимизацию сайта, получив, помимо итоговых результатов, детальные отчёты и рекомендации по улучшению сайта.
![](https://habrastorage.org/getpro/habr/post_images/ab3/b1b/f5b/ab3b1bf5b9415a4f30e21b93f2cc80de.png)
Анализ сайта в Google Lighthouse
Endtest (сразу скажу, что я там работаю) — это интеллектуальная платформа для автоматизации тестирования, которая позволяет создавать комплексные тесты и выполнять их во всех основных браузерах.
Я автоматизировал Sign In-тест для сайта DEV Community и прогнал этот тест в облачной среде, в браузерах Chrome, Firefox, Edge, Safari и Internet Explorer 11.
Оказалось, что этот сайт, несмотря на то, что при его создании использовано множество «лучших практик», не особенно хорошо работает в Internet Explorer 11. Вот как выглядят результаты тестирования.
![](https://habrastorage.org/getpro/habr/post_images/d15/629/9c7/d156299c7226c5d3f3819c7f1d05f4c4.gif)
Результаты тестирования в Chrome
![](https://habrastorage.org/getpro/habr/post_images/502/c39/459/502c3945947d8d0550d5a4c653b5488e.gif)
Результаты тестирования в Internet Explorer 11
Loom — это бесплатное расширение для Chrome, которое позволяет делать видеозаписи, одновременно захватывая изображение с экрана и с веб-камеры.
Подобные записи можно рассматривать как альтернативу видеозвонкам, когда собеседники могут записывать в удобное для них время комментарии к некоему проекту и отправлять их друг другу.
![](https://habrastorage.org/getpro/habr/post_images/bb8/761/569/bb8761569024cdddbcba82d2ada186ec.jpg)
Chrome-расширение Loom
Pexels — это сайт, на котором можно найти бесплатные фотографии и видеоматериалы для своих проектов. Это — один из немногих сайтов, на котором, чтобы скачивать материалы, необязательно даже регистрироваться.
Меня этот сайт всегда выручает в ситуациях, когда мне надо сделать какой-нибудь прототип, а отдел маркетинга ещё не прислал официальные материалы.
![](https://habrastorage.org/getpro/habr/post_images/3b9/f32/679/3b9f32679e2c931f520b852b6fb25369.jpg)
Сайт Pexels
Figma — это инструмент для прототипирования сайтов, хорошо подходящий для командной работы над проектами. Figma поддерживает не только средства для создания прототипов, но и позволяет командам разработчиков и других специалистов обсуждать проекты и их отдельные детали.
![](https://habrastorage.org/getpro/habr/post_images/267/5c0/183/2675c01836d1f532e19c9a414180650e.jpg)
Figma
Funkify — это расширение для Chrome, которое позволяет разработчику взглянуть на веб с точки зрения людей с ограниченными возможностями. Это помогает разрабатывать сайты, с которыми будет удобно работать всем категориям пользователей.
![](https://habrastorage.org/getpro/habr/post_images/f68/9b6/908/f689b69085b3af93f08a90937fbb2289.jpg)
Funkify
PerfectPixel — это расширение для Chrome, которое позволяет помещать поверх HTML-страницы полупрозрачное изображение, представляющее макет страницы, подготовленный дизайнером. Это помогает выполнять попиксельное сравнение того, что создано, с тем, что должно получиться.
![](https://habrastorage.org/getpro/habr/post_images/c07/db9/9e8/c07db99e8ae2cbc002e8cbd20bea6a66.jpg)
Сравнение страницы и её макета с помощью PerfectPixel
Какие инструменты для веб-разработчиков вы добавили бы в этот список?
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
![](https://habrastorage.org/webt/i8/bw/xy/i8bwxyoh8axudchruujiuv4bh1s.jpeg)
1. Website Vulnerability Scanner
Website Vulnerability Scanner — это сканер уязвимостей веб-сайтов, разработанный в Pentest-Tools.com. Этому инструменту нужно дать ссылку на сайт, который нужно проверить на уязвимости, после чего будет сформирован отчёт.
![](https://habrastorage.org/getpro/habr/post_images/4b0/172/986/4b01729865bd1614a3178cbfb38611f7.png)
Результаты проверки сайта в Website Vulnerability Scanner
2. Nibbler
Nibbler — это инструмент, направленный на разносторонний анализ веб-проектов. В отчёт, формируемый им, входят оценки доступности контента сайта, оценки того, насколько позитивными могут оказаться впечатления пользователей от работы с ним. Nibbler анализирует сайты на предмет поисковой оптимизации и того, насколько хорошо они спроектированы и созданы.
![](https://habrastorage.org/getpro/habr/post_images/cef/d92/d78/cefd92d78419862dd24fc2df9f589726.png)
Nibbler даёт высокую оценку сайту dev.to
3. Meta Tags
Meta Tags — это простой онлайновый инструмент, который можно использовать для быстрой проверки мета-тегов веб-сайтов.
![](https://habrastorage.org/getpro/habr/post_images/e1e/e82/0c1/e1ee820c18ef3ab0616199b3faec7ee4.jpg)
Проверка мета-тегов с помощью Meta Tags
4. Google Lighthouse
Google Lighthouse — это опенсорсная автоматизированная система, позволяющая оценивать качество веб-проектов.
Она выводит оценки, имеющие отношение к разным аспектам устройства и функционирования сайтов. В частности, с её помощью можно оценить производительность, доступность, поисковую оптимизацию сайта, получив, помимо итоговых результатов, детальные отчёты и рекомендации по улучшению сайта.
![](https://habrastorage.org/getpro/habr/post_images/ab3/b1b/f5b/ab3b1bf5b9415a4f30e21b93f2cc80de.png)
Анализ сайта в Google Lighthouse
5. Endtest
Endtest (сразу скажу, что я там работаю) — это интеллектуальная платформа для автоматизации тестирования, которая позволяет создавать комплексные тесты и выполнять их во всех основных браузерах.
Я автоматизировал Sign In-тест для сайта DEV Community и прогнал этот тест в облачной среде, в браузерах Chrome, Firefox, Edge, Safari и Internet Explorer 11.
Оказалось, что этот сайт, несмотря на то, что при его создании использовано множество «лучших практик», не особенно хорошо работает в Internet Explorer 11. Вот как выглядят результаты тестирования.
![](https://habrastorage.org/getpro/habr/post_images/d15/629/9c7/d156299c7226c5d3f3819c7f1d05f4c4.gif)
Результаты тестирования в Chrome
![](https://habrastorage.org/getpro/habr/post_images/502/c39/459/502c3945947d8d0550d5a4c653b5488e.gif)
Результаты тестирования в Internet Explorer 11
6. Loom
Loom — это бесплатное расширение для Chrome, которое позволяет делать видеозаписи, одновременно захватывая изображение с экрана и с веб-камеры.
Подобные записи можно рассматривать как альтернативу видеозвонкам, когда собеседники могут записывать в удобное для них время комментарии к некоему проекту и отправлять их друг другу.
![](https://habrastorage.org/getpro/habr/post_images/bb8/761/569/bb8761569024cdddbcba82d2ada186ec.jpg)
Chrome-расширение Loom
7. Pexels
Pexels — это сайт, на котором можно найти бесплатные фотографии и видеоматериалы для своих проектов. Это — один из немногих сайтов, на котором, чтобы скачивать материалы, необязательно даже регистрироваться.
Меня этот сайт всегда выручает в ситуациях, когда мне надо сделать какой-нибудь прототип, а отдел маркетинга ещё не прислал официальные материалы.
![](https://habrastorage.org/getpro/habr/post_images/3b9/f32/679/3b9f32679e2c931f520b852b6fb25369.jpg)
Сайт Pexels
8. Figma
Figma — это инструмент для прототипирования сайтов, хорошо подходящий для командной работы над проектами. Figma поддерживает не только средства для создания прототипов, но и позволяет командам разработчиков и других специалистов обсуждать проекты и их отдельные детали.
![](https://habrastorage.org/getpro/habr/post_images/267/5c0/183/2675c01836d1f532e19c9a414180650e.jpg)
Figma
9. Funkify
Funkify — это расширение для Chrome, которое позволяет разработчику взглянуть на веб с точки зрения людей с ограниченными возможностями. Это помогает разрабатывать сайты, с которыми будет удобно работать всем категориям пользователей.
![](https://habrastorage.org/getpro/habr/post_images/f68/9b6/908/f689b69085b3af93f08a90937fbb2289.jpg)
Funkify
10. PerfectPixel
PerfectPixel — это расширение для Chrome, которое позволяет помещать поверх HTML-страницы полупрозрачное изображение, представляющее макет страницы, подготовленный дизайнером. Это помогает выполнять попиксельное сравнение того, что создано, с тем, что должно получиться.
![](https://habrastorage.org/getpro/habr/post_images/c07/db9/9e8/c07db99e8ae2cbc002e8cbd20bea6a66.jpg)
Сравнение страницы и её макета с помощью PerfectPixel
Какие инструменты для веб-разработчиков вы добавили бы в этот список?
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
i360u
Поддержка IE любой версии — штука далеко не обязательная, особенно для таких площадок как dev.to. Отказ от поддержки некробраузеров, если такая возможность имеется — это очень хорошая практика сама по себе.