Publicitate
Fac destul de multă dezvoltare web, iar Google Chrome este principalul meu browser în aceste zile. Chrome este destul de prietenos pentru dezvoltatori, așa cum este și puteți configura, de asemenea Firebug pe Chrome Cum se instalează Firebug pe IE, Safari, Chrome și Opera Citeste mai mult . Dar astăzi am vrut să vă arăt o altă extensie Chrome numită Pendule. Pendule completează funcția de inspecție încorporată a elementului Chrome cu câteva elemente interesante.
Meniul Pendule
Butonul pentru bara de instrumente Pendule apare un meniu cu aspect, împărțit în șase zone principale. În primul rând, Foi de stil secțiune. Vizualizați CSS opțiunea poate părea redundantă - până la urmă, Chrome deja ne permite să vedem CSS... sau nu?
Multe site-uri web folosesc CSS comprimate, cu unele comprimându-l până la ilizibilitate. Dacă sunteți singurul dezvoltator web de pe site-ul dvs., puteți decide dacă doriți să comprimați CSS. Pentru mine, nu există un asemenea noroc. Unul dintre site-urile web pentru care lucrează comprimă CSS folosind un instrument PHP numit
Comprimați, astfel încât inspecția CSS cu instrumentele încorporate Chrome arată așa ceva:
Nu tocmai cel mai citit format imaginabil. Cu Pendule, pot înfrumuseța ușor CSS de partea mea. Doar dați clic pe butonul Pendule și faceți clic Vizualizați CSS. Obțin ceva de genul:
Încă nu se poate citi. Dar faceți clic pe butonul Înfrumusețează CSS buton și urmăriți magia să se întâmple:
Acum noi vorbim! Deși nu puteți modifica nimic în vizualizarea CSS, aceasta este o îmbunătățire importantă atunci când vine vorba de CSS comprimat.
Manevrarea imaginilor
De asemenea, Pendule oferă câteva utilități interesante legate de imagine:
“Vizualizați informații despre imagini”Vă duce la o pagină web complet nouă care conține toate imaginile din pagina curentă, fiecare cu o serie de informații conexe:
Acest lucru este util, deoarece vă permite să derulați toate imaginile una câte una și să le auditați individual. De exemplu, unele site-uri web servesc conținut de la un server și imagini conexe de pe alt server (pentru a face lucrurile mai repede). Cu această vizualizare, puteți vedea exact de unde provine fiecare imagine și le puteți urmări cu ușurință pe cele care nu sunt difuzate din sursa potrivită.
Puteți citi și textul Alt pentru fiecare imagine, care poate fi cheia pentru ofertele SEO. Cu toate acestea, dacă sunteți interesat doar de textul Alt, Pendule vă permite să verificați cu ușurință pagina respectivă, folosind „Afișați text alt" opțiune. Când sunt activate, imaginile de pe pagina dvs. arată astfel:
Acesta se întâmplă să fie dintr-o postare minunată, intitulată 3 semne Apple este înlocuirea Microsoft pentru a deveni imperiul malefic, dar ideea de aici este micul fragment „alt =” de deasupra imaginii. Arată ca o foaie de instrumente, dar nu trebuie să plasați mouse-ul peste el pentru a-l afișa. Cu "Afișați text alt”, Puteți doar să parcurgeți pagina web și să vedeți exact ce imagini au lipsă sau Alte incorecte.
Utilități diverse
Meniul de utilități diverse al lui Pendule conține câteva bunătăți interesante. Vizualizați JavaScript produce o singură pagină web împărțită în secțiuni, o secțiune pentru fiecare script conține pagina curentă. Asemenea „Vizualizați CSSOpțiunea cu care am început, Vizualizați JavaScript vă permite să înfrumusețați codul pentru a-l face citit. JavaScript este aproape întotdeauna comprimat (chiar mai mult decât CSS), deci este o opțiune foarte utilă dacă doriți să citiți codul pentru a vă da seama cum funcționează lucrurile.
„Regla afișajului”Opțiunea întunecă pagina și o suprapune cu un cadru care poate fi redimensionat și glisabil cu o mică etichetă care arată dimensiunile sale în orice moment. Acest lucru este foarte util pentru a verifica dacă elementele sunt aliniate corect, de exemplu.
