Üksikasjalik CSS inspektor igal saidil, kus on Chrome'i CSSPeeper

Regulaarne Chrome DevToolsi paneel on hull võimas. See võimaldab igaühel sukelduda sügavale mis tahes lehele, et vajadusel uurida saidi paigutust, CSS-i ja isegi HTTP-päiseid.

DevTools CSS inspektoriga saate palju teha. Kuid sellel pole selget GUI-paneeli ja see on üks asi, mida iga arendaja armastaks.

Vaadake CSSPeeperit, tasuta Chrome'i laiendust, mis lisab selle GUI inspektori oma brauserisse. See võimaldab teil uurida ükskõik millise lehe CSS-i omadusi, kuigi see on praegu ehitatud ainult Chrome'i jaoks.

Kui olete lihtsalt paigaldanud külastage veebilehte ja klõpsake laienduse peamist nuppu Chrome'i lisandmoodulite riba. Veebilehele ilmub uus inspektori aken, kus on üksikasjad iga põhielemendi kohta.

Saidi sirvimisel saate klõpsata mis tahes elemendil, mida näete punktiirjoonega. See võib hõlmata nuppe, leheküljeosasid, päiseid, navigeerimiskirjeid ja nimetada seda.

Sealt saate kogu inspektori, kus on üksikasjad tüpograafia, värvivalikute ja fondi stiilide kohta. See on suurepärane võimalus tõmba stiile otse veebilehelt ilma CSS-koodi sisestamiseta ise.

CSSPeeper võimaldab isegi sulle vali sellega seotud värvid sisseehitatud värvivalijaga ja värviskeemi generaator. Saate eksportida pilte lehekülgedelt, luua oma värvilahendusi ja rakendage neid oma makettidesse Photoshop või Sketch abil.

Ma peamiselt soovitada seda laiendust disaineritele arendajate asemel, kuna see on palju disainer-sõbralikum plugin, mis tõmbab toores CSS-i ja muudab koodi kergesti loetavateks andmehulkadeks.

Kuid see plugin võib aidata ka arendajatel! See on tõesti a võimas saidi kontrollimise vahend kõigi CSS-ide jaoks.

Vaadake CSSPeeperi kodulehte, et saada rohkem teavet selle kohta, mida ta saab teha. Peale selle sisaldab link ka linki Chrome'i poodile, et saaksite laienduse tasuta paigaldada ja testimise ajaks välja võtta.