Chromen reagoiva tarkastaja on loistava oppimisväline työtä reagoivassa suunnittelussa

Chrome ei ole kovin suuri kehittäjätyökaluissa, ja se 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 kilpailla Mozillan käyttöön ottamaa reagoivaa suunnittelunäkymää Firefox 15. Responsive Inspector on kaksi-yhdessä-työkalu; se näyttää sinulle näytökoot, joihin verkkosivusto on optimoitu, ja antaa sinun nopeasti vaihtaa toiseen kuin ponnahdusikkunassa. Lisäksi se voi ottaa kuvakaappauksia verkkosivustolle, 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.

Responsiivinen tarkastaja lisää neliöpainikkeen vieressä olevan URL-palkin viereen, joka avaa ponnahdusikkunan. Laajennus näyttää kaikki näyttö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 paikalliselle asemalle tai ladata Behance.net-verkkoon. Jos tunnet tarvetta hienommalle pikseliasteikolle, suurenna sitä napsauttamalla zoomaus-painiketta.

Katsellaksesi CSS-koodia, jota käytetään katseluvaihtoehtojen koodaamiseen, siirrä hiiren osoitin jonkin palkin päälle, joka edustaa näytön kokoa, johon verkkosivusto on optimoitu, ja näet {} -painikkeen 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