Нюанси на разширенията на Google Chrome за разработчици. Разширения на Google Chrome за уеб разработка и др

Не е тайна, че днешните уебсайтове използват Cascading Style Sheets (CSS), за да съдържат параметрите на всички елементи на страницата. CSS определя шрифтове, размери на обекти, рамки, картини, блокове и таблици. Решихме да съставим за вас селекция от добавки за Google Chrome, които ще ви позволят да редактирате стила на всяка страница в Интернет. Като бонус ще ви покажем как да промените фона на страницата.

Всеки човек има свои собствени предпочитания и интереси, особено що се отнася до уеб дизайна. Просто помнете вечните holiwars след всяка актуализация на YouTube. Да, и вероятно имате няколко коментара относно показването на информация на любимия ви уебсайт: някъде шрифтът е грозен или малък, някъде има напълно ненужен блок за уведомяване. Тук би било хубаво да добавите фоново изображение!

Днешните браузъри ви позволяват да редактирате уебсайтове само с няколко кликвания. Потребителят може да персонализира всичко, до местоположението и реда на елементите на страницата. За тази цел бяха написани специални разширения и допълнения, които ще анализираме, преди да започнем да променяме началната страница на Google.

Stylebot

Може би най-популярното разширение с отворен код. Позволява ви да редактирате шрифтове, цветове, размери и други в движение. Има прост режим на редактиране: когато прозорецът Stylebot е отворен, можете да изберете желания елемент, като просто поставите курсора на мишката върху него. Промените се запазват незабавно, а персонализираните стилове могат да се споделят с приятели.

Web Override

Приложение за свързване на Javascript скриптове към външни уебсайтове. Вече съдържа jQuery, async.js, moment.js и Lodash, така че функциите на тези библиотеки могат да се използват свободно. Подходящо за напреднали потребители, които знаят как да използват Javascript, но начинаещите могат да използват разширението за внедряване на скриптове, които вече са написани от някой друг.

Стайлър

Принципът е същият като този на Stylebot: бързо редактираме стила на страницата, промените се запазват моментално. Интерфейсът и последователността от действия са малко по-различни, с малко по-малко възможности. Така че изборът е ваш: какво ви харесва най-много.

Стилен

Най-мощният инструмент за персонализиране на уебсайт, подобен по възможности на Stylebot. Позволява ви да скриете ненужни елементи, да редактирате стилове и да споделите резултата с приятели. Уебсайтът на добавката съдържа над 10 000 персонализирани стила за промяна на облика на Facebook, YouTube, App Store и много други популярни ресурси.

CSS редактор на живо

С натискане на клавишната комбинация се отваря малък прозорец, в който потребителят може да въведе произволен стил, който веднага ще бъде приложен към страницата (след затваряне промените се запазват). Просто и удобно: нищо излишно.

Ще ви кажем, както обещахме, как да редактирате фона на всяка страница, като използвате Stylebot като пример.

важно! Този метод изглежда красив на „леки“ страници, които не са претоварени с блокове и менюта и се представя само за да се запознаете с възможностите на добавките. Препоръчваме ви да опитате в Google.com.

• отидете на необходимата страница
• Кликнете върху иконата Stylebot в горния десен ъгъл на Chrome
• щракнете върху Отваряне на Stylebot
• в долната част изберете опцията Редактиране на CSS
• Въведете следния код:

тяло (
фон: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
размер на фона: 100% 100%;
!важно;
}

• затворете Stylebot

Готови! Вместо изображението, дадено като пример, можете да използвате всяко друго (само трябва да замените връзката в кода по-горе). За по-сложна персонализация на сайта ще трябва да прочетете ръководствата за CSS, но повярвайте ми: в това няма нищо сложно.

Има няколко версии, създадени за различни категории потребители. Един от тях се нарича Издание за разработчици на Google Chrome. Каква версия е това и защо е необходима? Това е, което ще бъде обсъдено в този материал.

Струва си да се отбележи, че алтернативните версии на Chrome се появяват отдавна. Те придружават този популярен браузър почти от стартовата версия. Но не всички потребители са подходящи за алтернативни опции.

Факт е, че „другите“ компилации на Chrome са предназначени за професионалисти в една или друга област: дизайнери на оформление, тестери, разработчици и т.н. Такива браузъри не са подходящи за обикновени потребители. И все пак трябва да говорим за тях.

Какви версии на Chrome има?

