Glavni / Savjet

Kako secirati tuđe web stranice

Ricardo Quintas objašnjava kako ući u okrilje ostalih web stranica

Pokušaj razumijevanja izrade web stranice često je zastrašujući zadatak. Napokon, gledate krajnji proizvod: ugrađenu verziju. Imate posla s minificiranim i povezanim kodom koji se dinamički učitava ovisno o određenom agentu ili uređaju koji koristite, što nije lako shvatiti.

Izradite vlastitu web stranicu s ovim sjajnim vodičima za WordPress

Štoviše, preopterećeni ste tisućama redaka (ponekad nepotrebnih) koda, neke je stvorio programer, a neke generiraju automatski. To vam otežava život ako želite analizirati određeni tehnički aspekt stranice i iz nje učiti.

Pa je li moguće izvršiti obrnuti inženjering web stranice? I ako da, postoji li način da se olakša ovaj postupak seciranja? Srećom, odgovor na prvo pitanje je: da. Što se tiče drugog ... pa, tu dolazi ovaj članak.

Pokupit ćemo web stranicu i pogledati ispod haube kako bismo pokušali razumjeti što se događa i koje se tehnologije koriste. Ideja ovdje nije kopirati kôd, već analizirati unutarnji rad web stranice kako biste iz nje mogli učiti i nadamo se da ćete postati bolji programer.

U svrhu ovog članka odlučio sam se usredotočiti na Foodsense , jer je to relativno jednostavno mjesto. Jednom kada savladate alate i tehnike ovdje izložene, možete ih primijeniti na bilo koju vrstu web mjesta, bez obzira na to koliko je složeno.

01. Odmotajte strukturu

Primamljivo je skočiti izravno u kôd, ali prije nego što to učinimo, pokušajmo razumjeti cjelokupnu strukturu stranice i kako se ona općenito ponaša. Tijekom ovog postupka često koristim Chrome jer ima mnoštvo korisnih proširenja.

Da biste bolje razumjeli strukturu web stranice, preporučujem proširenje za Chrome pod nazivom Instant Wireframe . To vam daje rentgenski prikaz web stranice i vrlo je korisno ako želite razumjeti koje se vrste responzivnih trikova odvijaju kada mijenjate veličinu prozora preglednika.

Ali s načinom rada uređaja možemo ići i dublje od toga. Samo otvorite DevTools i kliknite malu ikonu Prebaci način rada uređaja. Ovo vam točno pokazuje gdje su točke prijeloma. Ako veličinom web mjesta smanjite pomoću ovog alata, možete potvrditi da ima točke prekida na približno 475px, 775px, 975px i 1.175px.

Instant Wireframe pruža vam rentgenski prikaz web mjesta

Naravno, web stranicu provjeravamo samo putem Chromea koji radi na radnoj površini. Kako bismo mogli provjeriti hoće li se ponašati drugačije ako ga pokrećemo u drugom pregledniku ili na drugom uređaju?

I ovdje vam Chrome može pomoći: samo uđite u način rada uređaja i s padajućeg izbornika na vrhu zaslona odaberite određeni uređaj. Nakon toga, sve što trebate učiniti je osvježiti stranicu - pokušajte s web mjestima kao što su Twitter ili LinkedIn i vidjet ćete na što mislim. Korištenjem ovih alata možete potvrditi imate li posla s jednostavnim responzivnim web mjestom ili imate nešto malo složenije.

Konačno, kada mijenjate veličinu web stranice, možete i puno naučiti o responzivnim slikama. Na primjer, ako posjetite akqa.com/services i promijenite veličinu preglednika, vidjet ćete kako se slike mijenjaju, ovisno o prekidnim točkama web mjesta.

02. Odmotajte kod

Već smo puno naučili, ali još nismo pogledali kod. Ako lokalno spremite stranicu na svoj stroj, vidjet ćete da se CSS i JavaScript kôd često komprimiraju, što otežava razumijevanje. Možete koristiti mrežne alate poput Umanjivanje da ga umanji.

Ako za uređivanje koda koristite Sublime Text, postoje i lijepi dodaci koji će vam pomoći. Za CSS koristim CSS Unminifier , a također koristim Umanjiti za umanjenje ili uljepšavanje CSS i JavaScript koda.

CSS Unminifier radi upravo ono što kaže

Imajte na umu da se na mnogim web lokacijama izvori umanjuju u jednu datoteku, pa čak i kad unminificirate kôd, on će i dalje postojati u jednoj datoteci. Možete pokušati ručno odvojiti različite dijelove koda ili vam može pomoći sljedeći alat.

03. Otkrijte stog

Što ako trebamo otkriti koji je stog korišten za izradu web stranice? Za to postoji vrlo korisno proširenje za Chrome pod nazivom Wappalyzer . Vraća sažetak tehnologija korištenih za izgradnju web mjesta.

Na primjer, znam da Foodsense koristi jQuery 1.6.1, Google Analytics, fontove Typekit, web poslužitelj Apache, ExpressionEngine (CMS), PHP okvir CodeIgniter - i, naravno, sam PHP. Wappalyzer nam govori puno, ali ne sve.

Provjera kartice Izvori u Chrome DevTools pruža još više informacija. Na primjer, Foodsense koristi dodatak jQuery Cycle za glavni vrtuljak slike.

Uklonite neželjeni CSS pomoću CSS Remove and Combine

Još jedan problem s kojim se često susrećete kada gledate izvorni kod web stranice jest taj da ga ima previše da bi ga se lako razumjelo. Na primjer, puno web mjesta koristi okvire poput Bootstrapa, ali tada koristi samo 10% koda okvira.

Pokušajte ukloniti nekorišteni kod UnCSS ili proširenje za Chrome Ukloni i kombiniraj CSS ukloniti i kombinirati. Oboje mogu očistiti nepotrebni CSS, olakšavajući vam istragu o tipu trikova stilskog lista koji se primjenjuju na određenu stranicu.

Isprobajte sami

Razumijevanje načina rada web mjesta je i tehnika i umjetnost. Kada analizirate web mjesto, uvijek je bolje usredotočiti se na određeni element ili widget i pokušati shvatiti kako to funkcionira, nego pokušati apsorbirati cijelu web lokaciju odjednom.

Uprljajte ruke i poigrajte se