Я занимаюсь разработкой сайтов уже много лет и не верю в то, что если буду держать в секрете используемые мной инструменты, это даст мне серьёзное преимущество на рынке труда.
Мне известно, что создание сайтов может быть тяжёлым и нудным занятием, но правильный подбор вспомогательных программ способен сильно облегчить жизнь веб-разработчику.
![](https://habrastorage.org/webt/-4/ir/bm/-4irbmc9fdlmdg28zt8m8gsam0u.jpeg)
Здесь я расскажу о 14 инструментах, которые помогают мне в решении моих рабочих задач.
Я применяю metatags.io для исследования внешнего вида моих сайтов, выводимых в областях предварительного просмотра на ресурсах Google, Facebook или Twitter. Metatags.io позволяет увидеть заголовок, описание и изображение, соответствущие сайту, в точно таком же представлении, как их видит посетитель вышеупомянутых ресурсов.
Туда, кроме того, можно загружать собственные изображения и модифицировать теги, соответствующие заголовку и описанию сайта, экспериментировать с ними, не меняя ничего на самом сайте.
![](https://habrastorage.org/getpro/habr/post_images/284/13a/2a4/28413a2a43d38e8dd99a91f45648fd17.jpg)
Metatags.io
Я применяю extractcss.com для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов (речь идёт о стилях, назначаемых идентификаторам и классам элементов, о встроенных стилях) и для формирования на их основе CSS-кода. В ходе работы с этим ресурсом не нужно делать ничего особенного: достаточно скопировать в соответствующее окно HTML-код, а всё остальное делается автоматически.
![](https://habrastorage.org/getpro/habr/post_images/a04/665/4ba/a046654baf0d6e90ec9832cd49d8cd8d.png)
ExtractCSS.com
Ресурс whatruns.com всегда приходит мне на помощь в ситуациях, когда надо узнать подробности об устройстве какого-нибудь сайта. Речь идёт о темах и плагинах, используемых на сайтах, о серверах, на которых они размещены. Нетребовательное к системным ресурсам расширение Whatruns можно установить в Firefox и Chrome.
![](https://habrastorage.org/getpro/habr/post_images/755/9ed/f00/7559edf00e2a6b0cd62aff4a40195545.png)
Whatruns.com
Инструмент unminify.com позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS, HTML, XML, JSON) в удобный для восприятия вид.
![](https://habrastorage.org/getpro/habr/post_images/5e4/992/b34/5e4992b3400791e2912c509ee0363054.png)
Unminify.com
Расширение Octotree способно хорошо помочь в деле исследования GitHub-репозиториев, но только в том случае, если тот, кто им пользуется, точно знает о том, что именно он ищет в репозитории. Например, оно позволяет искать файлы в репозитории по их имени. В некоторых ситуациях это расширение может сэкономить веб-разработчику немного времени.
![](https://habrastorage.org/getpro/habr/post_images/7c9/637/46d/7c963746d7077e37de858898dd6ef5c9.jpg)
Расширение для Chrome Octotree
Иногда я забываю о тщательной проверке различных деталей, касающихся веб-сайтов, над которыми работаю. Расширение для Chrome Web Developer Checklist помогло мне справиться с этой проблемой. Благодаря ему я уже не забываю о проверке самых разных аспектов сайтов — от фронтенда и SEO, до их мобильных версий.
![](https://habrastorage.org/getpro/habr/post_images/ecb/ee9/c99/ecbee9c99483b01a7c9a8f909f4e9ee0.jpg)
Расширение для Chrome Web Developer Checklist
Расширение Web Developer Form Filler пригодится тем разработчикам, кому, как и мне, надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов. Благодаря этому расширению можно сэкономить время и сделать своё дело быстрее, чем без него.
![](https://habrastorage.org/getpro/habr/post_images/6ef/83a/0c5/6ef83a0c53767cb7f0ccdac0827d3f07.jpg)
Расширение для Chrome Web Developer Form Filler
Расширение EditThisCookie — это инструмент, который мне совершенно необходим. Полагаю, другие веб-разработчики могут сказать то же самое. Мне приятно, что у меня в руках есть инструмент, который, не требуя никаких изысков, позволяет редактировать куки-файлы. Мне нравится широта возможностей EditThisCookie, внимание к деталям, уделяемое его разработчиками, и, в то же время, его простота. Пару щелчков мыши — и дело сделано.
![](https://habrastorage.org/getpro/habr/post_images/471/38d/ec5/47138dec5456f266b01ec95b2feba26a.jpg)
Расширение для Chrome EditThisCookie
Расширение GTMetrix позволяет мне узнавать о том, что замедляет мои веб-проекты. А узнав об этом, я могу их исправить, ускорить, улучшить эффективность их работы. Иногда проблемы сайтов связаны с серверами, иногда — со слишком большими изображениями, иногда — с кодом. GTMetrix позволяет выявлять и эти, и многие другие проблемы сайтов.
![](https://habrastorage.org/getpro/habr/post_images/cc6/7d3/1e1/cc67d31e1d26bf913710f0ab851e9245.jpg)
Расширение для Chrome GTMetrix
Я использую расширение Google PageSpeed Insights Extension для проверки сайтов на проблемы, связанные с их серверной частью. Например, с его помощью можно узнать о том, что замедляет загрузку сайта.
![](https://habrastorage.org/getpro/habr/post_images/c0f/e8d/ca6/c0fe8dca6a57ede1bf84dca526ea9f54.jpg)
Расширение для Chrome Google PageSpeed Insights Extension
Расширение Browserling позволяет просматривать сайты в различных браузерах. Например — в Opera, Chrome и Firefox. Оно, кроме того, позволяет выбирать операционную систему, в которой работает интересующий нас браузер, в частности — разные версии Windows и Android.
![](https://habrastorage.org/getpro/habr/post_images/a42/0ed/6c7/a420ed6c7d3eb97b606844d0ab1f6821.jpg)
Расширение для Chrome Browserling — Cross-browser testing
Проект responsively.app даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройства. Раньше, когда я не знал о responsively.app, то же самое я делал, исследуя разные представления сайта по одному. Несложно представить себе то, как много времени позволяет сэкономить этот инструмент.
![](https://habrastorage.org/getpro/habr/post_images/55f/66f/d64/55f66fd64607cd29fabe21aafb296623.png)
Responsively.app
Я пользуюсь возможностями проекта compressor.io для оптимизации изображений, снятых на телефон или на зеркальную камеру. Обычно их размеры превышают 1 Мб, что для веб-применений слишком много. Этот инструмент позволяет хорошо сжимать изображения, уделяя внимание не только их размерам, но и качеству.
![](https://habrastorage.org/getpro/habr/post_images/db4/535/02f/db453502f928fd163c7e4af53f933542.png)
Compressor.io
Этот онлайн-инструмент можно использовать для оптимизации и сжатия изображений в форматах JPEG, PNG, SVG, GIF и WEBP.
Ресурс drawkit.io помогает мне находить бесплатные векторные изображения для моих проектов. Это — качественные, профессиональные рисунки, которые можно использовать на сайтах без ссылки на их источник.
![](https://habrastorage.org/getpro/habr/post_images/097/bd1/e1d/097bd1e1d673d32541d824725f2acca2.png)
DrawKit.io
А какими вспомогательными инструментами пользуетесь при разработке сайтов вы?
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
Мне известно, что создание сайтов может быть тяжёлым и нудным занятием, но правильный подбор вспомогательных программ способен сильно облегчить жизнь веб-разработчику.
![](https://habrastorage.org/webt/-4/ir/bm/-4irbmc9fdlmdg28zt8m8gsam0u.jpeg)
Здесь я расскажу о 14 инструментах, которые помогают мне в решении моих рабочих задач.
1. Metatags.io
Я применяю metatags.io для исследования внешнего вида моих сайтов, выводимых в областях предварительного просмотра на ресурсах Google, Facebook или Twitter. Metatags.io позволяет увидеть заголовок, описание и изображение, соответствущие сайту, в точно таком же представлении, как их видит посетитель вышеупомянутых ресурсов.
Туда, кроме того, можно загружать собственные изображения и модифицировать теги, соответствующие заголовку и описанию сайта, экспериментировать с ними, не меняя ничего на самом сайте.
![](https://habrastorage.org/getpro/habr/post_images/284/13a/2a4/28413a2a43d38e8dd99a91f45648fd17.jpg)
Metatags.io
2. ExtractCSS.com
Я применяю extractcss.com для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов (речь идёт о стилях, назначаемых идентификаторам и классам элементов, о встроенных стилях) и для формирования на их основе CSS-кода. В ходе работы с этим ресурсом не нужно делать ничего особенного: достаточно скопировать в соответствующее окно HTML-код, а всё остальное делается автоматически.
![](https://habrastorage.org/getpro/habr/post_images/a04/665/4ba/a046654baf0d6e90ec9832cd49d8cd8d.png)
ExtractCSS.com
3. Whatruns.com
Ресурс whatruns.com всегда приходит мне на помощь в ситуациях, когда надо узнать подробности об устройстве какого-нибудь сайта. Речь идёт о темах и плагинах, используемых на сайтах, о серверах, на которых они размещены. Нетребовательное к системным ресурсам расширение Whatruns можно установить в Firefox и Chrome.
![](https://habrastorage.org/getpro/habr/post_images/755/9ed/f00/7559edf00e2a6b0cd62aff4a40195545.png)
Whatruns.com
4. Unminify.com
Инструмент unminify.com позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS, HTML, XML, JSON) в удобный для восприятия вид.
![](https://habrastorage.org/getpro/habr/post_images/5e4/992/b34/5e4992b3400791e2912c509ee0363054.png)
Unminify.com
5. Расширение для Chrome Octotree
Расширение Octotree способно хорошо помочь в деле исследования GitHub-репозиториев, но только в том случае, если тот, кто им пользуется, точно знает о том, что именно он ищет в репозитории. Например, оно позволяет искать файлы в репозитории по их имени. В некоторых ситуациях это расширение может сэкономить веб-разработчику немного времени.
![](https://habrastorage.org/getpro/habr/post_images/7c9/637/46d/7c963746d7077e37de858898dd6ef5c9.jpg)
Расширение для Chrome Octotree
6. Расширение для Chrome Web Developer Checklist
Иногда я забываю о тщательной проверке различных деталей, касающихся веб-сайтов, над которыми работаю. Расширение для Chrome Web Developer Checklist помогло мне справиться с этой проблемой. Благодаря ему я уже не забываю о проверке самых разных аспектов сайтов — от фронтенда и SEO, до их мобильных версий.
![](https://habrastorage.org/getpro/habr/post_images/ecb/ee9/c99/ecbee9c99483b01a7c9a8f909f4e9ee0.jpg)
Расширение для Chrome Web Developer Checklist
7. Расширение для Chrome Web Developer Form Filler
Расширение Web Developer Form Filler пригодится тем разработчикам, кому, как и мне, надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов. Благодаря этому расширению можно сэкономить время и сделать своё дело быстрее, чем без него.
![](https://habrastorage.org/getpro/habr/post_images/6ef/83a/0c5/6ef83a0c53767cb7f0ccdac0827d3f07.jpg)
Расширение для Chrome Web Developer Form Filler
8. Расширение для Chrome EditThisCookie
Расширение EditThisCookie — это инструмент, который мне совершенно необходим. Полагаю, другие веб-разработчики могут сказать то же самое. Мне приятно, что у меня в руках есть инструмент, который, не требуя никаких изысков, позволяет редактировать куки-файлы. Мне нравится широта возможностей EditThisCookie, внимание к деталям, уделяемое его разработчиками, и, в то же время, его простота. Пару щелчков мыши — и дело сделано.
![](https://habrastorage.org/getpro/habr/post_images/471/38d/ec5/47138dec5456f266b01ec95b2feba26a.jpg)
Расширение для Chrome EditThisCookie
9. Расширение для Chrome GTMetrix
Расширение GTMetrix позволяет мне узнавать о том, что замедляет мои веб-проекты. А узнав об этом, я могу их исправить, ускорить, улучшить эффективность их работы. Иногда проблемы сайтов связаны с серверами, иногда — со слишком большими изображениями, иногда — с кодом. GTMetrix позволяет выявлять и эти, и многие другие проблемы сайтов.
![](https://habrastorage.org/getpro/habr/post_images/cc6/7d3/1e1/cc67d31e1d26bf913710f0ab851e9245.jpg)
Расширение для Chrome GTMetrix
10. Расширение для Chrome Google PageSpeed Insights Extension
Я использую расширение Google PageSpeed Insights Extension для проверки сайтов на проблемы, связанные с их серверной частью. Например, с его помощью можно узнать о том, что замедляет загрузку сайта.
![](https://habrastorage.org/getpro/habr/post_images/c0f/e8d/ca6/c0fe8dca6a57ede1bf84dca526ea9f54.jpg)
Расширение для Chrome Google PageSpeed Insights Extension
11. Расширение для Chrome Browserling — Cross-browser testing
Расширение Browserling позволяет просматривать сайты в различных браузерах. Например — в Opera, Chrome и Firefox. Оно, кроме того, позволяет выбирать операционную систему, в которой работает интересующий нас браузер, в частности — разные версии Windows и Android.
![](https://habrastorage.org/getpro/habr/post_images/a42/0ed/6c7/a420ed6c7d3eb97b606844d0ab1f6821.jpg)
Расширение для Chrome Browserling — Cross-browser testing
12. Responsively.app
Проект responsively.app даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройства. Раньше, когда я не знал о responsively.app, то же самое я делал, исследуя разные представления сайта по одному. Несложно представить себе то, как много времени позволяет сэкономить этот инструмент.
![](https://habrastorage.org/getpro/habr/post_images/55f/66f/d64/55f66fd64607cd29fabe21aafb296623.png)
Responsively.app
13. Compressor.io
Я пользуюсь возможностями проекта compressor.io для оптимизации изображений, снятых на телефон или на зеркальную камеру. Обычно их размеры превышают 1 Мб, что для веб-применений слишком много. Этот инструмент позволяет хорошо сжимать изображения, уделяя внимание не только их размерам, но и качеству.
![](https://habrastorage.org/getpro/habr/post_images/db4/535/02f/db453502f928fd163c7e4af53f933542.png)
Compressor.io
Этот онлайн-инструмент можно использовать для оптимизации и сжатия изображений в форматах JPEG, PNG, SVG, GIF и WEBP.
14. DrawKit.io
Ресурс drawkit.io помогает мне находить бесплатные векторные изображения для моих проектов. Это — качественные, профессиональные рисунки, которые можно использовать на сайтах без ссылки на их источник.
![](https://habrastorage.org/getpro/habr/post_images/097/bd1/e1d/097bd1e1d673d32541d824725f2acca2.png)
DrawKit.io
А какими вспомогательными инструментами пользуетесь при разработке сайтов вы?
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
essome
Очередной шлак с кучей плюсцов
Resume
Например, 12 расширение очень даже ничего. Оно помогает сильно тем, кому нужен адаптив, и не хочется постоянно прыгать между экранами, проверяя, что все ок, и ничего не сломано.
epytnave
Критикуешь — предлагай
upagge
Забавно, но почему вы считаете, что тот кто критикует должен что-то предлагать))
epytnave
Если у критикующего есть свой взгляд на сабж, то почему бы его не озвучить, образно говоря.