Всъщност те не са толкова много. Има обаче само един стабилен. Това е точно този, който е публично достъпен. Всеки потребител може да го изтегли. Но има и алтернативни версии. Нека ги разгледаме по-отблизо.

Това са версиите на любимия на всички Google Chrome, които съществуват. В този контекст обаче ние се интересуваме от изданието за разработчици. Затова трябва да разгледаме по-подробно всички ключови характеристики на тази версия. Едва тогава може да се направи заключение.

Функции на изданието за разработчици

Ключова характеристика на тази версия на Google Chrome е наличието на инструменти за разработка. Те ще бъдат полезни за тези, които разработват разширения и добавки за този уеб браузър. Средният потребител ще се изгуби в такива инструменти.

Втората функция е усъвършенстваната конзола. Използва се за редактиране на код и активиране на скрити функции на браузъра. Трябва обаче да знаете как да работите с него. И най-малката грешка в екипа може да доведе до много тежки последствия.

Друг „трик“ е наличието на всички най-нови иновации, които мигрираха към тази версия от Canary. Благодарение на това разработчиците могат да оптимизират своите разширения за нови възможности на уеб браузъра.

Чести актуализации– друга отличителна черта на изданието за разработчици. Идват нередовно, но не по-късно от веднъж на две седмици. В някои случаи актуализациите може да пристигнат в рамките на два дни. Това е удобно за тези, които тестват нови функции на уеб браузъра.

Заключение

И така, по-горе говорихме какви версии на Google Chrome има и обсъдихме подробно компилацията за разработчици. Сега е ясно, че тази версия се отличава с набор от инструменти и усъвършенствана конзола.

Струва си да се отбележи, че обикновените потребители изобщо не трябва да инсталират изданието за разработчици. Няма да има смисъл от това. Освен това този монтаж не е особено стабилен. Ако не сте разработчик, тогава е по-добре да използвате Stable.

С нарастващата популярност на браузъра Google Chrome се появяват разширения, които спестяват време на уеб разработчиците, като им дават възможност да проследяват грешки и проблеми с производителността на сайта.

Ето някои полезни разширения за Google Chrome.

Разширение за уеб програмист

Бих искал да отбележа най-удобния и мощен инструмент за уеб разработчик и уеб дизайнер - Разширение за уеб разработчици за Google Chrome.

Разширението се добавя към лентата с инструменти на Google Chrome под формата на бутон с икона на зъбно колело и съдържа различни инструменти за разработване и отстраняване на грешки в уебсайт. Това е официална адаптация на популярната, написана от същия разработчик.

Разширението има голям брой опции.

Например, много хора просто се нуждаят разберете цвета на елементана екрана на монитора в шестнадесетичен формат. Плъгинът има специална функция за това. В секцията Разни изберете Избор на цвят за показване.

Като изберете Display Color Picker, курсорът става кръст. Сега, щракването върху произволна област на екрана в долния десен ъгъл на браузъра показва цвета в шестнадесетичен за използване в CSS.

Добър ден скъпи приятели.

Продължавайки едноседмичния маратон от прегледи на полезни инструменти, не мога да не спомена най-добрите разширения за уеб дизайнери и уеб програмисти за най-добрия интернет браузър Google Chrome. Защо смятам, че е най-добрият? Защото е модерен, бърз и най-сигурен, а също така го харесвам заради неговия минимализъм. Но днес не става въпрос за това. И така преминаваме към пълната версия на статията.

Преглед на най-добрите разширения за Google Chrome

Днес много потребители разработват разширения. Има просто огромен брой от тях и всеки път те стават не само по-мощни и функционални, но и значително ни помагат да увеличим нашата производителност. Ще напиша поредица от статии за най-добрите разширения за Google Chrome. За днес ще се съсредоточа върху разширения, които са лесни за инсталиране и полезни за уеб дизайнери и разработчици ChromeЩе бъде полезно и за вас, скъпи читатели.

Най-добрите разширения Google Chromeза уеб дизайнери и разработчици:

Позволява ви много лесно да определите кои шрифтове се използват на страниците.

Описание:

С това разширение можете да определите кои уеб шрифтове се използват на сайта. Много е просто и бързо. Подпори за разширение Typekitи Google Font API.

Фантастично лека линийка за подравняване и измерване на елементи и блокове на уебсайтове.

Описание:

Получавайте лесно размери: с хоризонтална и вертикална линийка за плъзгане, пиксели, пикове и типове измервания. Можете да използвате до 4 линийки едновременно с различни цветове и видове: дървени и стоманени.

