29 Расширения Chrome для веб-дизайнеров и разработчиков

DevTools от Chrome отличные, но в вашем интернет-браузере можно добавить еще более интересные функции, чтобы упростить веб-дизайн и разработку. Вот 29 из наших любимых расширений Chrome для веб-дизайнеров и разработчиков.

01. Sizzy

 Сайт Sizzy «class =» lazy-image lazy-image-loading lazyload optional-image «onerror =» this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/XUhTNZbBzh6LVgwt9QRMHm-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/XUhTNZbBzh6LVgwt9QRMHm.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ XUhTNZbBzh6LVgwt9QRMHm.jpg "</p><figcaption>
<div class=

Простой способ протестировать ваш сайт на нескольких видовых экранах

Отзывчивый веб-дизайн, данный в эти дни , и вам нужен простой способ проверить ваши проекты в нескольких видовых экранах, Sizzy стоит посмотреть. Он покажет вам интерактивное представление вашей страницы, отображаемой на разных размерах экрана устройства, а также вы можете показать и скрыть моделируемой клавиатуры устройства и переключаться между пор характерным и ландшафтным режимам.

02. Палитра сайта

 Сайт палитры сайта "class =" lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this ) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https://cdn.mos.cms.futurecdn.net/pVho5JkL3d3FwPVKadPdHm-320- 80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/pVho5JkL3d3FwPVKadPdHm.jpg "data-pin-media =" https: //cdn.mos.cms.futurecdn. net / pVho5JkL3d3FwPVKadPdHm.jpg "/> </p><figcaption>
<div class=

Если цветовая схема берет ваше воображение, палитру сайта поможет вам одолжить ее

В следующий раз, когда вы увидите сайт, который отлично использует цвет, вот простой способ его использовать. Палитра сайта извлекает основные цвета с веб-сайта и создает общую палитру, которую вы можете легко показать сотрудникам. Вы также можете скачать шаблон Sketch, а также Adobe Swatch sup порт тоже.

03. Checkbot

 Сайт checkbot «class =» lazy-image lazy-image-loading lazyload optional-image «onerror =» this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/5yfk9MXkjjfCZzBn67RbHm-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/5yfk9MXkjjfCZzBn67RbHm.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ </p><figcaption>
<div class=

Откажитесь от всех этих неработающих ссылок и получите бесплатный SEO-толчок

Убедившись, что все ссылки на вашем сайте на самом деле работают, это мгновенная победа в юзабилити, и это хороший способ улучшить ваш SEO. Checkbot — это расширение Chrome, которое проверяет наличие неработающих ссылок, дублирует заголовки, сети перенаправления, недействительные HTML / JS / CSS и т. д., поэтому вы можете быстро проверить свой сайт на наличие плохих ссылок и зафиксировать их.

04. Тоби

 Тоби сайт "class =" lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/iFcj3LH6XhKHgzdy4WuXHm-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/iFcj3LH6XhKHgzdy4WuXHm.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ iFcj3LH6XhKHgzdy4WuXHm.jpg "</p><figcaption>
<div class=

Поверните все эти неуправляемые вкладки в полезные коллекции закладок

. Общепризнано, что к тому моменту, когда Chrome откроется в течение нескольких часов, это будет путаное гнездо вкладок шириной вашего мизинца. Тоби — отличный способ их приручить, с помощью которого вы можете организовать все эти вкладки в коллекции ссылок в качестве альтернативы нагрузкам отдельных закладок, делая их m uch легче управлять.

05. DomFlags

 DomFlags website "class =" lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/nfscaUS4bRoLv4YcgxbCr8-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/nfscaUS4bRoLv4YcgxbCr8.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ nfscaUS4bRoLv4YcgxbCr8.jpg "</p><figcaption>
<p> Новый способ работы с DevTools </p>
</figcaption></figure>
<p> Радикально ускорить процессы стилизации элементов с помощью DomFlags, действительно большого расширения, которое позволяет создавать сочетания клавиш для элементов DOM. Это похоже на закладки для навигации по DOM, это изменит способ работы с DevTools. </p>
<h3 id= 06. Highly Highlighter

 Высокий сайт «class =» lazy-image lazy-ima ge-load lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image .svg "src =" https://cdn.mos.cms.futurecdn.net/TrHaxR5qPv33WirFkfygE9-320-80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net /TrHaxR5qPv33WirFkfygE9.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/TrHaxR5qPv33WirFkfygE9.jpg "/> </p><figcaption>
<p> Высоко, новый способ участия в промышленности разговор </p>
</figcaption></figure>
<p> Вот интересный способ привлечь людей к обсуждению: высоко позволяет поделиться основными моментами статей в Интернете, чтобы вы могли привлечь внимание к самым значительным фрагментам написания. </p>
<h3 id= 07. Booom

 Booom сайт "class =" lazy-image lazy-image-loading lazyload optional-image "onerror =" this.parentNode.replaceChild (window.missingImage (), this) " data-normal = "https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" src = "https://cdn.mos.cms.futurecdn.net/vR3cyYNFUgYunD3WmJrbA7-320-80. jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/vR3cyYNFUgYunD3WmJrbA7.jpg "data-pin-media =" https://cdn.mos.cms.futurecdn.net/ </p>
<div itemprop= [194590001]

Получить лучший опыт Дриблинга с Booom

Booom делает Dribbble лучше, показывая большие снимки в списках;

08. CSS-Shack

 Расширения Google Chrome - CSS Shack "class =" lazy-image lazy -image-load lazyload optional-image "onerror =" this.parentNode.replaceC hild (window.missingImage (), this) "data-normal =" https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg "src =" https: //cdn.mos.cms .futurecdn.net / tdqaqvuTDsNCtwEayuLz99-320-80.jpg "data-data-original-mos =" https://cdn.mos.cms.futurecdn.net/tdqaqvuTDsNCtwEayuLz99.jpg "data-pin-media =" https: / /cdn.mos.cms.futurecdn.net/tdqaqvuTDsNCtwEayuLz99.jpg"/></p><figcaption>
<div class=

Это расширение Chrome позволяет создавать стили слоев и экспортировать их в файл CSS