Firefox-tillägg för webbutveckling för alla tillfällen. Standard Firefox-tillägg för webbutvecklare


Hej kära vänner. Utvecklarpanelen (konsolen) i webbläsaren är oumbärligt verktyg för varje webbplatsägare som du snabbt kan se html-kod sidor och css-stilar. Du kan också ta reda på om fel som uppstod när webbplatsen laddades och kontrollera webbplatsen för anpassningsbarhet.

Idag ska vi överväga att arbeta med html-kod, css-stilar och anpassningsförmåga i utvecklarpanelen. Det är de verktyg som krävs för att lösa de flesta problem.

För gemensam förståelse Låt mig ge dig ett exempel på när du kan behöva utvecklarpanelen.

Låt oss säga att du kom till min blogg och du var intresserad av vilket typsnitt jag använder eller färg och så vidare. I allmänhet kan detta vara vilket element som helst på webbplatsen. Och du ville göra detsamma på din webbplats.

Sedan tittar du igenom utvecklarpanelen i webbläsaren på önskat element, där du kan se html-koden och css-stilarna för det.

Ett annat alternativ för att använda panelen är när du vill göra något på webbplatsen, men ännu inte vet hur det kommer att se ut.

I det här fallet kan du även använda utvecklarpanelen och se hur din idé kommer att se ut i webbläsaren. När allt kommer omkring är allt du gör i utvecklarpanelen endast synligt för dig. Och för att besökarna ska kunna se dina experiment måste du överföra stilar och koder till webbplatsfilerna.

Öppna webbmasterpanelen och bekanta dig med gränssnittet

Utvecklarpanelen finns i alla moderna webbläsare. För att öppna den måste du trycka på F12-tangenten på ditt tangentbord.

Panelgränssnitt i olika webbläsare kommer att vara annorlunda, men funktionsprinciperna är likartade.

Jag föredrar panelen i webbläsaren Firefox.

Själva panelen är uppdelad i två halvor och innehåller flikar och verktyg för arbete.

I panelen kan du se HTML-koden för sidan och redigera den direkt där. För att göra detta, välj önskat element, högerklicka och välj från menyn "Redigera somHTML (RedigerasomHTML)".


För att arbeta med stilar måste du gå till avsnittet i CSS-panelen, där du kan lägga till stilar eller inaktivera befintliga genom att ta bort kryssrutan bredvid dem. Allt kan ändras.

Här kan du ta reda på i vilken fil stilarna finns och på vilken rad.

Hur man analyserar ett html-element på en webbplats och tar reda på dess css-stilar

Låt oss titta på mitt exempel, som finns i varje artikel.

För att analysera det önskade elementet måste du högerklicka på det och välja menyalternativet .


Hela principen för att arbeta med kod i panelen är att du måste välja html-koden i det vänstra fönstret, och i det högra fönstret kommer det att finnas stilar för detta element.

Och om allt är ganska enkelt med stilar, måste du förstå dess integritet när du arbetar med html-kod. Det vill säga att varje element har taggar där det finns. Dessa kan vara stycken, länkar, bilder och så vidare. Oftast är dessa DIV-block som har en öppningsbricka < div> och stängning div>. Och allt detta syns tydligt i panelen.


När du kopierar eller redigerar är det viktigt att förstå var ett block börjar och var det slutar. Att göra det minsta misstag här kan störa mallens hela layout.

I videohandledningen kommer jag att gå in i detalj på denna punkt. Och om du snabbt vill bemästra grundläggande kunskap för html och css råder jag dig att gå till sidan "Gratis" och ladda ner kurser av Evgeniy Popov.

Hur man kopierar HTML-kod från panelen till webbplatsfiler

Det kan finnas många idéer för att använda utvecklarpanelen. Efter att ha experimenterat i panelen måste resultatet överföras till webbplatsfilerna. Och det finns en del svårigheter här. Faktum är att panelen visar html-kod, och de flesta moderna webbplatser, inklusive de på WordPress plattform, skapad med språk PHP programmering. Och detta är som himmel och jord.

Så låt oss titta på ett exempel på att kopiera en banner från min blogg och överföra den till en annan webbplats.

För att göra detta måste du öppna utvecklarpanelen och undersöka det önskade elementet. När du har bestämt början av DIV-blocket, tryck på den högra knappen på det främre siktet och välj menyalternativet "Kopiera externHTML"


