Chrome ei ole kovin suuri kehittäjätyökaluissa jatämä on yksi syy siihen, miksi Firefox on useimpien kehittäjien pääsivuselain. Niille, jotka käyttävät Chromea, on kuitenkin saatavana monia laajennuksia, jotka auttavat heitä tässä suhteessa. Vastuullinen tarkastaja on Chrome-laajennus, joka voi perustellusti kilpaillaResponsiivinen suunnittelukuva, jonka Mozilla esitteli Firefox 15: ssä. Responsive Inspector on kaksi-yhdessä -työkalu; se näyttää sinulle näyttökoot, joihin verkkosivusto on optimoitu, ja antaa sinun nopeasti vaihtaa toiseen kuin ponnahdusikkunassa. Lisäksi se voi ottaa kuvakaappauksen verkkosivulta, joka on mukautettu mihin tahansa näistä kooista. Verkkosivustoilla, jotka on jo optimoitu tiettyihin näyttökokoihin, voit tarkastella siitä vastuussa olevaa CSS-koodia, mikä tekee siitä loistavan oppimisvälineen myös reagoiville suunnittelukehittäjille.
Responsive Inspector lisää neliön painikkeen viereenURL-palkki, joka avaa ponnahdusikkunan. Laajennus näyttää kaikki näytön koot, joille tällä hetkellä ladattu verkkosivusto on optimoitu palkkien kautta. Näytön koko on kirjoitettu kunkin palkin loppuun, ja pikseliasteikko ylhäällä näyttää erikokoiset näytöt. Siirrä hiiri asteikon yli ja jokaiselle kalibrointiriville ilmestyy ponnahdusikkuna, joka näyttää näytön koon, jota se edustaa. Tässä samassa ponnahdusikkunassa on koon muuttamispainike ja kamerapainike. Edellistä napsauttamalla selainikkunan koko muuttuu automaattisesti siihen leveyteen. Napsauta sitten kamerapainiketta ja ota siitä kuvakaappaus, jos haluat. Kuvakaappaus voidaan tallentaa paikalliseen asemaan tai ladata Behance.netiin. Jos tunnet tarvetta hienommalle pikseliasteikolle, suurenna sitä napsauttamalla zoomaus-painiketta.
Jos haluat tarkastella katseluvaihtoehtojen koodaamiseen käytettyä CSS: ää,vie hiiri hiiren osoittimen päälle, joka edustaa näytön kokoa, johon verkkosivusto on optimoitu, ja {} -painike näkyy lopussa. Napsauta sitä nähdäksesi CSS-koodin uudessa välilehdessä. Koodia ei voi muokata suoraan, mutta voit kopioida sen tai tehdä tarkistustyökalun muutosten tekemiseen. Responsive Inspector jäljittelee reagoivaa suunnittelunäkymää Firefoxissa melko hyvin; itse asiassa ei olisi väärin sanoa, että laajennus on leikkaus työkalun yläpuolelle. Missä Firefox antaa sinulle näytön koon esiasetukset, Responsive Inspector antaa sinulle koko asteikon ja paljon vapautta, ja siellä on kuvakaappaus-työkalu. Esiasetukset tekisivät Responsive Inspectorista paljon hyödyllisemmän, ja ne tulisi lisätä. Vaikka laajennus toimii myös ilman niitä, se toimii poikkeuksellisen hyvin.
Asenna Responsive Inspector Chrome Web Storesta
Kommentit