Sprievodca webovými nástrojmi spoločnosti Google

Strana 1 z 5: Zobraziť a zmeniť HTML, CSS a JS

Big G, alias Google, poskytuje vývojárom množstvo nástrojov určených na uľahčenie webového dizajnu. V tomto článku si ukážeme niektoré z najlepších nástrojov Google, ktoré sú v nich k dispozícii, a ukážeme vám, ako ich používať vo svojom pracovnom postupe pri vývoji a vývoji webových stránok.

Pokrývame celý rad rôznych nástroje na návrh webu tu, takže sme obsah rozdelili na stránky, aby sme uľahčili navigáciu. Pomocou rozbaľovacej ponuky vyššie prejdite na sekciu, ktorá vás zaujíma.

rozdiel medzi ceruzkou číslo 1 a 2

Pokiaľ nebudú webové stránky miniinformované, môže si ich obsah pozrieť ktokoľvek. Vďaka nástrojom DevTools prehliadača Chrome je to jednoduché - na tejto stránke vám ukážeme, ako zobraziť a zmeniť HTML, CSS a JavaScript. On strana 2 , sa bližšie pozrieme na to, ako pomocou debuggeru Google rýchlo a ľahko opraviť chyby v kódovaní. Strana 3 kladie dôraz na režim zariadenia Google, ktorý môžete použiť na testovanie mobilných verzií svojich stránok prostredníctvom stolného počítača. On strana 4 predstavujeme základy, ktoré musíte mať na pamäti, aby ste mohli začať implementovať princípy materiálového dizajnu do svojich návrhov. Nakoniec strana 5 sa zameriava na Progresívne webové aplikácie, najnovšiu veľkú vec v priemysle webdizajnu.



Zobraziť a zmeniť HTML, CSS a JS

Pokiaľ nebol kód webových stránok minifikovaný, môže si ho zobraziť ktokoľvek pomocou vývojárskych nástrojov prehliadača Chrome. Najskôr skontrolujte verziu prehliadača Chrome - nasledujúce kroky fungujú na verzii 70.0.3538.67 bežiacej na 64-bitovej pracovnej stanici Ubuntu. Ďalej otvorte ponuku hamburgerov a kliknite na Ďalšie nástroje> Nástroje pre vývojárov.

Spustite Google

Spustite Nástroje pre vývojárov a mala by sa vám zobraziť obrazovka podobná tejto [kliknite na ikonu v pravom hornom rohu pre zväčšenie]

Prehliadač odpovie otvorením tably na ľavej strane obrazovky. V prvom kroku by mala byť zmenená jeho veľkosť - prehľadávač predvolene nepriradí dostatok nehnuteľností na obrazovke. Po dokončení obrazovka vyzerá podobne ako obrazovka znázornená na obrázku vyššie.

Nástroj pre vývojárov sa predvolene spúšťa so načítanou kartou Konzola. Obsahuje výstup emitovaný vyvolaním funkcie protokolovania konzoly. Tiež sa tam zobrazia chyby vykreslenia - ak nájdete červené čiary, v značení alebo kóde stránky je niečo v poriadku. Kliknutím na malú „URL“ na pravej strane sa dostanete na riadok, ktorý spôsobil zobrazenie správy.

Skontrolujte označenie

Ak sa váš záujem zameriava na označovanie, použite kartu Prvky zobrazenú na obrázku. Ukazuje označenie, ktoré aktuálne prehliadač vykresľuje. Môžete ho rozšíriť a zhutniť spôsobom podobným pohľadu do stromu - skryte nepotrebné prvky, aby ste zabránili senzorickému preťaženiu.

The účel záložky je zobrazenie CSS štruktúry. Widgety „zhromažďujú“ CSS z rôznych zdrojov, ktoré sú zobrazené prehľadne a vedľa seba. V prípade príkladu zobrazeného na obrázku vidíme, že štýly boli poskytované tak zo značky „div“, ako aj zo „hlavného“ označenia stránky.

Chrome vám umožňuje upravovať väčšinu atribútov za behu. Dvakrát kliknite na ktorýkoľvek z čiernych textov, aby sa menovka zmenila na editor, potom zadajte novo požadovanú hodnotu a stlačte kláves Return. Vykresľovač tieto zmeny prevezme a použije ich za behu na DOM. To je obzvlášť užitočné pri pokuse o optimalizáciu farieb alebo problémov s umiestnením; opakované načítanie stránky, aby sa zobrazili ukážky zmien, sa stáva únavnou.

Google

Žlté pozadie naznačuje, že obsah okna je filtrovaný [kliknutím na ikonu v pravom hornom rohu obrázok zväčšíte]

Nakoniec sa pozrite na textové pole v hornej časti tably. Umožňuje vám filtrovať zobrazené položky značiek: napríklad zadaním príkazu „mdc“ obmedzíte zobrazenie na všetky štýly zdedené z knižnice Material Design použitej ďalej v tomto článku. Keď je filter aktívny, objaví sa žlté pozadie podobným spôsobom, ako je znázornené vyššie.

Vykonajte podrobnú analýzu

V moderných webových prehliadačoch sa DOM neobmedzuje iba na „statické“ problémy s prezentáciou. Tiež riadi tok a umiestňovanie udalostí. Prepnutím na kartu Vypočítané zobrazíte zoznam „rozmerových“ vlastností. To je neuveriteľne užitočné pri presnom usporiadaní widgetov na obrazovke.

Presun na kartu poslucháčov udalostí poskytuje prehľad tokov udalostí. Pomocou tejto funkcie môžete rýchlo odstrániť problémy spojené s interakciou používateľa: ak sa udalosť nespustí, začnite skontrolovaním pripojení obsluhy udalostí.

Nakoniec okno Vlastnosti umožňuje pozrieť sa na atribúty uložené vo vnútri jednotlivých uzlov DOM. Ak ste niekedy strávili veľa času hľadaním kódu manipulujúceho s DOM, hodnota je jasná.

Ďalšia stránka: Ako používať ladiaci program spoločnosti Google

najlepšie kúpiť povrch pro 4 čierny piatok
  • 1
  • dva
  • 3
  • 4
  • 5

Aktuálna stránka: Zobraziť a zmeniť HTML, CSS a JS

Ďalšia strana Pomocou ladiaceho programu