Koden har kopierats till klippbordet och nu måste du klistra in den där du vill se denna banner.

Denna process är ganska svår att beskriva, så jag föreslår att du tittar på en videohandledning där allt förklaras och visas i detalj.

Hur man överför stilar från utvecklarpanelen till webbplatsfiler

När du har bestämt dig för kod och stilar kan du börja överföra dem till webbplatsfilerna. Eftersom för närvarande alla dessa ändringar är synliga endast för dig i webbläsaren, och om du uppdaterar sidan försvinner alla ändringar.

, för mig är det bekvämare. Sedan när man arbetar i Notepad++ finns kodmarkering och radnumrering. Och detta hjälper mycket när du inte bara behöver kopiera stilar, utan göra ändringar i befintliga. Dessa stilar är lätta att hitta efter radnummer.

Så här kontrollerar du mallrespons i utvecklarpanelen

För att växla panelen till adaptivt läge måste du trycka på tangentkombinationen CTRL+SHIFT+M eller knappen i utvecklarpanelen, som är placerad på olika sätt i olika webbläsare.



Slutsats

I den här artikeln tittade jag inte på alla verktyg i utvecklarpanelen, utan bara de som kan vara användbara och som oftast används av många webbansvariga.

Att använda panelen och färdigheter i att arbeta med kod och stilar är oumbärligt när man arbetar med webbplatser och affiliateprogram.

Ta verktyget i bruk, det kommer att vara användbart för dig många fler gånger.

Om du har några frågor svarar jag gärna på dem i kommentarerna.

Vänner, jag önskar er framgång. Vi ses i nya artiklar.

Med vänlig hälsning, Maxim Zaitsev.

  • Översättning

Historiskt sett har Firefox varit mycket populär bland webbutvecklare på grund av dess utökbarhet genom anslutning av olika plugins och tillägg skrivna av tredjepartsutvecklare. Idén att isolera funktionalitet i tillägg gjorde det möjligt att lösa många olika problem direkt i webbläsaren, utan att tillgripa externa verktyg.

Naturligtvis, i den här listan hittar du definitivt redan bekanta tillägg, men ett stort lager användbara tillägg håller sig alltid borta. Så gör dig redo att installera ytterligare ett par tillägg! :)

Inbyggda utvecklingsverktyg i Firefox

Innan du startar listan skulle det vara fel att inte nämna de verktyg som redan är inbyggda i Firefox. Här pratar vi om samma utvecklingsverktyg i Firefox Aurora 10 och den funktionalitet som finns i vilken modern webbläsare som helst idag.

Vid utvecklingen av gränssnittet för dessa verktyg prövades många tillvägagångssätt och lösningar. Resultatet är ett ganska trevligt gränssnitt som alla kan prova om de installerar Firefox Aurora (hmm, har du inte installerat det än?)

Tja, under snittet hittar du en enorm lista med tillägg som definitivt kommer att vara användbara för alla webbutvecklare.

Pyroman

Detta tillägg är noll i listan över tillägg. Firebug har satt standarden för utvecklingsverktyg i alla webbläsare. Används vanligtvis för liveredigering av CSS och HTML, JavaScript-felsökning och sidladdningsoptimering. Några av tilläggen som nämns nedan är baserade på Firebug, så vi återkommer till det tillägget senare.

För säkerhets skull påminner jag dig om att Firebug är ganska krävande på minnet, så glöm inte att inaktivera det (eller helt enkelt inte aktivera det) på de webbplatser som du inte arbetar med.

Standard Firefox-tillägg för webbutvecklare

Under åren har många tillägg utvecklats för att få ut det mesta av Firefox. Vissa av dem är populära, andra kommer du förmodligen att se för första gången. Om du använder en tillägg som inte nämns här, skriv gärna i kommentarerna!

SEOQuake SEO

Seoquake-tillägget hjälper dig att optimera din webbplats för sökmotorer och sociala nätverk.

Visa IP

Visar IP-adresser nuvarande sida i statusfältet. Högerklicka kommer också att visa värdnamnet, information från hois, netcraft, etc. Du kan också kopiera IP-adressen dit.

Snygg

Ändra stilmallar för webbplatser. Stylish har, precis som GreaseMonkey, ett stort lager av webbplatsteman som Google, YouTube, Tumblr och andra.

Sabotagedata

Tillägg för att visa och ändra HTTP/HTTPS-rubriker och POST-parametrar.

Total Validator

Samtidig sidaverifiering av flera validatorer. Fungerar med externa och interna sajter, samt helt enkelt med lokala sidor.

Chrome är en av mest populära webbläsarna på det här ögonblicket. Det ger en användarvänlig miljö för utvecklare med en mängd olika användbara funktioner. Google Chrome DevTools är ett officiellt verktyg som låter utvecklare få mer full tillgång till webbläsaren och applikationen.

Funktioner i DevTools

Här kan du faktiskt testa sajtens visning på olika enheter, redigera HTML och CSS i farten, mät prestanda enskilda områden, felsöka JavaScript.

För att arbeta med enskilda funktioner kanske du vill använda Google Chrome Canary - experimentell Chrome-version. Denna version kan enkelt köras tillsammans med vanlig Chrome.

För att använda och experimentera med individuella utvecklarverktyg behöver du adressfält webbläsare enter

och välj alla nödvändiga verktyg.

MED hela uppsättningen Du kan kolla in möjligheterna på den officiella webbplatsen.

Hur öppnar man utvecklarverktyget?

För att göra detta kan du använda ett av alternativen:

  1. Genom webbläsarens meny

Gå in i menyn genom att klicka på ikonen, klicka på "Fler verktyg" och välj "Utvecklarverktyg."

  1. Via högerklicka

Klicka på valfritt sidelement Högerklicka musen och välj "Inspektera element".

  1. Använda snabbtangenter

Tryck på kortkommandot beroende på din driftsmiljö

  • Windows: F12 eller också Ctrl + Shift + I
  • Mac: Cmd + Opt + I

Tips och tricks för att arbeta med utvecklarverktyg.

Här är bara några av de många tillgängliga alternativen. För några av dem används Canary.

Navigera snabbt genom filer.

I öppna fliken med källfiler klicka kombination Ctrl+ P (Cmd + P) och leta efter de nödvändiga filerna.


Formatera med ()

Genom att klicka på () kan du ändra formateringen av källkoden och återgå till normal vy.


Redigera ett HTML-element

Du kan redigera HTML direkt genom att välja valfritt element inom DOM och dubbelklicka på det. Avslutande taggar kommer att redigeras automatiskt. Alla ändringar kommer att återspeglas omedelbart.


Redigera CSS-egenskaper

Precis som HTML kan du redigera CSS på samma sätt.


Sök i källkoden

Du kan snabbt söka in källkod använd kombinationen Ctrl + Shift + F (Cmd + Opt + F), och sök även med hjälp av css-väljaren genom att trycka på Ctrl + F (Cmd + F).


Breakpoints i Javascript Breakpoints

Vid felsökning av Javascript är det ofta användbart att använda brytpunkter. I utvecklarverktyget kan du välja radnumret där du vill stoppa och trycka på Ctrl + R (Cmd + R) för att ladda om sidan. Det är vid denna tidpunkt som nedladdningen kommer att avbrytas.


Hoppa efter radnummer

Genom att trycka på Ctrl + O (Cmd + O) och använda speciell syntax kan du snabbt hoppa till önskad linje. I exemplet skrev du in: 200:10, vilket betyder att övergången gick till rad 200 och kolumn 10.


Många markörer

Om du behöver ange värden på flera ställen samtidigt eller redigera samma teckensnittsstorlek, kan du genom att trycka på Ctrl + Klicka (Cmd + Klicka) samtidigt ange information på flera ställen.


Ändra fönstrets position

DevTools-fönstret har tre positioner: på ena sidan, längst ner och flytande. Du kan växla mellan dem med Ctrl + Shift + D (Cmd + Shift + D) eller genom specialmenyn till höger övre hörnet fönster.


Rensa cookies

För att arbeta med plugins från tredje part är det ibland nödvändigt att rensa cookies. På fliken "Resurser" kan du hitta nödvändiga cookies och radera dem via snabbmenyn.


Testar på olika enheter

Om du har adaptiv design, sedan kan du testa din applikation på olika enheter. Med detta läge kan du leta efter problem med layout på Mobil enheter eller i olika webbläsarstorlekar. För att gå in i detta läge, tryck på eller tangentkombinationen Ctrl + Shift + M (Cmd + Shift + M). Där kan du välja nödvändig enhet, skärmorientering och storlek.


Färgpall och pipett

Genom att klicka på önskad färg i markeringen i CSS-stilar kommer du omedelbart till färgpallen, där du för varje element kan välja en färg som passar din design bättre. Med pipetten kan du snabbt se färgen på alla element på sidan.


Ändra färgformat

Du kan växla mellan olika displayer färger: RGBA, HSL och hexadecimal. Tryck på Shift+ Om du klickar på ett block med en färg ändras formatet.


Pekskärmsemulering

En cool DevTools-funktion hjälper till att simulera pekskärmen och accelerometern. För att göra detta, följ sökvägen "Konsol -> Emulering -> Sensorer".


Växla mellan elementtillstånd

Det är ofta nödvändigt att kontrollera dold stil, till exempel :hover-attributet. I Firefox låter den lokala utvecklingsmiljön dig testa den direkt när den anropas. Men i Chrome är det annorlunda. Det finns något som kallas "växlingselementtillstånd". Det låter dig se egenskaperna för ett attribut direkt i stilpanelen.


Sparar bild som data-URI (base64-kodning)

Du kan spara bilden från sidan som en data-URI eller konvertera den till base64. Det finns inget behov av att använda någon tredjepartstjänster. För att göra detta, gå till fliken "Nätverk", välj önskad bild, högerklicka på den och klicka på "Kopiera bild som data-URL".


Visa User Agent Shadow DOM

När du arbetar med kontroller som en knapp eller inmatningsrad, lägger webbläsaren automatiskt till dolda attribut. För att se dem, tryck på F1 (?) och välj "Visa användaragent DOM". Som visas i exemplet, i vårt DOM-träd dök upp dolt attribut#shadow-root div. Nu, om det behövs, kan du lägga till några CSS-stilar till den.


Väljer nästa förekomst

När du behöver ändra samma egenskap för flera element kan ett utvecklarverktyg påskynda denna process. Dubbelklicka på önskad egenskap och använd Ctrl + D (Cmd + D) för att markera alla nödvändiga förekomster. Genom att nu ändra värdet på ett ställe ändras det samtidigt på andra valda platser.


Arbetsmiljö

Som standard, när du ändrar något i utvecklarverktyget, försvinner allt när sidan laddas om. Med hjälp av arbetsmiljön kan du spara nödvändiga ändringar på disken. Högerklicka på mappen och i menyn klicka på "Lägg till mapp till lokal arbetsyta", gör sedan samma sak för önskad fil, men i menyn klicka på "Karta till filsystem resurs...".


Filmremsa laddas

Du kan inte ignorera den coola möjligheten att skapa en filmremsa från stater när du laddar din webbplats. För att kontrollera hur din webbplats renderas under varje steg av dess inläsning, gå till panelen "Nätverk", klicka på bilden med kameran och tryck sedan på Ctrl + R (Cmd + R) för att ladda om sidan. Som ett resultat kommer du att få skärmdumpar av din sida som laddas vid varje ögonblick.


DOM-laddningstid

Chrome DevTools låter dig kontrollera laddningshastigheten för DOM-strukturen och den övergripande sidladdningshastigheten. För att göra detta, gå till fliken "Nätverk", klicka på "Visa översikt" och tryck på Ctrl + R (Cmd + R) för att ladda om sidan. Den blå linjen visar laddningstiden för DOM-strukturen och den röda linjen visar den totala tiden. Allt till vänster och på den blå linjen är blockerare för att ladda DOM och orsakar långsam sidrendering.


Nätverkshastighetsprofiler

För att testa applikationen laddas genom mobilnät eller under förhållanden med begränsad internethastighet är det möjligt att skapa speciell profil, vilket kommer att indikera erforderlig hastighet Nedladdningar. För att göra detta, gå till rullgardinsmenyn "Throttling" på fliken "Nätverk" och klicka på "Lägg till en anpassad profil..." för att skapa din egen profil eller välj en av de föreslagna.


Säkerhetspanel

Med hjälp av den kan du testa migreringen till HTTPS och snabbt fixa eventuella varningar. Gå till panelen "Säkerhet" och tryck på Ctrl + R (Cmd + R). Grön Säkra skript kommer att markeras och misstänkta skript kommer att markeras i rött.


Google AMP HTML-validering

Använda utvecklarverktyg från Firefox i Google Chrome

Om du råkar behöva ett utvecklarverktyg från Firefox kan du prova Valence, ett experimentellt plugin från Firefox-teamet. Den är avsedd för felsökning olika webbläsare. Kräver Chrome version 37 och senare.


Till exempel på OSX använder du nästa kommando du kan köra felsökningsversionen av Chrome

Jag vill erkänna att jag stort fan webbläsarverktyg för utvecklare. Detta är verkligen ett hemligt supervapen för webbutvecklare.

Utan dem skulle vi stirra på en webbsida med förtvivlade ögon och försöka lista ut varför element inte är justerade, varför bilder inte laddas och varför andra mer komplexa saker inte fungerar.

Jag bytte nyligen till att använda Firefox dagligen och insåg att jag praktiskt taget inte vet något om Firefox utvecklarverktyg. Dessutom insåg jag hur mycket de har förbättrats under de senaste åren! Men de ignoreras ofta i featureartiklar. Enligt min mening är detta orättvist, så jag ansåg det som min plikt att berätta om dem.

Och nu finns det en artikel som lyfter fram några av dessa verktyg, plus att den kommer med visuella gifs för att göra det mindre tråkigt att läsa.

Knep med skärmdumpar

Skärmdump av hela sidan

Öppna webbutvecklingspanelen i din webbläsare. Välj "Utvecklarverktyg" från listan. Klicka på fliken "Anpassa verktyg" och markera rutan bredvid "Ta en skärmdump av hela sidan." Klicka sedan på kameraikonen i verktygsfältet. En skärmdump av sidan sparas i standardmappen med den aktuella sidbredden.

Skärmdump av nod

Öppna fliken "Utvecklarverktyg", välj läget "Inspektör", och aktivera sedan funktionen "Välj element från sida" till vänster om detta läge. Nu kan du hitta noden du behöver, högerklicka på den och välj "Skärmdump av nod".

Ta bort en klass från ett element

Ibland har ett element flera klasser, och du kan inte direkt förstå vilken klass som är ansvarig för ett visst attribut. Genom att välja ett element i inspektörspanelen och klicka på knappen ".cls" i det övre högra hörnet av regelpanelen kan du se en lista över alla klasser och enkelt inaktivera/återaktivera dem.

Dra fram och tillbaka i panelen Inspektör

I Inspektörspanelen kan du dra vilket HTML-element som helst och ändra dess position på sidan. Bara nypa vänster knapp musen i början av raden, bör du ha en handikon visas, sedan kan du orsaka förödelse på webbsidan.

Snabbtangenter för Selectors API

En annan cool funktion i konsolen är snabbtangenterna för Selectors API. Vi återvänder till "Konsolen" och anger:

$ ()  -snabbknapp för document.querySelector()
$$() - snabbtangenten för document.querySelectorAll()

Använd värdet för den senaste operationen i "Konsolen"

Använd $_ för att återgå till värdet av en tidigare operation utförd i "Konsolen"

Högerklicka på ett element i Inspector och välj "Använd i konsolen". Den kommer att tilldelas en temporär variabel.

Felsökning av JavaScript

Du kan installera kontrollpunkter och uttryck att spåra i källfiler JS i Debugger-panelen i Developer Tools så att du sedan kan se alla ändringar som sker.

Genom att ladda om sidan förblir brytpunkterna och spårningsuttrycken oförändrade och skriptet förblir i önskad position.

Firefox innehåller många verktyg som hjälper webbutvecklare att göra sitt jobb. Många använder fortfarande FireBug och inser inte att Firefox nu har sina egna inbyggda verktyg. I det här kapitlet ska vi titta på de verktyg som är mest användbara för att utveckla applikationer för Firefox OS.

Om du är intresserad av att ta emot ytterligare information om dessa verktyg och vad andra bra verktyg kommer att dyka upp i Firefox, titta på sidan på MDN (men titta på länken, jag väntar).

Introduktion till responsiv design

Det allmänna arbetsflödet för webbutveckling är att redigera en HTML-fil och ladda om sidan i webbläsaren för att se ändringarna. Om du inte använder något som Grunt eller Volo, så finns det i allmänhet inget behov av ett kompileringssteg eller liknande. Firefox OS Simulator låter dig använda samma process, förutom att emulatorn för närvarande är begränsad till en enda upplösning (480x320). Detta är mindre än idealiskt om du också designar din app för att köras på surfplattor, phablets, jätte-TV-apparater eller något däremellan.