„Всеки уеб дизайнер трябва да има това разширение за Chrome със себе си.“

Заснемане на екрана (от Google)

Бързо заснемане на видимото съдържание на раздел, област от уеб страница или цяла страница. Запазване в PNG формат. Поддържа вертикално и хоризонтално превъртане.

Описание:

Това е много лесно за използване разширение за заснемане на изображения от екрани на монитори. Можете да заснемете изображение от активния раздел, област от страница или цяла страница като PNG изображение.

Показва всички свързани изображения на сайта и ви позволява да ги изтеглите.

Описание:

Ако трябва да изтегляте от уеб страници, с това разширение можете лесно: да преглеждате изображения, да сортирате по URL. Можете да изтеглите подходящите изображения, като ги маркирате с отметки или като щракнете върху изображенията, след което те ще се отворят в нов раздел. Настройки за ширина на дисплея, размер на рамката, стил и цвят, скриване на филтри, бутони и известия - всичко, от което се нуждаете, може да бъде персонализирано!

RescueTime е отлично аналитично разширение, което ще ви помогне да разберете как прекарвате времето си.

Описание:

RescueTime е персонална аналитична услуга, която ще ви помогне да разберете как прекарвате времето си на вашия компютър, смартфон или таблет. Не се изисква ръчно въвеждане на данни от вас. Уеб приложението взаимодейства с инсталирания клиент и работи на устройства с OS X, Windows, Linux и ChromeOS.

Pinterest за Google Chrome

Откривайте, събирайте и споделяйте вдъхновение

Описание:

Pinterest е услуга за намиране на вдъхновение и споделянето му с други дизайнери и разработчици. Използвайте го, за да съберете колекция от неща, които ви вдъхновяват, да организирате и планирате проектите си.

Официалното разширение на Pinterest за Google Chrome ще добави бутон към вашия браузър, който ви позволява да взаимодействате с услугата. Бързо и лесно!

Добавя бутон в лентата с инструменти с различни инструменти за уеб разработчици към браузъра. Това е официалният порт на разширението, за което първоначално е писано Firefox.

Адаптиране на външния вид на сайта.

Описание:

Позволява ви бързо да промените външния вид на всеки уебсайт (използвайки персонализиран CSS).

В редактора избирате всички промени, които искате да направите в елемента. Можете също да промените размера на шрифта, цвета и много други. Опитните потребители могат да напишат своите CSS таблици ръчно.

Използвайки Stylebot, можете да персонализирате външния вид на любимите си уебсайтове. Освен това е отличен инструмент за изучаване на CSS и за отстраняване на грешки в дизайна на вашите собствени проекти.

Официалното разширение Alexa Traffic за анализ на страницата и трафика от страници.

Описание:

Alexa Traffic Rank е официално безплатно разширение за Chrome. Можете да видите пълна информация за всеки сайт в Интернет. Сравнете и анализирайте лесно и просто.

Разширение за браузър, което ви позволява да изберете и видите цветен код от всяка страница.

Описание:

С помощта на инструмента за пипетка можете да видите цветовия код от всеки уебсайт. Има вградена история на вашите измервания. Работи както в Chrome, така и в Chromium.

Разширение за разработчици за тестване на уеб страници при различни резолюции на екрана.

Описание:

Разширение за разработчици за тестване на уеб страници при различни разделителни способности на екрана, с възможност да определят свои собствени настройки за резолюция.

Разделителната способност преоразмерява прозореца на браузъра ви, за да видите уебсайтовете си в различни разделителни способности на екрана. Има списък с най-често използваните разделителни способности на екрана и възможност за персонализиране на този списък.

Speed ​​​​Tracer (от Google)

Получете представа за скоростта на уебсайта с това разширение.

Описание:

Проследяване на скоросттаТова е страхотен инструмент, предназначен да ви помогне да идентифицирате и коригирате проблеми с производителността във вашите уеб приложения. Той събира информация и прави анализ на индикатори, които се вземат на ниско ниво на вашия браузър.

Използването на това разширение ще ви позволи да получавате информация за това къде се губи най-много време във вашето приложение. Това може да са проблеми, причинени от: Javascript, css, обработка на събития на Dom, зареждане на мрежови ресурси, обратно извикване на XMLHttpRequest, големи изображения и др.

Firebug Lite за Google Chrome

