реклама

Аз правя доста уеб разработка и Google Chrome е основният ми браузър в наши дни. Chrome е доста приятелски настроен за разработчици, както и можете да настроите Firebug на Chrome Как да инсталирате Firebug в IE, Safari, Chrome и Opera Прочетете още . Но днес исках да ви покажа различно разширение за Chrome, наречено Pendule. Махалото допълва вградената функция за проверка на Chrome с някои интересни екстри.

Менюто на махалото

хромирани приставки за уеб разработки

Бутонът на лентата с инструменти на махалото изскача гладко изглеждащо меню, разделено на шест основни области. Първо горе Таблици за стилове секция. Най- Вижте CSS вариант може да изглежда излишен - в края на краищата, Chrome вече ни позволява да гледаме CSS... или го прави?

Много уебсайтове използват компресиран CSS, като някои го компресират до степен на нечетливост. Ако сте единственият уеб програмист на вашия сайт, може да можете сами да решите колко искате да компресирате CSS. За мен няма такъв късмет. Един от уебсайтовете, за които работя, компресира CSS с помощта на PHP инструмент, наречен

instagram viewer
омаловажавам, така че инспектирането на CSS с вградените инструменти на Chrome показва нещо подобно:

хромирани инструменти за уеб разработка

Не е най-четим формат, който може да се представи. С Pendule мога лесно да разкрася CSS от моя страна. Просто натискам бутона Pendule и щраквам Вижте CSS. Тогава получавам нещо подобно:

хромирани инструменти за уеб разработка

Все още не е много четим. Но щракнете върху Разкрасете CSS бутон и гледайте как се случва магията:

хромирани инструменти за уеб разработка

Сега говорим! Въпреки че не можете да промените нищо в CSS изгледа, това е голямо подобрение, когато става въпрос за компресиран CSS.

Работа с изображения

Pendule предлага и някои интересни програми, свързани с изображения:

хромирана уеб разработка

Преглеждайте информация за изображенията“Ще ви отведе до напълно нова уеб страница, съдържаща всички изображения от текущата страница, всяка с множество информация:

хромирана уеб разработка

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

Можете също да прочетете Alt текста за всяко изображение, което може да бъде ключово за SEO оферти. Ако обаче просто се интересувате от Alt текста, Pendule ви позволява лесно да одитирате този сайт, използвайки „Показване на alt текст”. Когато сте активирани, изображенията на вашата страница изглеждат така:

хромирана уеб разработка

Това се случва от прекрасна публикация, озаглавена 3 знака Apple премества Microsoft да стане империята на злото, но смисълът тук е малкият фрагмент „alt =“ над изображението. Изглежда като подсказка, но не е нужно да задържите курсора на мишката върху нея, за да я покаже. С „Показване на alt текст“, Можете просто да превъртите през уеб страницата си и да видите точно какви изображения липсват или неправилни Alts.

Разни комунални услуги

изображение

Менюто на Разни други помощни програми на Pendule събира няколко интересни вкусотии. Най- Преглед на JavaScript продукти една единична уеб страница, разделена на секции, по един раздел за всеки скрипт, който текущата страница съдържа. Много като „Вижте CSS”Опция, с която започнахме, Преглед на JavaScript ви позволява да разкрасите кода, за да го направите четим. JavaScript почти винаги се компресира (дори повече от CSS), така че това е много удобна опция, ако обичате да четете код, за да разберете как работят нещата.

The „Показване на владетел”Опцията затъмнява страницата и я наслагва с преместваща се плъзгаща се рамка с малко етикет, който показва нейните размери във всеки даден момент. Това е много удобно за проверка, за да се види дали елементите са правилно подравнени, например.

хромирани приставки за уеб разработки