32 Корисних розширення chrome для дизайнерів і розробників
Chrome DevTools- це здорово, але можливо додати ще більше цікавих можливостей в ваш браузер, щоб зробити веб-дизайн і розробку значно простіше. Ми представляємо 32 з наших улюблених розширень Chrome.
01. DomFlags
Радикально прискорити процеси стилізації елементів з DomFlags - дійсно грандіозним розширенням, яке дозволяє створювати поєднання клавіш для елементів DOM! Це як закладки для навігації по DOM і це змінить спосіб роботи з DevTools.
02. Highly Highlighter
Ось цікавий спосіб привернути людей до обговорення: Highly Highlighter дозволяє обмінюватися фрагментами з статей в інтернеті, так що ви можете звернути увагу на найбільш значущі частини написаного.
03. Booom
Booom робить Dribbble краще, показуючи більше кадрів в списках, додавши до них кнопки Like і Add to Bucket, а також створюючи автозапуск GIF-файлів і роблячи прокрутку нескінченною.
04. CSS-Shack
Це потужне розширення для Chrome, що дозволяє створювати дизайн, а потім експортувати його в файл CSS для використання на вашому сайті. Воно підтримує шари і містить в собі безліч інструментів, які ви звикли використовувати в своєму звичайному фото-редакторі.
05. Marmoset
Це блискуче розширення візьме ваш код і виведе знімки для демо і макетів. Ви також можете додати теми і ефекти для створення зображень для ваших промо та онлайн-портфоліо.
06. iMacros for Chrome
Як веб-розробнику, вам необхідно тестувати ваші веб-сторінки. Повторювати одні й ті ж дії знову і знову може стати утомливих процесом. iМacros - це зручне розширення для Chrome, яке дозволяє записувати дії і зберігати їх, так що вам потрібно буде зробити певну дію всього один раз. Після цього ви можете тестувати ваші сторінки знову і знову, повторюючи дії одним натисненням кнопки, заощаджуючи дорогоцінний час і дозволяючи собі зосередитися на більш нагальних питаннях.
Відео: Топ 16 Розширень для Google Chrome # Нічосі
07. Font Playground
Кожен дизайнер і розробник знайде це розширення безцінним. Font Playground дозволяє експериментувати з локальними шрифтами і всієї бібліотекою шрифтів Google на веб-сторінці, не роблячи будь-яких фактичних змін. Краса цього розширення полягає в тому, що воно включає в себе всі різні накреслення шрифтів, стилі і текстові ефекти, так що ви можете переглядати веб-сторінку перед тим, як впроваджувати зміни.
08. Window Resizer
Це розширення Chrome є дуже корисним інструментом, який робить саме те, що говорить його назва - змінює розмір вікна браузера, щоб допомогти вам у створенні адаптивного дизайну сайту. Вибирайте зі списку популярних розмірів монітора або додавайте самостійно призначені для користувача розміри і дозволу для збільшення точності.
09. Project Naptha
Якщо вам коли-небудь доведеться працювати над макетом зображення з вбудованим текстом, це розширення може врятувати вас від невеликого роздратування. проект Лігроїн може врятувати вас в світ легкого роздратування. Завдяки вправним трюкам OCR, розширення дозволяє виділяти, копіювати і вставляти текст з будь-якого зображення і навіть може перевести його для вас.
10. What Font
Дуже корисне розширення для Google Chrome, що дозволяє розробникам і дизайнерам ідентифікувати шрифти, використовувані на веб-сторінці. Тому, якщо ви натрапили на незвично виглядає веб-шрифт, який хочете використовувати в одному зі своїх майбутніх проектів, просто наведіть на нього курсор і з`ясуйте, миттєво, який це шрифт.
11. Yslow
Цей інструмент не тільки перевіряє, як швидко ваші веб-сторінки завантажуються, він також говорить вам, в разі чого, уповільнює їх. Yslow перевіряє вашу веб-сторінку по 23 з 34 правил, визначених командою продуктивності компанії Yahoo. Це надзвичайно корисний інструмент для аналізу веб-сторінок, а також пропозиції способів підвищення їх ефективності.
12. Web Developer
Як веб-розробник, ви можете запитати себе, як ви жили без цього розширення. Він додає кнопку на панелі інструментів Chrome з безліччю корисних інструментів для веб-розробника. Це офіційний порт розширення Web Developer для Firefox.
13. Page Ruler
Page Ruler - це відмінний інструмент для точного вимірювання елементів на будь-який веб-сторінці і їх подальшій обробці відповідно до ваших вимог. Намалюйте лінійку, щоб отримати розміри в пікселях і розташування.
14. Web Developer checklist
Цей інструмент дозволить вам перевірити, якщо ваші веб-сторінки слідують кращій практиці, коли справа доходить до SEO, юзабіліті, доступності та продуктивності (швидкість завантаження). Так, наприклад, якщо у вас відсутній тег H1 на сторінці або вона без мета-тегів, то розширення повідомляє вас про це, так що ви зможете швидко усунути цю проблему. Якщо ви клацніть на посилання «докладніше і допомогу» в нижній частині розширення, то знайдете більш поглиблений список.
15. DevTools Autosave
Справжня перлина для всіх веб-розробників, DevTools Autosave дозволяє автоматично зберігати будь-які зміни, зроблені на веб-сторінці, в CSS і JS через Chrome DevTools. Розширення легке в налаштуванні і використанні, а також заощадить вам багато часу.
16. Instant Wireframe
Перетворити будь-яку веб-сторінку в вайрфрейм за допомогою всього одного кліка. Це розширення для Google Chrome допомагає веб-розробникам і дизайнерам переглядати веб-сторінки, будь то локальні або в Інтернеті, з накладенням вайрфрейма.
17. ColorZilla
Розширення ColorZilla - це вдосконалена піпетка, збирач кольору, генератор градієнта і інші корисні колірні інструменти, які допоможуть вам у вашому дизайні - прямо у вікні вашого браузера.
18. Ripple Emulator
Це мультиплатформенний емулятор мобільного середовища, який може допомогти вам перевірити ваші веб-додатки, використовуючи різні пристрої і дозволу екрану.
Ripple Emulator може використовуватися в поєднанні з існуючими засобами розробки для виконання налагодження, перевірки DOM і автоматизованого тестування.
19. Streak
Streak є основним інструментом для управління CRM і підтримки електронної пошти Gmail. Він дозволяє вам перетворити одну адресу електронної пошти або вся розмова в відстежується, що виділяється і організований ярлик, яким ви можете управляти самі або поділитися з іншими.
20. Search Stackoverflow
Якщо ви веб-розробник, то, напевно, чули про Stack Overflow - місце для вирішення будь-яких проблем і питань, пов`язаних з розробкою. Якщо немає, то вам обов`язково потрібно його перевірити, співтовариство процвітає і охоплює широкий спектр тем від C # і Java до PHP і jQuery. Це фантастичне розширення додає вікно пошуку прямо в ваш браузер, дозволяючи шукати серед величезних ресурсів Stack Overflow.
Відео: ТОП 5 Корисні розширення для Google Chrome про які ви не чули
21. PHP Ninja Manual
Це може бути досить важким пам`ятати кожну функцію, тому, якщо ви бували в ситуаціях, коли доводилося витрачати години на пошук певної функції PHP в Google, то це розширення обов`язково приверне вашу увагу. PHP Ninja Manual надає вам всю документацію PHP-5.5 з прикладами на восьми мовах, не виходячи з вашого браузера.
22. PerfectPixel
Дизайнери ненавидять, коли вони створюють приголомшливий дизайн, який в результаті не збігається з результатом кодування. PerfectPixel насправді є ідеальним розширенням для веб-розробників, які прагнуть розробляти сайти, які є точними образами дизайну. Це просте у використанні розширення дозволяє накласти напівпрозоре зображення поверх веб-сторінки і виконати порівняння пікселів, щоб гарантувати 100% точність.
23. Code Cola
Цей інструмент дозволить вам не тільки переглядати вихідний код, з яким ви вже працюєте, але він також функціонує як CSS редактор, де ви можете редагувати свої веб-сторінки і бачити зміни миттєво.
24. User Agent Switcher
Відмінний інструмент, щоб переглядати, як виглядає сайт, використовуючи різні користувальницькі кошти, такі як iPad, iPhone або Android. Це може виявитися дуже корисним, якщо сайт був зламаний, і так ви можете переглядати те, як пошукові системи бачать сторінки.
25. IE tab
Один з найпопулярніших і корисних емуляторів IE. Він дозволяє веб-розробникам тестувати веб-сторінки в різних версіях IE безпосередньо в браузері Chrome.
26. PicMonkey
Це простий у використанні, безкоштовний онлайн-фоторедактор, який дозволяє редагувати веб-сторінки, зображення та скріншоти. Але це не те, що робить його хорошим. PicMonkey дозволяє захопити будь-який образ і робити скріншот всієї сторінки одним натисканням кнопки. Після того, як ви оберете зображення, ви можете відредагувати його, як ви хочете, застосовуючи ефекти для зміни експозиції.
27. Chrome Daltonize
Дефіцит колірного зору або дальтонізм зачіпає мільйони людей по всьому світу. Це геніальне розширення використовує техніка, яка дозволяє створювати образи, які підходять для перегляду людям з даним порушенням.
28. Appspector
Розширення допоможе веб-розробнику в перевірці бібліотек фреймворків, CMS та javascript на сайті, в той момент, коли ви його переглядаєте. В адресному рядку, з`явиться іконка, яка вказує виявлену бібліотеку. Це розширення Chrome має високий рейтинг і може виявити більше 100 популярних CMS і JS бібліотек.
29. Check My Links
Закінчили сайт, але забули перевірити всі посилання? Незалежно від того, наскільки ретельно ви стежили за цим, можливо, що ви упустили одну або дві, і переглянути їх усі буде досить клопітно. З цим розширенням, ви можете просто залишити сайт в роботі, і воно буде читати всі посилання на кожній сторінці, виділяючи доступні зеленим кольором і биті - червоним.
30. Flickr Tab
Це просто невелике розширення, яке відображає популярні фотографії з Fickr кожен раз, коли ви відкриваєте вікно. Натисніть на фотографію, щоб переглянути її в Flickr або клацніть ім`я користувача, щоб побачити більше фотографій від фотографа.
31. Google Art Project
Як і у випадку з попереднім розширенням, в кожній новій вкладці ви будете бачити шедеври від таких великих художників як Ван Гог і Моне. Якщо вам сподобалося зображення, натисніть на нього, і ви потрапите на веб-сайт Google Cultural Institute, який повний інформації про роботу і її творця.
32. Data Saver (Beta)
Отже, ваш останній рахунок від мобільного провайдера за Інтернет був значним? Не панікуйте. Вам просто потрібно це розширення: воно зменшує обсяг даних, що використовуються при перегляді веб-сторінок. При включенні Chrome використовуватиме сервери Google, щоб стискати сторінки перед їх завантаженням. Є тільки один нюанс: не буде включено SSL і режим інкогніто.