Firebug Lite за Google Chrome е официално разширение от работната група на Firebug.

Описание:

Firebug Lite не е заместител на Firebug или Google Developer Tools. Това е разширение, което ще работи добре с тези инструменти, осигурява богатото визуално представяне, което сме свикнали да виждаме във Firebug, когато става дума за HTML елементи, DOM елементи и засенчване на Box Model. Той също така предоставя някои интересни функции като проверка на HTML елементи с мишката и редактиране на живо на CSS свойства.

Корпоративен Ipsum

Генериране на произволен текст за запълване на оформления.

Описание:

Генератор на lorem ipsum с корпоративен привкус. Създава пълнител по съдържание или абзац.

Това е клонинг (с разрешение) на корпоративния Ipsum от Brian Haslanger.

Заключение:

В тази статия описах първия 15 разширенияЗа Google Chrome, които използвам в ежедневната си работа. Надявам се една двойка да е полезна и за вас. Ще се радвам да чуя за разширения в коментарите. които използвате, скъпи приятели! Казвам се Виктор Доценко. всичко добро!

Тази статия е предназначена за администратори и разработчици на Chrome Enterprise с опит в изграждането и публикуването на пакети с приложения за Chrome.

Ако уеб магазинът на Chrome няма продукт с функционалността, от която се нуждаете, можете да създадете свое собствено приложение или разширение и потребителите да го добавят към своите устройства с Chrome OS или браузър Chrome. Например, като администратор можете автоматично да инсталирате частно приложение за отметки на устройствата на потребителите, което се свързва с уебсайта на HR.

Подготовка

• Ако файлът на манифеста посочва целевия сайт, който приложението или разширението препраща, проверете собствеността върху този сайт.
• Ако вашето приложение или разширение се хоства на частен сървър, можете да контролирате кой има разрешение да го публикува в уеб магазина на Chrome. Можете да деактивирате проверката на собствеността за сайтове на трети страни, към които приложението препраща.

Стъпка 1: Създайте приложение или разширение

По-долу използваме приложение за отметки като пример. За инструкции относно създаването на по-сложни приложения и разширения за Chrome вижте началното ръководство.

1. Създайте папка на вашия компютър, където ще се съхраняват файловете на приложението или разширението. Дайте му име на приложение.
2. Създайте манифестен файл.
   1. Създайте JavaScript ® Object Notation (JSON) файл в текстов редактор. Вижте примерен JSON файл за приложение за отметки.
   2. Проверете дали кодът в JSON файла е форматиран правилно с помощта на инструмент като JSONLint.
3. Поставете файла manifest.jsonкъм папката на приложението или разширението.
4. Създайте лого.
   1. Изображението трябва да е с размер 128 x 128 пиксела.
   2. Запазете файла с логото като 128.pngв папката на приложението.

Стъпка 2: Тествайте приложението или разширението

Разработчиците могат да тестват своите приложения и разширения в браузъра Chrome или на устройства с Chrome OS.

За отстраняване на неизправности с приложение или разширение използвайте регистрационни файлове на Chrome.

Стъпка 3: Създайте колекция от приложения (по избор)

Администраторът може да създаде галерия с приложения за организация, за да препоръча приложения и разширения на Chrome, които потребителите да инсталират.

Стъпка 4: Публикувайте вашето приложение или разширение в уеб магазина на Chrome

Разработчикът може да направи приложение или разширение публично достъпно или да ограничи достъпа до него. Когато публикувате в уеб магазина на Chrome, имате три опции за избор.

• Обществен: Всеки може да намери и инсталира приложението.
• Достъп чрез връзка: Можете да инсталирате приложение или разширение само чрез връзка. Не е включен в резултатите от търсенето в уеб магазина на Chrome. Можете да изпратите връзката до потребители както в домейна на вашата организация, така и извън него.
• Частно: Само потребители във вашия домейн могат да намерят и инсталират приложението или разширението. Освен това можете да ограничите достъпа до продукта само до доверени тестери, чиито имена са посочени в лентата с инструменти за програмисти.

За да добавите приложение или разширение към уеб магазина на Chrome, създайте ZIP архив на съответната папка и след това публикувайте продукта.

Стъпка 5. Настройте правила за работа с приложението или разширението

Административният панел на Google ви позволява да управлявате как използвате приложения и разширения на устройства с Chrome и браузъра Chrome на компютри с Windows, Mac и Linux във вашата организация. Правилата на Chrome могат да бъдат персонализирани