Slik optimaliserer du et nettsted ved hjelp av Firebug -pluginet

Firebug er en Firefox -plugin eller -utvidelse opprettet for å kunne teste kode og utføre optimaliseringer når du programmerer et nettsted. Det er et sett med verktøy som du kan analysere lastehastigheten til de forskjellige elementene som utgjør nettet, strukturen på nettet. rediger, finn feil, feilsøk kildekoden og se hvordan koden fungerer CSS, HTML eller JavaScriptVi kan også redigere eller endre ethvert aspekt, og det vil forhåndsvises umiddelbart.

Firebug er et utmerket supplement til å følge en annen plugin som Webutvikler. Grensesnittet er enkelt å bruke og aktiveres bare når vi trenger det, og det er også gratis. Hensikten med denne opplæringen er å vise en detaljert og profesjonell bruk av Firebug, kan vi også se andre opplæringsprogrammer Firebug Web Developer Tool og Inspisere HTML med Firebug.
Firebug Det er et viktig verktøy for de som programmerer eller optimaliserer nettsteder, enten de er designere eller nettredaktører. Så vi kan eliminere programmerings- eller designfeil, vite hvordan de fungerer og hvordan strukturen på en webside er, hvordan alle elementene som komponerer den.
Vi installerer Firebug -pluginet
For å installere pluginet går vi til firebug -nedlastingsnettstedet, og der ser vi etter den nyeste versjonen av verktøyet for nedlasting.

Etter installering starter vi datamaskinen på nytt, og vi vil se at den blir lagt til når du starter et web, for å aktivere den høyreklikker vi og ser etter alternativet Inspisér element:

Når vi har aktivert verktøyet, la oss se de viktigste funksjonene:

Konsollfanen

Konsoll Firebug Det er der meldingene om hva nettet gjør og feilene som oppstår vil bli vist. Vi kan se meldinger om anrop til funksjoner eller sider som nettet foretar når vi samhandler, og viser oss funksjoner, påkallelser til tilbakeringing eller webservices og verdiene som utveksles ved kjøretid mens du kontrollerer strømmen av applikasjonen.
La oss se noen eksempler, vi får tilgang til web motores.com.ar, vi høyreklikker og aktiverer Firebug.

I konsollfanen når vi utfører et merke -søk, ser vi at konsollen viser at det påkalles en funksjon i Ajax som vil spørre etter en database ved hjelp av php og returnere modellene i JSON -format og legge dem til i kombinasjonen Modeller Vi kan også se parametere sendt, overskriften returnert av get eller post og svaret. La oss se på et annet tilfelle av en nettbutikk.

I dette tilfellet ser vi at konsollen indikerer at tre fonter eller fonter mangler i mappen / css / font, kanskje designeren glemte å legge dem til eller endre skriftene og fjernet ikke de tidligere referansene.
Vi kan også se hvordan når et produkt legges til i handlekurven, sender det følgende parametere: funksjon, produktmengde og produkt -ID.

 Ajax -funksjon påkalt insertItem cant 1 Id 5850326

Selv om vi kan se at det bare vil bli lagt til hvis vi er logget inn som brukere, ellers vil det be om at vi registrerer oss.
Så vi kan se hvordan applikasjonen fungerer og hvilken parameter den sender eller mottar og hvilke svar den gir og hva responstiden var, for eksempel for å legge til et produkt som tok 335 millisekunder.

HTML -fanen

lar deg se strukturen på nettet og redigere websidekoden i sanntid. Vi kan for eksempel endre koden HTML på nettstedet eller css -koden og se den direkte uten at disse endringene er permanente. For eksempel, hvis vi får tilgang til Ebay -nettstedet, kan vi bruke Firebug til å endre fargen på hoved- eller webinnholdsblokken.

For å gjøre dette, fra HTML -fanen ser vi etter linjen med HTML -kode som ser slik ut:

I høyre panel Stil Det vil vise oss css -stilen til det elementet, vi dobbeltklikker på linjen etter setningen bredde: 980px og vi skriver følgende:

 bakgrunn: rød ingen gjenta bla 0 0;

Når du er ferdig med å skrive, blir den sentrale blokken rød, hvis vi oppdaterer siden, vil endringene gå tapt og den vil gå tilbake til sin opprinnelige design.
Vi kan også prøve å manipulere HTML -koden og css -koden for å endre Ebay -logoen for Google -en. Det gjøres ved å endre URL -adressen til Ebay -logobildet for en annen url til et bilde vi ønsker.

Vi ser etter kodelinjen i HTML -koden og endrer lenken src = ”urlimagen”, Så justerer vi størrelsene

Denne funksjonaliteten fungerer ikke for å endre et komplett design, men for å gjøre små tester og visualisere endringer, uten å måtte få tilgang til en redaktør.

CSS -fanen

Panelfanen CSS Den viser alle CSS -klassene og identifikatorene vi lager eller som nettet vi analyserer har. Fra dette panelet kan vi endre våre klasser og css -setninger som vi gjorde tidligere i kategorien Stiler i HTML -panelet.

Fanen Skript

Dette panelet er for feilsøkingskode JavaScript eller jQuery. Det viser oss alt et skript gjør, dets variabler, dets funksjoner, feilsøking etter brytpunkter, trinnvis utførelse av et skript, en skjerm for å kontrollere variabelstakken, og vi kan også se oppførselen til funksjonene.

DOM -fanen

Panelet SOL eller DokumentobjektmodusDet er han som får informasjon om alle de forskjellige DOM -egenskapene og deres metoder. DOM er en del av elementene i et web og lar programmerere få tilgang til og manipulere XHTML -websider.
JQuery tilbyr metoder for å manipulere DOM effektivt. Vi kan få tilgang til alle attributter for et hvilket som helst element eller for å trekke ut HTML -koden fra et avsnitt eller en blokk. I tillegg til dette gir det metoder som f.eks .attr (), .HTML (), Y .val () De fungerer som henter og henter informasjon fra DOM -elementer for senere bruk.
La oss se i dette jQuery og DOM -eksemplet hvordan du kontrollerer en div og trekker ut en tekst:

 Jquery og DOM
Trekk ut tekst fra blokken:

Dette er en DOM -testtekst

Merkelappene HTML Elementet er tilgjengelig via css -klassen eller -id og deretter egenskapen som kan være tekst eller annen som tillater jQuery og DOM.

Fanen Nettverk

Formålet med nettverkspanelet er å overvåke webtrafikk og belastning og forbruk av hver HTTP -webforespørsel. Denne rapporten består av en liste med oppføringer, hvor hver av disse representerer en forespørsel / svar tur / retur fra siden.
Nettverkspanelvinduet viser en liste over forespørsler ettersom nettet lastes inn og brukes. Hvert element i listen viser informasjon som er produsert av forespørselen, og en grafisk tidslinje viser forbrukte byte, tiden det tar å svare, som representerer belastningsfasene i tid. Følgende er en liste over informasjonen som vises for hver forespørsel:

• HTTP -forespørselsmetode
• HTTP -svarskode og beskrivelse (200.301.404, osv.)
• Filnavn som påkalles
• Domenenavn hvor svaret er
• Svarstørrelse i byte
• Tid i millisekunder det tar å svare.

Vi kan også filtrere for å se deler som bare bilder eller bare js eller css filer og dermed bestemme hva som veier mer og hvordan vi kan optimalisere det.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng