Whatsapp

12 Firefox-lisäosaa kehittäjille & Suunnittelijat

Anonim

Juuri äskettäin julkaisimme viestin 12 Google Chrome -laajennuksesta kehittäjille ja suunnittelijoille, ja vaikka jotkut laajennuksista ovat saatavilla Firefox , en toista tässä mitään.

Samalla tavalla jotkut alla luetelluista laajennuksista ovat saatavilla Chromessa, joten harkitse tällaisia ​​sovelluksia bonuksina vastaaville selaimille.

1. HTML Validator

HTML Validator käy koodisi läpi varmistaakseen, että se noudattaa HTML-standardia. Se näyttää näkemiensä virheiden määrän työkalupalkin kuvakkeessa.

HTML Validator Firefox Addon

2. Octotree

Kehittäjänä käyn läpi useita koodisivuja GitHubissa silloin tällöin, kun etsin nähdäkseni, kuinka muut kehittäjät ratkaisivat tiettyjä ongelmia . Jos olet kuin minä, Octotree on hyödyllistä.

Octotree näyttää GitHub-koodin puumuodossa. Tällä tavalla voit selata koodirivejä lataamatta lähdetiedostoja.

Octotree näyttää GitHub-koodin puumuodossa

3. HTTPS kaikkialla

HTTPS Everywhere salaa kaikkien tärkeimpien verkkosivujen kanssa vaihtamasi tiedot, vaikka ne eivät käyttäisi HTTPS:ää.

Jos sinut ohjataan sivuille, jotka eivät käytä https:ää, voit olla varma, että viestintäsi verkossa on turvallista.

4. Sivun suorituskykytesti

Sivun suorituskykytesti antaa sinulle tilastoja verkkosivuistasi mittaamalla niiden nopeutta ja lataustehoa. Voit tallentaa kaavion tulokset verrataksesi sitä myöhempien testien kanssa.

Sivun suorituskykytesti

5. Usersnap

Usersnap mahdollistaa verkkosivustojen kuvakaappausten ottamisen ja niihin merkitsemisen lisäämällä merkintäpiirroksia ja kommentteja. Sen mukana tulee myös pikseliviivain, ja se voidaan integroida suoraan erilaisiin projektinhallintatyökaluihin, kuten Slac, Trello ja JIRA.

Tämä luettelo ei ole täydellinen ilman Usersnapia, koska se mahdollistaa tehokkaan palauteprosessin. Se on kuitenkin maksullinen palvelu, jossa on 14 päivän ilmainen kokeilujakso.

Usersnap

6. Poista JavaScript käytöstä

Poista JavaScript käytöstä, kuten nimestä voi päätellä, voit poistaa JavaScriptin käytöstä verkkosivustoilla tai vain tietyillä välilehdillä. Voit muokata sitä niin, että JS-oletustila on päällä/pois ja oletusarvoinen käytöstäpoisto toimialueen/välilehden jne. mukaan.

Poista JavaScript käytöstä

7. Verkkokehittäjien tarkistuslista

Web Developer Checklist -laajennus tarjoaa yleiskatsauksen sivustosi käyttökelpoisuudesta parhaiden suunnittelu- ja kehityskäytäntöjen mukaisesti.

Kuvakkeen napsauttaminen ilmoittaa sivustosi hakukoneoptimoinnista, ystävällisistä URL-osoitteista, faviconista jne. Niiden vieressä on valintamerkit, jotka osoittavat hyväksynnän.

Verkkokehittäjien tarkistuslista

8. React Developer Tools

Reactin suosion näennäisen loputtoman kasvun myötä React-kehittäjiä syntyy melkein joka päivä, ja React-tiimi huolehtii niistä.

React Developer Tools antaa sinulle mahdollisuuden tarkastaa React-puuta sekä sen tilaa, rekvisiitta, hierarkiaa jne. Aktivoidaksesi sen , käynnistä Firefox devtools ja vaihda React-välilehteen.

Vue-kehittäjille on myös versio Vue.js devtoolsin muodossa.

React Developer Tools

9. ColorZilla

ColorZilla on erinomainen työkalu kehittäjille ja graafisille suunnittelijoille värien poimimiseen eri verkkosivuilta.

Se sisältää myös pipetin, gradienttigeneraattorin, palettiselaimen ja värihistorian.

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper avulla voit ottaa kuvakaappauksia verkkosivuista ja tallentaa ne automaattisesti Evernoteentili, josta voit tehdä huomautuksia ja jakaa niitä tiimin jäsenten kanssa.

Evernote Web Clipper

11. Cookie Manager

Cookie Manager on tietoturvatietoinen laajennus, jonka avulla voit tarkastella, lisätä, muokata, poistaa ja etsiä evästeitä missä tahansa domain.

Evästeiden hallinnassa on vielä hienompaa, että voit viedä ja tuoda evästeitä verkkotunnusten välillä.

Cookie Manager

12. Live Editor CSS:lle ja LESS

Live Editor for CSS and LESS mahdollistaa CSS/LESS-koodin kirjoittamisen suoraan selaimeesi. Koodisi tulee voimaan välittömästi ja tallennetaan sivustotasolla selaimesi paikalliseen tallennustilaan.

Sen sivun sisäinen editori sisältää automaattisen täydennyksen, kaunistamisen, linteroinnin jne. Sinun kannattaa tutustua siihen.

CSS:n live-editori

Haluatko jotain luetelluista laajennuksista tai onko sinulla luettelo, jota voimme käyttää? Kommenttiosio on alla.