Sådan optimeres et websted ved hjælp af Firebug -plugin

Firebug er et Firefox -plugin eller -udvidelse, der er oprettet for at kunne teste kode og udføre optimeringer ved programmering af et websted. Det er et sæt værktøjer, hvormed du kan analysere indlæsningshastigheden for de forskellige elementer, der udgør nettet, webens struktur. rediger, find fejl, fejlret kildekoden og se, hvordan koden fungerer CSS, HTML eller JavaScriptVi kan også redigere eller ændre ethvert aspekt, og det vil blive vist med det samme.

Firebug er et glimrende supplement til at ledsage et andet plugin som Web-udvikler. Dens grænseflade er let at bruge og aktiveres kun, når vi har brug for det, og det er også gratis. Formålet med denne vejledning er at vise en detaljeret og professionel brug af Firebug, kan vi også se andre tutorials Firebug Web Developer Tool og Inspicere HTML med Firebug.
Firebug Det er et vigtigt værktøj for dem, der programmerer eller optimerer websteder, uanset om de er designere eller webmastere. Så vi kan eliminere programmerings- eller designfejl, vide, hvordan de fungerer, og hvordan strukturen på en webside er, hvordan alle de elementer, der sammensætter den.
Vi installerer Firebug -pluginet
For at installere pluginet går vi til firebug -downloadwebstedet, og der leder vi efter den nyeste version af værktøjet til download.

Efter installationen genstarter vi computeren, og vi vil se, at den tilføjes, når du starter et web, for at aktivere den højreklikker vi og leder efter muligheden Efterse element:

Når vi har aktiveret værktøjet, lad os se de vigtigste funktioner:

Fanen Konsol

Konsol Firebug Det er her, meddelelserne om, hvad internettet gør, og de fejl, der opstår, vises. Vi kan se meddelelser om opkald til funktioner eller sider, som internettet foretager, mens vi interagerer, og viser os funktioner, kald til tilbagekaldelse eller webservices og de værdier, der udveksles ved runtime, mens du styrer programmets flow.
Lad os se nogle eksempler, vi får adgang til web motores.com.ar, vi højreklikker og aktiverer Firebug.

På konsolfanen, når vi foretager en mærkesøgning, vil vi se, at konsollen viser, at der påkræves en funktion i Ajax, der vil forespørge i en database ved hjælp af php og returnere modellerne i JSON -format og tilføjer dem til modellerkombinationen Vi kan også se parametre sendt, headeren returneret af get eller post og svaret. Lad os se på en anden sag om en online butik.

I dette tilfælde ser vi, at konsollen angiver, at der mangler tre skrifttyper eller skrifttyper i mappen / css / font, måske glemte designeren at tilføje dem eller ændre skrifttyperne og fjernede ikke de tidligere referencer.
Vi kan også se, hvordan det tilføjer et produkt til indkøbskurven, at det sender følgende parametre: funktion, produktmængde og produkt -id.

 Ajax -funktion påberåbt insertItem cant 1 Id 5850326

Selvom vi kan se, at det kun vil blive tilføjet, hvis vi er logget ind som brugere, vil det ellers anmode om, at vi registrerer os.
Så vi kan se, hvordan applikationen fungerer, og hvilken parameter den sender eller modtager, og hvilke svar den giver, og hvad svartiden var, for eksempel at tilføje et produkt, der tog 335 millisekunder.

Fanen HTML

giver dig mulighed for at se webens struktur og redigere websidekoden i realtid. Vi kan f.eks. Ændre koden HTML af webstedet eller css -koden og se den direkte, uden at disse ændringer er permanente. For eksempel, hvis vi får adgang til Ebay -webstedet, kan vi bruge Firebug til at ændre farven på hoved- eller webindholdsblokken.

For at gøre dette leder vi fra fanen HTML efter linjen med HTML -kode, der ser sådan ud:

I højre panel Stil Det vil vise os elementet css -stil, vi dobbeltklikker på linjen efter sætningen bredde: 980px og vi skriver følgende:

 baggrund: rød ingen gentag rul 0 0;

Når du er færdig med at skrive, bliver den centrale blok rød, hvis vi opdaterer siden, går ændringerne tabt, og den vender tilbage til sit oprindelige design.
Vi kan også prøve at manipulere html -koden og css -koden for at ændre Ebay -logoet til Google -en, det gøres ved at ændre webadressen til Ebay -logoet for en anden url til et billede, vi ønsker.

Vi leder efter kodelinjen i HTML og ændrer linket src = ”urlimagen”, Så justerer vi størrelserne

Denne funktionalitet virker ikke for at ændre et komplet design, men for at lave små tests og visualisere ændringer uden at skulle have adgang til en editor.

Fanen CSS

Fanen på panelet CSS Det viser alle CSS -klasser og identifikatorer, som vi opretter, eller som det web, vi analyserer, har. Fra dette panel kan vi ændre vores klasser og css -sætninger, som vi gjorde tidligere på fanen Styles i HTML -panelet.

Fanen Script

Dette panel er til fejlfindingskode JavaScript eller jQuery. Det viser os alt, hvad et script gør, dets variabler, dets funktioner, fejlfinding ved brudpunkter, trin-for-trin udførelse af et script, en skærm til styring af variabelstakken, og vi kan også se funktionernes adfærd.

Fanen DOM

Panelet SOL eller DokumentobjekttilstandDet er ham, der får oplysninger om alle de forskellige DOM -egenskaber og deres metoder. DOM er en del af elementerne i et web og giver programmører adgang til og manipulering af XHTML -websider.
JQuery giver metoder til effektivt at manipulere DOM. Vi kan få adgang til enhver attribut for ethvert element eller til at udtrække HTML -koden fra et afsnit eller en blok. Ud over dette giver det metoder som f.eks .attr (), .HTML (), Y .val () De fungerer som getters og hentning af information fra DOM -elementer til senere brug.
Lad os se i dette jQuery og DOM -eksempel hvordan man styrer en div og udtrækker en tekst:

 Jquery og DOM
Uddrag tekst fra blok:

Dette er en DOM -testtekst

Mærkerne HTML Elementet tilgås via css -klassen eller id'et og derefter den egenskab, der kan være tekst eller en anden, der tillader jQuery og DOM.

Fanen Netværk

Formålet med netværkspanelet er at overvåge webtrafik og belastningen og forbruget af hver HTTP -webanmodning, denne rapport består af en liste over poster, hvor hver af disse repræsenterer en anmodning / svar tur / retur fra siden.
Netværkspanelvinduet viser en liste over anmodninger, når internettet indlæses og bruges. Hvert element på listen viser oplysninger, der frembringes af anmodningen, og en grafisk tidslinje viser de forbrugte bytes, den tid det tager at reagere, hvilket repræsenterer belastningsfaserne i tid. Følgende er en liste over de oplysninger, der vises for hver anmodning:

• HTTP -anmodningsmetode
• HTTP -svarskode og beskrivelse (200.301.404 osv.)
• Filnavn, der påberåbes
• Domænenavn, hvor svaret
• Svarstørrelse i bytes
• Tid i millisekunder det tager at reagere.

Vi kan også filtrere for at se dele som kun billeder eller kun js- eller css -filer og dermed bestemme, hvad der vejer mere, og hvordan man optimerer det.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt