Den største ændring for 2018 har været den store eftersyn af FireFox, og med det fungerer add-ons-måde i denne browser. Som et resultat vedligeholdes mange populære tilføjelser ikke længere eller er de utilgængelige.
De fleste tilføjelser til Firefox er også tilgængelige som udvidelser til Google Chrome. I denne artikel vil vi forsøge at give fortrinsret til cross-browser tilføjelser / udvidelser, hvilket i denne sammenhæng betyder, at de vil fungere på Firefox, Chrome og Chromium. Vi vil også give fortrinsret til gratis udvidelser, som ikke vides at videregive dine oplysninger til tredjeparter og ikke understøttes af annonceindtægter. Vi vil fokusere mere på udvidelser, der ikke begrænser dig til en bestemt udviklingsteknologi.
Få udviklere ville se nogen fordel ved at bruge Microsoft Edge som en udviklingsbrowser, men det er fint til test efter udvikling. Kun lidt over 4 ud af hver 100 besøgende af webstedet kan forventes at bruge det, skønt dette antal kan forventes at stige lidt, når flere brugere opgiver Internet Explorer.
Selvom der er langt flere Chrome-brugere end der er Firefox-brugere, har de i IT-gruppen en tendens til at foretrække Firefox, hvorfor der er flere og bedre udvidelser, der er rettet mod udviklere i Firefox.
Lad os nu se på de allerbedste browserudvidelser for udviklere, og hvorfor du måske ønsker at tilføje dem til din browser.
1. Bygget med
Når du befinder dig på et rigtig godt lavet websted, og du vil vide, hvordan de har gjort det, sparer denne udvidelse dig meget tid og besvær med at grave rundt i kildekoden. Download links: Krom / Chromium, Firefox
2. øks
Dette er et værktøj til kontrol af tilgængelighed. Det er altid bedst at forsøge at gøre dine sider så tilgængelige som muligt, og øks vil hjælpe dig med at undgå utilsigtet at udelukke et segment af brugere fra dit websted. Download links: Krom / Chromium, Firefox
3. ColorZilla
En oldie, men stadig en goody, denne udvidelse giver dig mulighed for at prøve farver direkte fra en side, hente farvekoder, generere gradueringer og mere. Download links: Krom / Chromium, Firefox
4. Webudvikler
Tilføjer nogle nyttige ekstrafunktioner til din browser til kontrol af CSS, formularer, billeder og information. En af de mest populære udvidelser, der nogensinde er lavet. Download links: Krom / Chromium, Firefox
5. Woo Rang
Analyser enhver webside for SEO-data. Tilvejebringer en kraftfuld rapport, der viser dig alle SEO-internals, inklusive en samlet SEO-score, forslag til forbedring, søgeordsky og meget mere. Download links: Krom / Chromium, Firefox
6. Tab2QR
Generer en QR-kode for den side, du er på, og du kan besøge siden med din telefon blot ved at scanne QR-koden. God til test responsive websteder, selvom du ikke har oprettet dem. Download links: Krom / Chromium, Firefox
7. HTTP Request Maker
Dette kan være meget nyttigt til test af PHP-formsvar, hvor du ikke virkelig ønsker at indsende formularen (hvilket muligvis udløser yderligere behandling, som du ikke har brug for at teste). Med dette værktøj kan du smedje HTTP-anmodninger uden problemer. Bemærk, at selvom Chrome- og Firefox-udvidelserne har samme navn og gør de samme ting, er de lavet af forskellige udviklere og er ikke nøjagtigt det samme. Download links: Krom / Chromium, Firefox
8. Sideydelsestest
Få hurtigt en rapport om, hvordan din side fungerer på forskellige stadier af sin rejse til din browser. Det er lidt som en mere avanceret version af tracert. Denne er kun tilgængelig på Firefox i øjeblikket. Der er lignende udvidelser til Chrome og Chromium, men de er ikke så rige på funktioner som denne. Download links: Firefox
9. Ordtællingsværktøj
Denne kan faktisk gøre mere end navnet antyder, da den også fortæller dig, hvor mange tegn og hvor mange sætninger der er inden for en valgt tekstblok (eller hele siden). Download links: Krom / Chromium, Firefox
10. Web Developer-checkliste
Sørg for, at du følger de bedste retningslinjer for webudviklingspraksis med dette værktøj, der viser, hvor dine standarder måske er gået. Download links: Krom / Chromium, Firefox
11. Billedkorteditor
En af en trio med fremragende udvidelser fra den tyske udvikler Heinz-Jürgen Boms, denne gør nøjagtigt hvad navnet siger, at den gør. Du kan generere et billedkort direkte i browseren ved blot at spore over de områder af et billede, du vil kortlægge. Download links: Firefox
12. Avanceret frame editor
En anden udvidelse fra Heinz-Jürgen Boms, dette er virkelig et CSS-stylingværktøj, hvor du kan opbygge en ramme direkte i browseren ved at specificere dens attributter. Det er værd at tjekke dokumentation før du begynder at bruge det. Download links: Firefox
13. Bootstrap Responsive Hjælper
Dette er en meget enkel lille udvidelse, der hjælper dig med at se hurtigt, om dine breakpoints fungerer korrekt, og hvilket bootstrap niveau den aktuelle tilstand er. Selvfølgelig har du kun brug for denne udvidelse, hvis du rent faktisk arbejder i Bootstrap. Chrome-versionen er udviklet af Jonathan Defraiteur, og Firefox-versionen er udviklet af Kevin Bon. Download links: Krom / Chromium, Firefox
14. Prøv det selv HTML5 Editor
Hvis du foretrækker at holde tingene enkle og bare få alt dit arbejde gjort fra ét sted, er denne udvidelse noget for dig. Denne kontekstbevidste editor, der er rig på funktioner, fungerer direkte i browseren og understøtter HTML, CSS og JavaScript. Det er langt fra perfekt, men for en hurtig og beskidt redigering uden at bryde med at åbne en separat applikation får det jobbet gjort. Download links: Firefox
15. Røntgenbriller
Teknisk set er denne ikke en udvidelse, det er faktisk en bogmærke. Men det fungerer så godt, vi kunne ikke overlade det fra listen. Selvom det er lavet af Mozilla, fungerer det lige så godt i Chrome, fordi begge browsere er i fuld overensstemmelse. For at bruge det skal du synliggøre din bogmærkelinje. Besøg derefter downloadsiden, som du kan nå via nedenstående links, og træk knappen X-Ray Goggles til bogmærkelinjen. Derefter er det bare at besøge ethvert sted, affyre dit X-Ray Goggles-bogmærke, vælge et element på siden, og du kan redigere koden til det. Download links: Krom / Chromium, Firefox
header image med tilladelse fra
Kommentarer 0 Responses