Oglas

Delam kar nekaj spletnega razvoja in Google Chrome je moj glavni brskalnik v teh dneh. Chrome je dokaj prijazen do razvijalcev, prav tako ga lahko nastavite Firebug v Chromu Kako namestiti Firebug v IE, Safari, Chrome in Opera Preberi več . Ampak danes sem vam želel pokazati drugačno razširitev za Chrome, imenovano Pendule. Nihalo ima vgrajeno Chromovo funkcijo Inspect Element z nekaj zanimivimi dodatki.

Meni nihala

krom vtičniki za razvoj spleta

Gumb v orodni vrstici nihala prikaže gladek meni, razdeljen na šest glavnih področij. Najprej gor Tabele sloga odsek. The Oglejte si CSS možnost se morda zdi odveč - navsezadnje nam Chrome že omogoča ogled CSS… ali pač?

Mnoga spletna mesta uporabljajo stisnjen CSS, z nekaterimi pa ga stisnejo do točke nečitljivosti. Če ste edini spletni razvijalec na svojem spletnem mestu, se boste morda sami odločili, koliko želite stisniti CSS. Zame takšne sreče ni. Eno od spletnih mest, za katerega delam, stisne CSS z orodjem PHP, imenovanim Zmanjšajte, zato pregled CSS-ja z vgrajenimi orodji za Chrome kaže takole:

instagram viewer
krom orodja za razvoj spletnih strani

Ni ravno najbolj berljiv format, ki ga je mogoče zamisliti. S Pendulejem lahko enostavno polepšam CSS na svoji strani. Samo kliknem gumb Pendule in kliknem Oglejte si CSS. Nato dobim nekaj takega:

krom orodja za razvoj spletnih strani

Še vedno ni zelo berljiv. Toda kliknite na Polepšajte CSS gumb in opazujte, kako se čarovnija dogaja:

krom orodja za razvoj spletnih strani

Zdaj govorimo! Čeprav v pogledu CSS ne morete ničesar spremeniti, je to velik napredek, ko gre za stisnjen CSS.

Ravnanje s slikami

Pendule ponuja tudi nekaj zanimivih pripomočkov, povezanih s sliko:

kromov spletni razvoj

Oglejte si informacije o slikah"Vas popelje na popolnoma novo spletno stran, ki vsebuje vse slike s trenutne strani, od katerih ima vsaka povezane podatke:

kromov spletni razvoj

To je priročno, saj vam omogoča, da se pomikate po vseh slikah in jih posamično pregledujete. Na primer, nekatera spletna mesta strežejo vsebino z enega strežnika in s tem povezane slike iz drugega strežnika (za pospešitev stvari). S tem pogledom lahko natančno vidite, od kod prihaja vsaka slika, in preprosto izsledite tiste, ki niso prikazane iz pravega vira.

Prav tako lahko preberete besedilo Alt za vsako sliko, ki je lahko ključno za SEO ponudbe. Če pa vas samo besedilo Alt zanima, vam Pendule omogoča enostavno pregledovanje tega spletnega mesta z uporabo gumba »Prikaži alt besediloMožnost. Ko je omogočeno, so slike na vaši strani videti tako:

kromov spletni razvoj

Ta zgodba je iz ljubke objave z naslovom 3 znaki Apple namešča Microsoft, da bi postal cesarstvo zla, toda bistvo tukaj je mali delček "alt =" nad sliko. Videti je kot orodje, vendar vam ni treba kazati miške nad njim, da se prikaže. Z „Prikaži alt besedilo", Lahko preprosto brskate po svoji spletni strani in natančno vidite, katere slike manjkajo ali so napačne Alts.

Razni pripomočki

slika

Meni Pendule's Miscellaneous Utilities vsebuje nekaj zanimivih dobrot. The Oglejte si JavaScript izdelkov eno samo spletno stran, razdeljeno na razdelke, en odsek za vsak skript, ki ga vsebuje trenutna stran. Tako kot "Oglejte si CSS"Možnost, s katero smo začeli, Oglejte si JavaScript vam omogoča, da si olepšate kodo, da bo berljiva. JavaScript je skoraj vedno stisnjen (še bolj kot CSS), zato je to zelo priročna možnost, če želite brati kodo, da ugotovite, kako stvari delujejo.

The „Ravnilo zaslona"Možnost zatemni stran in jo prekriva s spremenljivim, vlečnim okvirjem z majhno nalepko, ki v vsakem trenutku prikazuje njegove dimenzije. To je zelo priročno za preverjanje, ali so na primer pravilno poravnani elementi.

krom vtičniki za razvoj spleta