Hur man optimerar en webbplats med hjälp av Firebug -plugin

Pyroman är ett Firefox -tillägg eller tillägg skapat för att kunna testa kod och utföra optimeringar när man programmerar en webbplats. Det är en uppsättning verktyg som du kan analysera laddningshastigheten för de olika elementen som utgör webben, nätets struktur. redigera, hitta fel, felsöka källkoden och se hur koden fungerar CSS, HTML eller JavaScriptVi kan också redigera eller ändra vilken aspekt som helst och den kommer att förhandsgranskas omedelbart.

Pyroman är ett utmärkt komplement till ett annat plugin som Webbutvecklare. Dess gränssnitt är lätt att använda och aktiveras bara när vi behöver det, och det är också gratis. Syftet med denna handledning är att visa en detaljerad och professionell användning av Pyroman, kan vi också se andra självstudier Firebug Web Developer Tool och Inspektera HTML med Firebug.
Pyroman Det är ett viktigt verktyg för dem som programmerar eller optimerar webbplatser, oavsett om de är designers eller webbansvariga. Så vi kan eliminera programmerings- eller designfel, veta hur de fungerar och hur strukturen på en webbsida är, hur alla element som utgör den.
Vi installerar Firebug -plugin
För att installera plugin -programmet går vi till webbplatsen för nedladdning av firebug och där letar vi efter den senaste versionen av verktyget för nedladdning.

Efter installationen startar vi om datorn och vi kommer att se att den läggs till när du startar en webb, för att aktivera den högerklickar vi och letar efter alternativet Inspektera elementet:

När vi har aktiverat verktyget, låt oss se de viktigaste funktionerna:

Konsolfliken

Trösta Pyroman Det är där meddelandena om vad webben gör och de fel som uppstår kommer att visas. Vi kan se meddelanden om samtal till funktioner eller sidor som webben gör när vi interagerar och visar oss funktioner, kallelser för återuppringning eller webbtjänster och de värden som utbyts vid körning samtidigt som du kontrollerar programmets flöde.
Låt oss se några exempel, vi öppnar webben motores.com.ar, vi högerklickar och aktiverar Pyroman.

På konsolfliken när vi gör en varumärkessökning kommer vi att se att konsolen visar att en funktion anropas i Ajax som frågar efter en databas med php och returnerar modellerna i JSON -format och lägger till dem i modellerkombinationen Vi kan också se parametrar skickade, rubriken returneras av get eller post och svaret. Låt oss titta på ett annat fall av en webbutik.

I det här fallet ser vi att konsolen indikerar att tre teckensnitt eller teckensnitt saknas i mappen / css / font, kanske designern glömde lägga till dem eller ändra teckensnitt och tog inte bort de tidigare referenserna.
Vi kan också se hur den lägger till följande parametrar när du lägger till en produkt i kundvagnen: funktion, produktkvantitet och produkt -id.

 Ajax -funktion påkallad insertItem cant 1 Id 5850326

Även om vi kan se att det bara kommer att läggas till om vi är inloggade som användare, annars kommer det att begära att vi registrerar oss.
Så vi kan se hur applikationen fungerar och vilken parameter den skickar eller tar emot och vilka svar den ger och vad svarstiden var, till exempel för att lägga till en produkt som tog 335 millisekunder.

HTML -flik

låter dig se strukturen på webben och redigera webbsidans kod i realtid. Vi kan till exempel ändra koden HTML av webbplatsen eller css -koden och visa den direkt utan att dessa ändringar är permanenta. Om vi ​​till exempel går till Ebays webbplats kan vi använda Firebug för att ändra färgen på huvud- eller webbinnehållsblocket.

För att göra detta, från HTML -fliken letar vi efter raden med HTML -kod som ser ut så här:

I den högra panelen Stil Det kommer att visa oss css -stilen för det elementet, vi dubbelklickar på raden efter meningen bredd: 980px och vi skriver följande:

 bakgrund: röd ingen upprepa rullning 0 0;

När du har skrivit färdigt blir det centrala blocket rött, om vi uppdaterar sidan kommer ändringarna att gå förlorade och det kommer att återgå till sin ursprungliga design.
Vi kan också försöka manipulera html -koden och css -koden för att ändra Ebay -logotypen för Google, det görs genom att ändra webbadressen till Ebay -logotypbilden för en annan webbadress till en bild som vi vill ha.

Vi letar efter kodraden i HTML -koden och ändrar länken src = ”urlimagen”, Sedan justerar vi storlekarna

Denna funktionalitet fungerar inte för att ändra en komplett design utan för att göra små tester och visualisera ändringar, utan att behöva komma åt en redaktör.

CSS -fliken

Panelfliken CSS Det visar alla CSS -klasser och identifierare som vi skapar eller som webben som vi analyserar har. Från denna panel kan vi ändra våra klasser och css -meningar som vi gjorde tidigare på fliken Stilar i HTML -panelen.

Skriptflik

Denna panel är för felsökningskod JavaScript eller jQuery. Det visar oss allt ett skript gör, dess variabler, dess funktioner, felsökning med brytpunkter, steg-för-steg-körningen av ett skript, en skärm för att styra variabelstacken och vi kan också se funktionernas beteende.

Fliken DOM

Panelen SOL eller DokumentobjektlägeDet är han som får information om alla olika DOM -egenskaper och deras metoder. DOM är en del av en webbs element och tillåter programmerare att komma åt och manipulera XHTML -webbsidor.
JQuery tillhandahåller metoder för att manipulera DOM effektivt. Vi kan komma åt alla attribut för alla element eller för att extrahera HTML -koden från ett stycke eller block. Utöver detta tillhandahåller det metoder som t.ex. .attr (), .HTML (), Y .val () De fungerar som getters och hämtar information från DOM -element för senare användning.
Låt oss se i detta jQuery- och DOM -exempel hur man styr en div och extraherar en text:

 Jquery och DOM
Extrahera text från block:

Detta är en DOM -testtext

Etiketterna HTML Elementet nås via css -klassen eller id och sedan egenskapen som kan vara text eller någon annan som tillåter jQuery och DOM.

Fliken Nätverk

Syftet med nätverkspanelen är att övervaka webbtrafik och belastningen och förbrukningen av varje HTTP -webbförfrågan. Denna rapport består av en lista med poster, där var och en av dessa representerar en tur / retur -begäran / svar från sidan.
Fönstret i nätverkspanelen visar en lista med förfrågningar när webben laddas och används. Varje objekt i listan visar information som produceras av begäran och en grafisk tidslinje visar förbrukade byte, den tid det tar att svara, vilket representerar belastningsfaserna i tid. Följande är en lista över informationen som visas för varje begäran:

• HTTP -förfrågningsmetod
• HTTP -svarskod och beskrivning (200,301,404, etc)
• Filnamn som åberopas
• Domännamn varifrån svaret
• Svarstorlek i byte
• Tid i millisekunder det tar att svara.

Vi kan också filtrera för att se delar som endast bilder eller bara js eller css -filer och därmed bestämma vad som väger mer och hur man optimerar det.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng