Pendule - Neat Chrome Plugin pentru un dezvoltator de web

Fac un pic de dezvoltare web, iar Google Chrome este browserul meu principal în aceste zile. Chrome este destul de ușor de dezvoltat, așa cum este, și puteți configura Firebug pe Chrome Cum să instalați Firebug pe IE, Safari, Chrome & Opera Cum să instalați Firebug pe IE, Safari, Chrome & Opera Citiți mai multe. Dar astăzi am vrut să vă arăt o altă extensie Chrome numită Pendule. Pendule suplimentează caracteristica încorporată Inspect Element a Chrome cu câteva extra interesante.

Meniul Pendule

Bara de instrumente a butonului Pendule afișează un meniu cu aspect înalt, împărțit în șase domenii principale. În primul rând, Foi de stil secțiune. Vizualizați CSS opțiunea poate părea redundantă - la urma urmei, Chrome deja ne permite să vizualizăm CSS ... sau nu?

Multe site-uri folosesc CSS comprimat, unele comprimându-l până la punctul de neîncadrare. Dacă sunteți singurul dezvoltator Web de pe site-ul dvs., este posibil să vă decideți cât de mult doriți să comprimați CSS. Pentru mine, nu există noroc. Unul dintre site-urile pe care le lucrez comprimă CSS folosind un instrument PHP numit Minify, așa că inspectarea CSS-ului cu ajutorul instrumentelor încorporate din Chrome arată astfel:

Nu este exact cel mai ușor de citit format imaginabil. Cu Pendule, pot să înfrumusețez ușor CSS de partea mea. Doar faceți clic pe butonul Pendule și faceți clic pe Vizualizați CSS. Apoi primesc ceva de genul:

Încă nu este ușor de citit. Faceți clic pe butonul Îndrăgostiți CSS buton și urmăriți magia se întâmplă:

Acum noi vorbim! În timp ce nu puteți schimba nimic în vizualizarea CSS, aceasta este o mare îmbunătățire atunci când este vorba despre CSS comprimat.

Manipularea imaginilor

Pendule oferă, de asemenea, câteva utilități interesante legate de imagine:

“Vizualizați informațiile despre imagini” te duce la o pagină Web complet nouă, care conține toate imaginile de pe pagina curentă, fiecare cu o serie de informații conexe:

Acest lucru este util pentru că vă permite să parcurgeți toate imaginile unul câte unul și să le verificați individual. De exemplu, unele site-uri difuzează conținut de pe un server și imagini similare de pe alt server (pentru a face lucrurile mai repede). Cu această vizualizare, puteți vedea exact de unde provin fiecare imagine și puteți urmări cu ușurință pe cele care nu sunt servite de la sursa potrivită.

De asemenea, puteți citi textul Alt pentru fiecare imagine, care poate fi cheia ofertelor SEO. Cu toate acestea, dacă sunteți interesat doar de textul Alt, Pendule vă permite să vă controlați cu ușurință pagina respectivă, folosind “Afișați alt text” opțiune. Când este activată, imaginile de pe pagina dvs. ar arăta astfel:

Acest lucru se întâmplă să fie dintr-un post minunat, intitulat "3 semne", "Apple is Displacing Microsoft pentru a deveni imperiul rău, dar punctul aici este micul “alt =” fragment de deasupra imaginii. Arată ca o sugestie, dar nu trebuie să hover mouse-ul peste ea pentru a face să se arate. Cu “Afișați alt text”, puteți să parcurgeți pagina web și să vedeți exact ce imagini lipsesc sau care sunt incorecte.

Diverse Utilități

Meniul Pendule Miscellaneous Utilities conține câteva bunuri interesante. Vizualizați JavaScript produse o singură pagină Web divizată în secțiuni, o secțiune pentru fiecare script pe care pagina conține. La fel ca “Vizualizați CSS” cu care am pornit, Vizualizați JavaScript vă permite să înfrumusețați codul pentru al face ușor de citit. JavaScript este aproape întotdeauna comprimat (chiar mai mult decât CSS), deci aceasta este o opțiune foarte utilă dacă vă place să citiți codul pentru a afla cum funcționează lucrurile.

“Afișați rigla” opțiunea diminuează pagina și o suprapune cu un cadru redimensionabil, draggable, cu o mică etichetă care își arată dimensiunile la un moment dat. Acest lucru este foarte util pentru a verifica dacă elementele sunt aliniate corect, de exemplu.

Explorați mai multe despre: Google Chrome, Web Design, Dezvoltare Web, Instrumente pentru webmasteri.