För att testa hur din app kommer att se ut med valfri skärmupplösning kan du använda verktyget Responsive Design för att ändra skärm (och visningsport). Det kan aktiveras via menyn Verktyg -> Webbutveckling -> Responsiv design, som visas i figuren nedan. När du aktiverar det här verktyget kommer fönstret att ändras så att du kan ändra storlek på visningsporten genom att dra i hörnen eller genom urvalslistan.

Att använda responsiv design är särskilt användbart när du testar mediefrågor, eftersom det låter dig ändra skärmstorlek och se hur din webbplats reagerar på layoutförändringar i realtid. En annan bra funktion med Responsive Design är att du kan spara förinställda dimensioner. Om du vet dimensionerna du fokuserar på kan du snabbt kolla olika storlekar utan att behöva ändra storlek på det aktuella webbläsarfönstret.

I skrivande stund kör de flesta Firefox OS-telefoner på marknaden med en upplösning på 480x320 och en densitet på cirka 96 pixlar per tum. Du bör dock förvänta dig att detta kommer att förändras med tiden när ny maskinvara för Firefox OS blir tillgänglig. Skärmar kommer sannolikt att ha fler pixlar och mer hög densitet(liknar Apples retina-skärmar).

För att säkerställa framtida tillförlitlig prestanda för din applikation, ställ inte in någon upplösning eller pixeltäthet i din CSS. Istället bör du använda mediafrågor och responsiva designprinciper när du skapar appar som anpassar sig till alla skärmstorlekar. För att lära dig mer om responsiv design rekommenderar jag följande böcker: Responsiv webbdesign och Mobile First.

Sammantaget låter responsiv design oss testa våra webbapplikationer med en mängd olika olika storlekar skärmar utan att behöva byta fönster Firefox webbläsare. I min ödmjuk åsikt, detta är en av de mest användbara och tillgängliga verktyg webbutvecklare, men han har en stor begränsning: V för närvarande det finns inget sätt att testa olika pixeltätheter (med andra ord, se hur din webbplats skulle se ut på en näthinna eller bättre skärm).

Utvecklarverktyg

Firefox Developer Tools liknar FireBug och verktyg som finns tillgängliga i andra moderna webbläsare. Med dessa verktyg kan du köra och felsöka JavaScript via konsolen och manipulera DOM och CSS på den aktuella sidan.

För att ringa konsolen kan du öppna Verktyg -> Webbutveckling -> Webbkonsol eller högerklicka på sidan, välj Inspektera element och klicka på fliken Konsol.

Bortsett från JavaScript-konsol det finns många andra verktyg tillgängliga, såsom en stilmallsredigerare, nätverksmonitor, JavaScript-profilerare, JavaScript-felsökare, sidinspektör och många fler.

I applikationen som skapades i föregående kapitel använde vi konsolen för att kontrollera hur vår applikation utvecklades. Det är vackert effektiv metod felsöka våra applikationer, men vissa utvecklare använder fortfarande alert() för allt JavaScript-kod som ett "felsökningsverktyg".

Att använda alert() är faktiskt dåligt eftersom om utvecklaren glömmer att ta bort alert() så kommer användarna att betala för det. Att använda en konsol undviker detta problem eftersom alla meddelanden visas ofarligt (och tyst!) på en plats som användaren normalt inte skulle ha tillgång till. Att använda konsolen innebär också att du inte behöver ta bort meddelanden från din kod om du inte verkligen vill. Detta kan hjälpa till att underhålla och felsöka koden om något går fel (som är vanligt med all programvara!).

Studera och korrekt användning utvecklarverktyg som ingår i Firefox (eller vilken webbläsare du använder). viktigt steg att bli en bra utvecklare. Därför uppmanar jag alla att titta på länkarna ovan och titta närmare på de olika verktygen som finns i Firefox.

Ett annat specialverktyg som inte nämndes ovan kallas en fjärrfelsökning. Detta verktyg låter dig ansluta till din telefon under Android-kontroll eller Firefox OS och använd utvecklarverktyg för att felsöka kod som körs på enheten i realtid.

Sammanfattning

Detta kapitel är tillägnat kort överblick utvecklarverktyg som ingår i Firefox. Att använda dessa verktyg gör utvecklingsprocessen enklare, särskilt när du använder dem tillsammans med Firefox OS-simulatorn. I nästa kapitel kommer vi att lära oss mer om Application Manager och hur man använder den på bästa sätt.


2024 gtavrl.ru.