Ako používať vývojárske nástroje prehliadača Chrome na testovanie rozložení

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

ako vytvoriť logo youtube s photoshopom

Už si tam bol. Po niekoľkých dlhých dňoch práce sedíte so zákazníkom, ktorý ukazuje na farbu hranice a pýta sa vás, či by to mohlo byť o odtieň tmavšie alebo možno trochu viac modré? Vykonáte neurčité pokyny a vrátite sa späť k rysovacej doske. Alebo ste možno frontendový vývojár a rozloženie stránky nevyzerá úplne správne so skutočnými živými údajmi, ktoré si prezeráte. Ako zistíte, kde je problém? Možno sa vrátite ku kódu, vykonáte zmeny, uložíte, obnovíte stránku, nahráte na svoj testovací server a znova ich otestujete pomocou týchto údajov.

Potrebujete nástroj na úpravu CSS a HTML, ktorý vám poskytne okamžité ukážky a funguje priamo v prostredí prehliadača. Chrome poskytuje vývojárom veľké množstvo nástrojov a niektoré z nich sú navrhnuté tak, aby riešili také problémy spojené s dizajnom. V tomto výučbe si prečítame niektoré z funkcií tejto sady úžasne užitočných nástrojov.



Ak chcete použiť Nástroje pre vývojárov Chrome, otvorte svoj web v prehliadači Chrome a vpravo hore kliknite na ikonu hamburgeru. Prehliadač Chrome skryje túto funkciu v časti Ďalšie nástroje> Nástroje pre vývojárov. Kliknutím na tento odkaz otvoríte panel v bočnej alebo dolnej časti okna. Môžete tiež použiť alt + cmd + I na jeho otvorenie alebo kliknúť pravým tlačidlom myši na ľubovoľný prvok na stránke a v ponuke zvoliť možnosť „Skontrolovať prvok“.

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

Tu vidíte hlavné tably, ktoré vám umožňujú upravovať prvky HTML a štýly CSS

Keď prvýkrát otvoríte Dev Tools, môže to vyzerať preplnene, ale budeme pracovať s niekoľkými konkrétnymi tabuľami. Panel HTML obsahuje zdrojový kód HTML. Priamo na tomto paneli môžete upravovať, presúvať a odstraňovať prvky HTML. Panel štýlov obsahuje všetky informácie týkajúce sa štýlu.

Štýly úprav

Tabla štýlov obsahuje všetky štýly CSS, ktoré sa vzťahujú na prvok, ktorý je momentálne vybratý. Ak ste otvorili Nástroje pre vývojárov kliknutím pravým tlačidlom myši na prvok, tento prvok sa vyberie. Ak ste ho otvorili iným spôsobom, vyberie sa značka tela.

Tu môžete vidieť, aké štýly boli na váš prvok použité odkiaľkoľvek, čo má na tento prvok vplyv. Prezrite si uvedené pravidlá štýlu (rolovanie úplne dole). Tu budete dodržiavať niekoľko dôležitých bodov.

Poradie žiadosti

Pravidlá štýlov, ktoré sledujete, sú zoradené na základe špecifickosti týchto štýlov. To je nesmierne užitočné, pretože vidíte, ktoré pravidlá majú prednosť pred ostatnými. Vo väčšine prípadov riešenia problémov, ak sa váš štýl nepoužíva, musíte sa pozrieť sem a zistiť, či nie je prepísaný iným pravidlom.

Zberač farieb

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

Prejdite myšou mimo výber farieb, aby sa zhodoval s akýmkoľvek odtieňom na stránke

Kedykoľvek sa jedná o farbu, na paneli štýlu sa zobrazí malé políčko s touto farbou. Kliknutím na políčko otvoríte výber farieb, pomocou ktorého môžete upraviť aj nepriehľadnosť. Ak chcete získať ďalší faktor, posuňte myš mimo výberu farieb. Uvidíte, že váš ukazovateľ dokáže v prehliadači zvoliť ľubovoľnú farbu, čo uľahčuje zladenie farieb v dizajne.

Povoliť zakázať

Keď umiestnite kurzor myši na skupiny pravidiel, uvidíte, že Chrome zobrazuje začiarkavacie políčka vedľa štýlov. Je možné kliknutím na tieto štýly povoliť alebo zakázať. Zistíte, že je to oveľa jednoduchšie ako odstrániť štýl a potom sa pokúsiť spomenúť si, čo to bolo, keď ho chcete znova povoliť.

Upravujte štýly na mieste

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

Všetky použité štýly môžete zobraziť a upraviť ich priamo vo svojom prehliadači

Nástroje Dev Dev majú úpravy priamo na mieste, čo znamená, že môžete kliknúť na ľubovoľné pravidlo a zmení sa na pole so zvýrazneným obsahom. Potom môžete upraviť ktorúkoľvek časť. Len čo urobíte zmenu v čísle alebo pravidle, výsledky sa zobrazia na stránke.

Pridajte nové pravidlá

Nové sady pravidiel môžete vytvoriť kliknutím na ikonu „plus“ (+) v ľavom hornom rohu tably štýlov. Týmto sa vytvorí nová sada pravidiel s čo najkonkrétnejším selektorom. Potom môžete pridať pravidlá alebo zmeniť samotný selektor.

Mapa k zdroju

U každej skupiny pravidiel sa v pravom hornom rohu zobrazí názov súboru (napr. „Base.css“). Dozviete sa, kde je dané pravidlo pôvodne definované, aby ste vedeli, kde môžete vykonať zmeny. Tieto názvy súborov sú odkazmi, ktoré vás prevedú na samotný súbor v rámci nástrojov pre vývojárov, kde môžete upraviť pravidlá.

Tieto nástroje poskytujú vynikajúci prehľad a informácie, ale vy ste skutočne tu, aby ste upravili tieto štýly a videli svoje zmeny naživo. Existuje niekoľko spôsobov, ako to môžete urobiť.

Krabicový model

Po otvorení tably štýlov uvidíte prvok predstavovaný rámčekom, ktorý má pre všetky strany zobrazené informácie o okraji, ohraničení a výplni. Toto vizuálne znázornenie môžete skontrolovať, aby ste sa ubezpečili, že vaše medzery sú presné. Ak chcete tieto hodnoty zmeniť, kliknite dvakrát.

Zobraziť zdedené vlastnosti

Hneď pod vizualizáciou modelu poľa uvidíte sekciu, ktorá obsahuje zoznam všetkých vypočítaných pravidiel pre tento prvok. Kliknutím na začiarkavacie políčko „Zobraziť zdedené vlastnosti“ nastavíte na paneli štýlov pravidlá, ktoré nie sú nastavené, ale dedia sa z predvolených nastavení. To môže byť nevyhnutné pre pochopenie, odkiaľ váš prvok v skutočnosti berie svoje hodnoty.

Úpravy kódu HTML

Doteraz sme sa pozerali iba na tablu so štýlmi. Panel HTML však nie je iba statický zdrojový kód. Je to v skutočnosti upraviteľné na mieste, rovnako ako pravidlá štýlu. Niekedy pridanie alebo zmena CSS nestačí a musíte zmeniť štruktúru rozloženia stránky alebo pridať názvy tried k určitým prvkom. Existuje niekoľko šikovných zmien, ktoré môžete vykonať v existujúcich prvkoch na stránke.

ako čerpať vodu ceruzkou

Vyberte prvky

Kliknutím na štruktúru HTML kódu môžete prvky otvárať a vyberať, ale rýchlejšou metódou je kliknutie na ikonu lupy v ľavom hornom rohu a zapnutie režimu kontroly. Potom môžete umiestniť kurzor myši na prvky, aby ste ich zvýraznili, potom na ne kliknúť a zobrazia sa na table HTML.

Presun alebo odstránenie prvkov

Ktorýkoľvek z prvkov môžete presunúť na ľubovoľné iné miesto na stránke. Ak chcete prvok odstrániť, jednoducho ho vyberte a stlačte kláves Odstrániť alebo kliknite pravým tlačidlom myši a vyberte príkaz Odstrániť. Ak niečo odstránite omylom, môžete to vrátiť pomocou štandardných príkazov na vrátenie.

Upravte HTML

Ak máte v kóde HTML prvku vykonať veľké množstvo úprav, môžete jednoducho kliknúť pravým tlačidlom myši na prvok v podokne HTML a zvoliť možnosť „Upraviť ako HTML“. Takto získate úplnú slobodu v spôsobe úpravy kódu HTML.

Silové štáty

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

Pomocou tably HTML môžete vynútiť stavy, ako napríklad umiestnenie kurzora myši alebo aktívne. Jednoducho kliknite pravým tlačidlom myši na prvok a vyberte možnosť „Vynútiť stav prvku“.

Jednou z najužitočnejších funkcií panelov HTML a štýlov je to, že môžete vynútiť stavy, ako napríklad vznášanie alebo aktívny. To má zmysel, pretože napríklad štýly vznášania sa v sekcii štýlov nezobrazia, pokiaľ element nie je do tohto stavu vynútený.

Na table HTML kliknite pravým tlačidlom myši na prvok a vyberte možnosť „Vynútiť stav prvku“. Oranžová bodka vľavo označuje, že zobrazuje stav, a pravidlá štýlu sa aktualizujú tak, aby zobrazovali príslušné pravidlá pre tento stav.

Emulácia mobilných zariadení

Webové stránky so živým kódom pomocou nástrojov pre vývojárov Chrome

Existujú nástroje, ktoré vám umožnia spoznať svoj dizajn prostredníctvom výrezu mobilného zariadenia

Ešte prednedávnom ste mohli pracovať so svojím CSS / HTML a nazvať ho dňom, ale s rozširovaním rôznych typov zariadení dostupných pre vaše publikum musíte zabezpečiť, aby bolo možné váš web zobraziť všade. Na webových stránkach pripravených pre mobilné zariadenia tu nemám priestor venovať sa podrobnostiam, ale váš priateľský nástroj Dev Tools má skvelý nástroj, ktorý vám vo väčšine prípadov pomôže otestovať vaše webové stránky.

Režim zariadenia

Naľavo od karty „Prvky“ v hornej časti ponuky Nástroje pre vývojárov je nenápadná ikona, ktorá zobrazuje mobilný telefón. Ak na ňu kliknete, uvidíte, že sa vaše bežné zobrazenie webových stránok zmenilo na oveľa menšie zobrazenie (táto zmena sa môže prejaviť až po obnovení). Teraz ste v režime zariadenia.

ako pridať písma do photoshopu cs5

Pomocou selektora zariadení v hornej časti môžete zmeniť, ktoré zariadenie sa emuluje. Môžete tiež prepnúť orientáciu z ponuky zariadenia alebo zadať vlastné veľkosti. Jednou z dôležitých úvah je, že vaša šírka okna by mala byť upravená tak, aby odrážala zariadenie, čo vám okamžite poskytne informácie o vašich štýloch reagovania.

Možno si myslíte, že prosté zúženie okna vášho prehliadača by mohlo mať tiež tento efekt, ale režim zariadenia robí ešte zopár ďalších vecí. Tu sa zmenia informácie o užívateľskom agentovi a hustota pixelov, aby odrážali emulované zariadenie. Vaše efekty umiestnenia kurzora myši prestanú fungovať, pretože vstupy mobilných zariadení nemajú kurzor myši.

K dispozícii však budete mať emulácie dotykovej akcie a posuvné lišty pre mobilné zariadenia. To všetko vám pomôže upraviť CSS alebo pridať podmienené CSS vhodné pre mobilné zariadenia. Najlepšie na tom je, že si na to nemusíte požičiavať veľa telefónov a tabletov!

Záver

Pozreli sme sa zatiaľ iba na dve tabule a už sme sa zaoberali mnohými funkciami Nástrojov pre vývojárov Chrome. Som si istý, že myslíte na časy, keď ste v minulosti mohli použiť tieto techniky alebo zvážiť ich potenciál pre budúce projekty. Odporúčam tieto nástroje používať každý deň, aby ste ušetrili čas a vyskúšali si nápady, skôr ako sa rozhodnete napísať akýkoľvek kód.

Môžete zvoliť dva prístupy, ktoré vám pomôžu zlepšiť prácu s týmito nástrojmi. Ak začínate nový projekt, najskôr kódujte kód HTML a potom sa jednoducho pohrajte s pravidlami a prvým konceptom kódu HTML prostredníctvom nástrojov pre vývojárov. Uvidíte, že okamžité uplatnenie vašich zmien ušetrí veľa času pri zdokonaľovaní vášho projektu.

Naopak, ak niečo opravujete alebo vykonávate úpravy v existujúcom projekte, skôr ako prejdete kódom, pozrite sa na použité štýly a syntax HTML, aby ste zistili, či môžete najskôr vyriešiť problémy s nástrojmi Dev Tools. Potom vyskúšajte svoje pôvodné inštinkty možných riešení. Uvidíte, že najčastejšie vás to dovedie k správnym opravám.

Jedna posledná vec: svojich priateľov môžete celkom ľahko vyprovokovať snímkami obrazovky z renomovaných online zdrojov. Nechám na vás, aby ste zistili, ako môžu Dev Tools slúžiť tomuto zábavnému účelu; ale prosím používaj zodpovedne.

Režim zariadenia Chrome Dev Tools má viac funkcií, ako by sme tu mohli pokryť. Toto päťminútové video od spoločnosti Google sa dostane do niektorých detailov.

Slová : Caner Uguz

Caner Uguz je vývojár v odbore Centrum pre otvorenú vedu . Tento článok bol pôvodne publikovaný v čísle 273 sieťový časopis .

Páčilo sa vám to? Prečítajte si tieto!