Гугл хром розширення нюанси для розробника. Розширення Google Chrome для веб-розробки і не лише. Які взагалі версії Chrome бувають
Браузер Google Chrome- Відмінний вибір для дизайнерів та веб-девелоперів. За допомогою розширень для GoogleChrome, ви можете додати більше функцій, які можуть допомогти в дизайні, пошуку помилок та інших роботах із сайтом. Тут ми представляємо найкращі розширення для Chrome, призначені для дизайнерів та розробників.
3.
Resolution Test- це розширення призначене для перевірки веб-сторінок при різних роздільних здатнах екрана, при цьому ви можете задати власні параметри роздільної здатності. Цей інструмент дуже зручний для того, щоб перевірити, як ваш дизайн виглядає на моніторах різного розміру.
4.
Pendule розширює функції вбудованих у Google Chrome інструментів. Завдяки цьому розширенню користувачі мають безліч додаткових можливостей, таких як оцінка обмежувальних тегів з використанням автоматичних веб-сервісів W3C, приховування зображень на сторінці, перегляд скриптів, вбудованих в сторінку, а також багатьох інших.
5.
Plain Clothesробить добре лише одну річ – вона видаляє всі CSS на сторінці. Одним із улюблених способів оцінки доступності веб-сторінки є видалення стилів CSS та зіставлення читабельності сторінки зі стилями і без них. Такий підхід симулює ситуацію, коли у користувача на екрані сторінка відображається лише частково і вони можуть покладатися лише на теги сторінки для того, щоб отримати доступ до контенту.
Хоча ця програма була спочатку створена для тестування веб-сторінок, ви можете використовувати її для перегляду улюблених стилів у «нетилізованому» вигляді (так що ваш бос не впіймає вас за переглядом у той момент, коли вам потрібно закінчувати функцію на JavaScript).
6.
Якщо ви хочете вирізати певні частини веб-сторінки, Image Cropper – ваш очевидний вибір. Ця програма проста як палиця і не має фінтифлюшок. Просто вкажіть область, яку ви хочете вирізати, і додаток її забере. Чи потрібна точність аж до пікселя? Розширення відображає розміри та розташування фрагментів, що вирізають, так що ви можете підібрати необхідний розмір.
7.
Це розширення може пишатися своєю мінімалістичністю та простотою – і це добре, тому що немає жодних причин ускладнювати створення текстів Lorem Ipsum. Lorem Ipsum generator дозволяє заповнювати текст рамки при дизайні вашого сайту для презентацій.
8.
Виявлення багів у рамках движка Internet Explorer Trident – зовсім невеселе заняття. Використовуючи IE Tab, ви як мінімум можете заощадити небагато часу і не використовувати Internet Explorer (не кажучи вже про те, що має мало розширень) для пошуку проблем з рендерингом.
9.
jQuery Shell дозволяє проганяти команди javascript і jQuery в контексті відкритої веб сторінки. Дуже корисне розширення для вивчення та експериментування з jQuery.
10.
Ця програма – майстер одного трюку. Трюк полягає в тому, що програма дозволяє швидко отримувати значення Hex та RGB будь-якого кольору на будь-якій веб-сторінці. Ця функція може стати в нагоді в тому випадку, якщо потрібно визначити, які кольори використовує ваш улюблений вебсайт без використання фотошопу та його інструменту Eyedropper.
11.
За допомогою функції WebEdit, ви можете зробити будь-яку сторінку доступною для редагування (при цьому внесені зміни, зрозуміло, збережені не будуть). Ну і навіщо тоді вам це? А ось навіщо: якщо ви створюєте веб-сайт і хочете погратися з елементами без істотних змін коду, ця програма вам знадобиться.
12.
Вам ніколи не хотілося дізнатися, які технології, структури та програми з відкритим кодомвикористовує конкретний веб-сайт? Досвідчені розробники можуть відповісти на ці питання, вивчаючи вихідний код, але якщо вам хотілося б отримати відповідь швидше і легше, то випробувайте Chrome Sniffer. Chrome Sniffer перераховує всі відомі структури/бібліотеки javascript (jQuery, MooTools, etc.) та CMS (Drupal, WordPress, etc.), які використовуються веб-сайтом.
13.
Eye Dropper– розширення для Google Chrome, яке дозволяє визначати колір на будь-якій веб-сторінці. Більше того, програма видає колірне «колесо» та зразки кольорів (які можна знайти в будь-якій графічній програмі), так що ви можете експериментувати та маніпулювати з квітами для вибору потрібного.
15.
Правильно побудована веб-сторінка з гарною розміткою в кінцевому підсумку призводить до того, що сторінки будуть вражаючі результати в пошукових системах. Однак, якщо ви хотіли б оцінити ваш вебсайт з точки зору відомих параметрів оптимізації для пошукових серверів, то вам варто спробувати SEO Site Tools – розширення, яке пропонує вам величезний спектр корисних інструментів та функцій для оцінки SEO. Воно може вважати масу параметрів на сторінці і поза нею, отримати інформацію із соціальних ЗМІ і таке інше.
Існує кілька версій, які створені для різних категорій користувачів. Одна з них називається Google Chrome Developer Edition. Що це за версія така і навіщо вона потрібна? Про це і піде мовау цьому матеріалі.
Варто зазначити, що альтернативні збірки Хрому з'явилися вже давно. Вони супроводжують цей популярний браузер майже зі стартовою версією. Але не всім користувачам підходять альтернативні варіанти.
Справа в тому, що «інші» збірки Хрому призначаються для професіоналів у тій чи іншій галузі: верстальників, тестувальників, розробників і таке інше. Звичайним користувачам такі браузери не підійдуть. Проте треба розповісти про них.
Які взагалі версії Chrome бувають?
Насправді їх не так вже й багато. Проте стабільна їх лише одна. Це якраз та, яка викладається у вільний доступ. Завантажити її може будь-який користувач. Але є й альтернативні версії. Давайте тезово їх розглянемо.
Ось такі версії всіма улюбленого Google Хрому існують. Однак у цьому контексті нам цікава саме Developer Edition. Тому потрібно розглянути все ключові особливостіцієї версії докладніше. Тільки тоді можна зробити висновок.
Особливості Developer Edition
Ключовою особливістю цієї версії Google Chrome є інструменти для розробки. Вони стануть у нагоді тим, хто розробляє розширення та плагіни для цього веб-браузера. Звичайний користувач у таких інструментах загубиться.
Другою особливістю є просунута консоль. Вона служить для редагування коду та включення прихованих функційбраузер. Однак із нею треба вміти працювати. Найменша помилка в команді може призвести до сумних наслідків. 
Ще одна «фішка» — наявність усіх останніх нововведень, які перекочували в цю версіюз Canary. Завдяки цьому розробники можуть оптимізувати свої розширення під нові можливості веб-браузера.
Часті поновлення- Ще одна відмінна риса Developer Edition. Вони приходять іррегулярно, але не пізніше, ніж раз на два тижні. У деяких випадках оновлення можуть надходити вже через два дні. Це зручно для тих, хто тестує нові можливості веб-браузера.
Висновок
Отже, ми поговорили про те, які бувають версії Google Chrome і докладно зупинилися на збірці для розробників. Тепер зрозуміло, що ця версія відрізняється набором інструментів та просунутою консоллю.
Варто відзначити, що звичайним користувачам не потрібно встановлювати Developer Edition. Толку від цього не буде ніякого. Тим більше, що особливою стабільністю ця збірка не відрізняється. Якщо ви не розробник, краще використовувати Stable.
Існує величезна кількість безкоштовних розширень для браузера Google Chrome, які допомагають зробити ваше життя простіше. Ось 20 із найкращих.
У цій статті ми представляємо найкращі розширення Google Chrome для різних цілей - але кожне покликане полегшити роботу.
Firefox вже давно славиться своїм налаштуванням і безліччю розширень, але Google Chrome також набув в останні кілька років велику популярність серед веб-дизайнерів і розробників. Одна з причин цього полягає у його швидкодії та вбудованих інструментах для розробників.
Тепер же, з розвитком колекції розширень Chrome, яка розширюється щодня, це стає причиною, через яку багато веб-розробників та дизайнерів вибирають для себе саме цей браузер.
Бажаєте дізнатися про це більше? Ознайомтеся із нашим списком.
01. iMacros для Chrome
Розширення iMacros для Chrome дозволяє записувати дії та зберігати їх.
Вам, як веб-розробнику, може знадобитися перевіряти свої веб-сторінки. Виконання тих самих дій знову і знову може бути стомлюючим процесом. iMacros – це зручне розширення для Chrome, яке дозволяє записувати ваші дії та зберегти їх, від вас потрібно лише вчинити дію один раз.
Після цього ви можете перевіряти свої сторінки знову та знову, повторюючи дії одним натисканням кнопки. Це заощаджує цінний час і дозволить вам сконцентруватися на найважливіших питаннях.
02. Font Playground
Font Playground дозволяє експериментувати з локальними шрифтами на активних веб-сторінках.
Кожен дизайнер та розробник знайде для себе багато корисного у цьому розширенні. Font Playground дозволяє експериментувати з локальними шрифтами та всіма бібліотеками шрифтів Google на активних веб-сторінках, при цьому не вносячи жодних змін у самі сторінки.
Перевагою цього розширення є те, що воно включає всі можливі розміри шрифту, стилі та ефекти. Ви можете спочатку візуалізувати різні варіанти шрифтів, перш ніж вносити реальні зміни до коду.
03. What Font
Який шрифт використовують? Розширення Chrome What Font може вам це показати!
Дуже корисне розширення для Google Chrome, What Font дозволяє розробникам та дизайнерам визначити, які шрифти використовуються на веб-сторінці.
Так що, якщо ви натрапили десь у мережі на шрифт, який виглядає просто фантастично, і хочете використати його в одному зі своїх майбутніх проектів, просто наведіть на нього курсор, і ви миттєво дізнаєтесь, що це за шрифт.
04. Yslow
YSlow підкаже вам, що уповільнює показ сторінки.
За допомогою цього інструменту не просто можна перевірити, як швидко завантажується веб-сторінка, він також покаже вам, чи уповільнює що-небудь завантаження, якщо так, те, що саме.
YSlow перевіряє веб-сторінки за 23 з 34 правил визначення продуктивності, розроблених командою Yahoo. Це надзвичайно корисний інструментдля аналізу веб-сторінок, який пропонує способи оптимізації їх роботи.
05. Web Developer
Розширення Chrome Web Developer надає низку корисних інструментів для девелоперів.
Якщо ви веб-девелопер, то можете запитати себе: як ви обходилися досі без цього розширення. Він додає кнопку на панелі інструментів, через яку в Chrome здійснюється доступ до безлічі корисних інструментів для веб-девелоперів.
Це офіційна версіярозширення Web Developer, розробленого для Firefox.
06. Web Developer checklist
У ньому виправлено проблеми зі швидкодією в цьому зручному інструменті Chrome.
Цей інструмент дозволяє перевірити все: чи відповідають ваші сторінки SEO, юзабіліті, а також їхня видимість та продуктивність (швидкість завантаження сторінки).
Так що, якщо, наприклад, ви пропустили тег H1 або якщо у сторінки немає мета-заголовок або мета-опис, розширення Web Developer checklist повідомляє вас про це.
Щоб ви могли швидко вирішити цю проблему. Якщо ви натиснете посилання « більше інформації та допомога» у нижній частині розширення, ви знайдете більш детальний список.
07. DevTools Autosave
Автоматично зберігає зміни у вихідних файлах сторінки (CSS та JS).
Справжній скарб для всіх розробників, DevTools Autosave дозволяє автоматично зберігати будь-які зміни, внесені до CSS та JS-вихідних файлів сторінки через середовище Chrome Dev Tools . Розширення легко в налаштуванні та використанні, воно заощадить вам багато часу.
08. Instant Wireframe
Дозволяє переглядати каркас веб-сторінок.
Підключіть каркасний перегляд будь-якої веб-сторінки лише одним клацанням миші. Це розширення для Google Chrome допомагає веб-розробникам і дизайнерам переглядати веб-сторінки, локальні або опубліковані в Інтернеті, з накладенням каркасу.
09. Ripple Emulator
Ripple Emulator допомагає проводити налагодження веб-сторінок, DOM-інспекцію та автоматичне тестування.
Ripple Emulator мульти платформний емулятор мобільного середовища, який допоможе вам протестувати роботу вашого веб-додатку на різних пристрояхта дозволах екранів.
Розширення Ripple Emulator може бути використане у поєднанні з існуючими засобами розробки для налагодження, DOM-інспекції та автоматичного тестування.
10. Streak
Відстеження діалогів електронною поштою в одному тикеті, призначення завдань.
Streak є основним інструментом CRM та підтримки електронної пошти Gmail.
Розширення дозволяє об'єднати всі ваші скриньки електронної пошти в одному або організувати відстеження обміну повідомленнями в одному тикеті, призначати завдання, щоб ви могли управляти процесом спілкування з вашими контрагентами особисто або надати доступ іншим особам.
11. Search Stackoverflow
Отримайте швидкі відповіді на ваші запитання за допомогою цього обов'язкового використання розширення.
Якщо ви веб-розробник, то повинні були чути про Stack Overflow, місце, куди звертаються багато розробників з різними питаннями, пов'язаними з розвитком веб-проектів. Якщо ні, вам обов'язково потрібно познайомитися з ним. Це дійсно розвинена спільнота, яка охоплює широке коло питань: від C# і Java до PHP та JQuery.
Це фантастичне розширення додає вікно пошуку прямо у ваш браузер і дозволяє використовувати величезні ресурси Stack Overflow . Обов'язкове для використання розширення!
12. PHP Ninja Manual
Вся документація по PHP 5.5 у вашому браузері.
Це дійсно важко запам'ятати кожну функцію, тому якщо ви свого часу витратили багато годин на пошук конкретних PHP функцій через Google, це розширення обов'язково приверне вашу увагу. PHP Ninja Manual надає
Вам всю документацію по PHP 5.5 с конкретними прикладамивісьмома мовами у вашому браузері.
13. PerfectPixel
Це розширення допоможе вам забезпечити відповідність кожного пікселя вашого веб-сайту дизайну.
Дизайнери ненавидять ситуації, коли вони створюють чудовий дизайн, але в результаті після його перекладу в код щось не збігається з початковим дизайном. Процесор Perfect Pixel справді ідеальне розширення для веб-розробників, які прагнуть створювати сайти, що точно відповідають дизайну.
Це просте використання розширення дозволяє помістити поверх веб-сторінки напівпрозоре накладання зображення і виконати перевірку на збіг кожного пікселя, щоб переконатися, що відповідність 100-відсоткове.
14. Code Cola
Дозволяє редагувати CSS веб-сторінки на місці.
Мало того, що цей інструмент дозволить вам переглядати вихідний код, над яким ви працюєте, він також може працювати в якості редактора CSS. Це означає, що ви можете редагувати CSS стиль ваших веб-сторінок прямо на місці і бачити результат змін негайно.
15. Chrome Sniffer
Інспектування веб-додатків та бібліотек JavaScript.
Це розширення дозволить веб-розробникам перевіряти та визначати веб-додатки, а також бібліотеки JavaScript, підключені до конкретного проекту. Розширення працює максимально просто: в адресному рядку з'являється значок, що вказує на версію фреймворку або CMS .
16. User Agent Switcher
Перевірте, як виглядає ваш сайт на різних пристроях.
Відмінний інструмент для того, щоб подивитися, як сайт виглядає на різних видахпристроїв, таких як iPad, iPhone або Android-пристрої. Це може бути дуже корисним і в плані того, щоб побачити сайт так, як бачать його пошукові системи.
Незалежно від того, що ви чули про Google Chrome, коли мова йдепро веб-дизайн та розробку, Firefox як і раніше залишається кращим браузером з дружнім середовищем розробки, який ви можете знайти.
Чорт, Firefox навіть має спеціальну версію браузера, створеного тільки для веб-розробників. Ось наскільки сильно Mozilla піклується про веб-дизайнерів та розробників.
Firefox також має величезну колекцію розширень, які роблять браузер більш потужним для максимального ефекту. Ось деякі з кращих розширень Firefox, які ви можете використовувати, щоб полегшити життя в процесі веб-розробки.
Встановіть, протестуйте та використовуйте більшість із цих розширень. Врешті-решт, всі вони безкоштовні для використання!
- Що робить: Інспектує веб-сторінки
Firebug – це розширення, без якого веб-дизайнери та розробники просто не можуть жити. Це розширення схоже на розширену версію інтегрованої консолі розробника, яка постачається разом із Firefox. Firebug значно полегшує перевірку елементів на веб-сторінках і показує, як все працює на різних сайтах.
- Підходить: веб-розробникам
- Що робить клієнт для Firefox
FireFTP - це FTP/SFTP-клієнт для Firefox, який дозволяє вам безпечно завантажувати та передавати файли між вашим комп'ютером та сервером безпосередньо з вашого браузера. Завдяки цьому доповненню вам ніколи більше не доведеться стрибати між браузером та клієнтськими програмами FTP.
- Підходить: веб-розробникам та дизайнерам
- Що робить: аналіз та перевірка веб-сторінок
Це своєрідне розширення "все в одному", яке додає у ваш Firefox ряд корисних інструментів. Деякі інструменти, включені в цей аддон - відображення та редагування таблиць стилів CSS, відключення стилів, інструменти налагодження тощо.
- Що робить: інструмент для аналізу кольору
ColorZilla – чудовий інструмент, який інтерфейсні веб-дизайнери знайдуть дуже корисним. Цей аддон має піпетку для швидкого вибору кольору на веб-сторінці, генератор градієнта CSS, колірний аналізатор, палітри кольорів і багато іншого.
- Підходить: веб-розробникам
- Що робить: зміна веб-сайтів з кодом, що налаштовується
Улюблене більш ніж мільйоном користувачів Firefox, Greasemonkey - це розширення, яке подарує вам нескінченне задоволення. Це доповнення дозволяє налаштовувати популярні веб-сайти, редагуючи їх за допомогою власного коду JavaScript. Ви також можете отримати задоволення від скриптів, створених іншими розробниками.
- Підходить: дизайнерам інтерфейсів
- Що робить: регулює зміщення веб-елементів
Простий, але корисний плагін, який дозволяє перевіряти веб-елементи і візуально бачити, скільки пікселів відключено в елементах, створюючи композицію з прозорими шарами. Використовуючи цю композицію, ви можете налаштувати свою реальну веб-сторінку так, щоб вона відповідала накладенню для досягнення найкращого результату без здогадів.
Наприклад, якщо одне із зображень на веб-сторінці перекриває інший об'єкт, ви можете використовувати Pixel Perfect, щоб визначити, скільки пікселів потрібно налаштувати, щоб отримати це зображення в потрібному місці.
- Підходить: веб-дизайнерам
- Що робить: завантажує все з веб-сторінки
Цей плагін відповідає своїй назві, дозволяючи вам завантажувати все з веб-сторінки. За допомогою одного клацання ви можете завантажити всі зображення, посилання та інші дані, що містяться на веб-сторінці, використовуючи це розширення. Аддон також має вбудований прискорювач завантаження, який оптимізує швидкість завантаження чотири рази.
- Підходить: дизайнерам інтерфейсів
- Що робить: перевіряйте веб-сторінки в Internet Explorer
Хочете – вірте, хочете – ні, але є люди, які все ще використовують старі версії Internet Explorer для виходу до Інтернету. Створення сайтів, що добре працюють у цих старих браузерах, є однією з проблем, з якою веб-дизайнери, як і раніше, борються. Цей плагін спрощує налаштування веб-дизайну для старіших браузерів Internet Explorer, створюючи нову вкладку в IE.
- Підходить: веб-дизайнерам та розробникам
- Що робить: показує про технології, які використовуються на веб-сайті
Хочете знати, які технології використовувалися для створення ваших улюблених веб-сайтів? Тоді це доповнення вам знадобиться. BuiltWith - це розширення, яке дозволяє сканувати веб-сайти, щоб знайти які технології використовуються на сторінці. Відмінний інструмент для всіх веб-дизайнерів-початківців, щоб навчатися на прикладі готових веб-сайтів.
- Підходить: веб-розробникам
- Що робить: включає або вимикає Java
Це доповнення дозволяє легко вмикати або вимикати Java у вашому браузері. Він також може вимкнути на веб-сторінці Javascript, Cookies, анімовані зображення, Flash та інше. Це корисний плагін не тільки для розробників, але й звичайних користувачів, щоб підвищити безпеку браузера та знизити пропускну здатність.
- Підходить: дизайнерам інтерфейсів
- Що робить: Вимірює елементи в пікселях
Функція цього доповнення проста, він дозволяє вам малювати віртуальну лінійку поверх веб-сторінки або елемента на сторінці, щоб виміряти ширину, висоту або вирівняти елемент пікселів на веб-сторінці. MeasureIt стане в нагоді більшості розробників інтерфейсів для створення макетів.
- Підходить: веб-дизайнерам
- Що робить: перемикає мову у браузері
Це корисний інструмент, який миттєво перекладає ваш Firefox іншою мовою. Все у вашому браузері, включаючи користувальницький інтерфейс, словник перевірки орфографії та вміст веб-сайту, будуть перекладені обраною вами мовою. Відмінна можливість, яку ви можете використовувати для розробки багатомовних веб-сайтів.
- Підходить: дизайнерам інтерфейсів
- Що він робить: генерує фіктивний текст
Створення фіктивного тексту для ваших нових макетів і прототипів веб-сайту - це нудне завдання, яке навряд чи здатне розважити хоча б одного дизайнера. Це розширення зробить цей процес менш нудним, дозволяючи вам створювати фіктивний текст Lorem Ipsum прямо з Firefox.
- Підходить: веб-розробникам
- Що робить: редагує та створює cookie
Це доповнення не тільки керує файлами cookie вашого сайту, але й дозволяє легко редагувати та створювати нові файли. Деякі з функцій плагіна включають вбудований перегляд файлів cookie, можливість змінити домен, можливість одночасного редагування декількох файлів cookie та багато іншого.
- Підходить: дизайнерам інтерфейсів
- Що робить: вибирає кольори на веб-сторінці
Простий у використанні інструмент, який дозволяє вибирати кольори будь-якого пікселя на веб-сторінці і легко копіювати колірний код RGB або Hex для використання у ваших власних проектах. Краса та візуальний інтерфейс цього інструменту значно полегшують новачкам вивчення кольорів на веб-сторінках.
- Підходить: веб-дизайнерам та розробникам
- Що робить: дає інформацію про програмне забезпечення, що використовується веб-сайтом
Подібно до доповнення BuiltWith, Wappalyzer – це ще одне корисне розширення, яке дозволяє дізнатися, яке програмне забезпеченнявикористовується на веб-сайті. Наприклад, ви можете дізнатися, який тип CMS використовує сайт, яку операційну систему підтримує сервер веб-сайту та багато іншого.
- Підходить: веб-розробникам
- Що робить: змінює користувальницький агент браузера
Хочете дізнатися, як виглядатиме ваш сайт на різних платформах та операційних системах? Тоді це інструмент, який знадобиться вам точно знадобиться. User-Agent Switcher дозволяє перемикатися між різними платформами, такими як Android, Mac, Windows, і вибирати операційні системи для зміни користувача агента вашого браузера.
- Підходить: веб-дизайнерам та розробникам
- Що робить: показує приклад використання вкладки пам'яті браузера
Це зручне доповнення, яке допоможе вам визначити, скільки ресурсів вашого комп'ютера використовується кожною відкритою вкладкою Firefox. Ви можете використовувати цей інструмент, щоб з'ясувати, скільки ресурсів використовується вашим сайтом та оптимізувати сайт для досягнення максимальної продуктивності.
- Підходить: веб-дизайнерам та графічним дизайнерам
- Що робить: відкриває зображення у Photoshop
Це доповнення робить те, що говорить його назва, просто відкриває одним клацанням зображення, які ви знаходите на веб-сторінці з допомогою Photoshop. Не потрібно завантажувати зображення або запускати Photoshop, розширення буде робити все, що потрібно.
- Підходить: дизайнерам інтерфейсів
- Що робить: покращує таблиці HTML
Графіки, статистика, порівняння, таблиці – це доповнення може зробити все. Ви можете використовувати цей інструмент для створення зручних та красивих HTML-таблиць та схем.
- Підходить: веб-розробникам
- Що робить клієнт SSH для Firefox
Як правило, вам потрібно встановити програму для запуску SSH-терміналу. Ці програми відрізняються однією операційної системивід іншого. FireSSH, однак, працює на всіх платформах, якщо у вас є Firefox. Розширення дозволяє запускати SSH-термінал безпосередньо із браузера.
- Підходить: дизайнерам інтерфейсів
- Що робить: автоматично оновлює веб-сторінки
Одна з дратівливих речей, з якими стикаються веб-дизайнери при розробці веб-сайтів, це необхідність оновлювати веб-сторінку вручну після внесення кожної невеликої зміни до коду. Auto Refresh - це розширення, яке усуває цю проблему, дозволяючи автоматично оновлювати одну або кілька вкладок Firefox з певними вами інтервалами.
- Підходить: дизайнерам інтерфейсів
- Що робить: змінює розмір вікон Firefox для конкретних дозволів екрану
Це доповнення дозволяє змінювати розмір вікна Firefox у певних дозволах, щоб побачити, як виглядає ваш веб-сайт на різних екранах. Вам потрібно встановити Firefox Add-On Bar для того, щоб це розширення працювало належним чином.
- Підходить: веб-дизайнерам та розробникам
- Що робить: знаходить інформацію про шрифти сторінки та її елементи
Font Finder - зручний інструмент, який дозволяє вивчати елементи веб-сайту, щоб дізнатися важливу інформаціюпро шрифти, що використовуються на сторінці, таку як назва сімейства шрифтів, колір шрифту, міжрядковий інтервал, декор та багато іншого.
- Підходить: дизайнерам інтерфейсів
- Що робить: перевіряє веб-сторінки в різних браузерах
Функція цього доповнення є простою. Це дозволяє миттєво відкривати будь-яку веб-сторінку, яку ви переглядаєте у Firefox, за допомогою іншого браузера одним клацанням миші. Немає необхідності копіювати URL-адреси, відкривати кожен браузер один за одним і вставляти URL-адреси, щоб відкрити веб-сайт.
- Підходить: веб-дизайнерам та розробникам
- Що робить: очищує кеш браузера
Це доповнення миттєво очищує кеш. браузера Firefox(RAM та DISK), щоб скоротити використання ресурсів комп'ютера. Розширення дозволяє очистити кеш, просто натиснувши кнопку або натиснувши клавішу F9 на клавіатурі. Якщо ви бажаєте швидко переглянути зміни, внесені на веб-сторінку, це доповнення виявиться дуже корисним.
Зі зростанням популярності браузера Google Chrome з'являються розширення, які дозволяють заощаджувати час веб-розробників, даючи їм можливість відстежувати помилки та проблеми з продуктивністю сайту.
Ось кілька корисних розширень для Google Chrome.
Розширення Web Developer
Хочу відзначити найзручніший і найпотужніший інструмент для веб-розробника та веб-дизайнера - розширення Web Developer для Google Chrome.
Розширення додається до панелі інструментів Google Chrome у вигляді кнопочки із зображеною шестернею і містить різні інструменти для розробки та налагодження веб-сайту. Це офіційна адаптація популярного , написана тим самим розробником.
Розширення має велику кількість опцій.
Наприклад, багатьом треба просто дізнатися колір елементана екрані монітора у шістнадцятковому форматі. Для цього у плагіні є спеціальна функція. У розділі Miscellaneous вибрати пункт Display Color Picker.
Вибравши пункт Display Color Picker, курсор стає у вигляді хрестика. Тепер, клацнувши на будь-яку область екрана в правому нижньому куті браузера, відображається колір у шістнадцятковій системі для використання в CSS.
