Home-theater-designers
Chrome DevTools je zásadným prínosom pre vývojárov. Zatiaľ čo iné prehliadače ponúkajú celkom praktické nástroje na riešenie problémov, Chrome DevTools si vďaka multifunkčnému rozhraniu a popularite stojí za pozornosť.
Chrome je pre vývojárov najobľúbenejším prehliadačom vďaka svojej výkonnej sade nástrojov na ladenie. Používanie prehliadača Chrome DevTools je jednoduché, ale musíte pochopiť, ako funguje, aby ste ho naplno využili.
Ako fungujú Nástroje pre vývojárov Chrome
Chrome DevTools vám umožňuje riešiť problémy na webe pomocou chybovej konzoly a ďalších nástrojov na ladenie a monitorovanie. Používanie DevTools odhaľuje medzery v frontende a umožňuje vám monitorovať, ako sa váš web zobrazuje na mobilných zariadeniach a tabletoch.
Pomocou DevTools môžete vykonávať úpravy kódu webovej stránky v reálnom čase, ako je JavaScript, HTML a CSS, a získať okamžité výsledky svojich zmien.
Zmeny, ktoré vykonáte prostredníctvom DevTools, neovplyvnia webovú stránku natrvalo. Iba dočasne zobrazujú očakávaný výsledok, ako keby ste ich použili na skutočný zdrojový kód. To vám umožní nájsť spôsoby, ako sa načítať vaše webové stránky oveľa rýchlejšie, a tiež bude jednoduchšie odstrániť chyby.
Ako získať prístup k nástrojom Chrome DevTools
K nástroju Chrome DevTools máte prístup niekoľkými spôsobmi. Ak chcete otvoriť nástroje pre vývojárov metódou skratiek v systéme Mac OS, stlačte Cmd + Opt + I . Ak používate operačný systém Windows, kliknite na Ctrl + Shift + I. klávesy na vašej klávesnici.
Prípadne sa k nástrojom pre vývojárov prehliadača Chrome dostanete kliknutím na tri bodky v pravom hornom rohu obrazovky. Vydajte sa na Viac nástrojov a vyberte Nástroje pre vývojárov . Ďalšou možnosťou je kliknúť pravým tlačidlom myši na webovú stránku a kliknúť na ikonu Skontrolovať možnosť.
Na diagnostiku webových stránok používajte Nástroje pre vývojárov Chrome
Chrome DevTools ponúka niekoľko spôsobov, ako vyladiť webovú stránku a riešiť problémy s ňou. Pozrime sa na niektoré zo spôsobov, akými vám DevTools môže pomôcť.
Pozrite sa, ako vyzerá váš web na smartfóne
Keď prehliadač Chrome prepnete do režimu vývojára, vykreslí polovicu vašej webovej stránky. To vám však neposkytne skutočný pohľad na to, ako by to vyzeralo na smartfóne alebo tablete.
Našťastie okrem nastavenia veľkosti obrazovky webovej stránky vám prehliadač Chrome DevTools umožňuje prepínať aj medzi rôznymi typmi a verziami mobilnej obrazovky.
Ak chcete získať prístup k tejto možnosti, prepnite na Skontrolovať režim. Ďalej kliknite na Reaguje v rozbaľovacom zozname v ľavom hornom rohu DevTools a vyberte preferované mobilné zariadenie. Webová stránka sa potom vykreslí a upraví tak, aby zodpovedala veľkosti mobilného zariadenia, ktoré ste vybrali.
prečo sa môj iphone nezobrazuje na iTunes
Prístup k zdrojovým súborom webovej stránky
K súborom, ktoré tvoria webovú stránku, máte prístup prostredníctvom prehliadača Chrome DevTools. K týmto súborom sa dostanete kliknutím na Zdroje možnosť v hornej časti ponuky DevTools. To odhalí systém súborov na webe a umožní vám tiež úpravy.
Môžete tiež vyhľadať zdrojové súbory, čo môže byť užitočné, keď pracujete s webovou stránkou, ktorá má veľa zdrojov. Ak chcete vyhľadať zdrojový súbor prostredníctvom DevTools, kliknite na Vyhľadávanie možnosť tesne nad konzolou.
Ak však nemôžete nájsť Vyhľadávanie lepšou alternatívou je použiť klávesové skratky. V systéme Mac OS stlačte Cmd + Opt + F klávesy na vyhľadanie zdrojového súboru. Ak používate operačný systém Windows, stlačte Ctrl + Shift + F kľúč na prístup k panelu vyhľadávania zdrojových súborov.
Vykonávajte živé úpravy webovej stránky
Jedným z hlavných účelov používania DevTools je vykonať okamžitá falošná úprava prvkov na webovej stránke . Keď prejdete na nástroje pre vývojárov, môžete upravovať obsah HTML webových stránok kliknutím na ikonu Prvky možnosť. Potom kliknite pravým tlačidlom myši na ľubovoľný bod, na ktorý chcete použiť zmeny, v editore kódu a vyberte Upraviť ako HTML .
Ak chcete upraviť vlastnosti CSS, ktoré nie sú vložené, vyberte Zdroje . Ďalej vyberte súbor CSS, ktorý chcete upraviť. Ak chcete vykonať živú úpravu, umiestnite kurzor na požadovaný riadok v konzole kódu. Vďaka tomu získate okamžitú spätnú väzbu o všetkých zmenách štýlu, ktoré na webovú stránku použijete.
Všimnite si toho, že keď upravujete stránku prostredníctvom DevTools, opätovným načítaním stránky vo vašom prehliadači sa vráti do pôvodného stavu a úprava je viditeľná iba pre vás. Úpravy prostredníctvom DevTools neovplyvňujú plynulý chod ani používanie tejto webovej stránky inými používateľmi.
Ladenie kódu JavaScript pomocou konzoly DevTools Console
Jeden z najlepších spôsobov, ako ladiť JavaScript, je použiť nástroje pre vývojárov prehliadača Chrome. Poskytuje vám priamu správu o neplatných skriptoch a presné umiestnenie chyby.
Je dobrým zvykom mať pri vytváraní webových stránok s JavaScriptom vždy otvorený nástroj DevTools. Napríklad spustenie súboru console.log () príkaz JavaScript v súbore pokynov zobrazí výsledok tohto denníka v konzole DevTools, ak sa program úspešne spustí.
V predvolenom nastavení konzola hlási všetky problémy s jazykom JavaScript na vašom webe. Konzolu nájdete v spodnej časti DevTools alebo k nej získate prístup kliknutím na Konzola možnosť v hornej časti okna prehliadača Chrome DevTools.
Monitorujte načítanie zdrojov z databázy
Okrem ladenia JavaScriptu vám konzola môže poskytnúť aj podrobnosti o zdrojoch, ktoré sa z databázy webovej stránky nenačítavajú správne.
Aj keď to nie je vždy najlepší spôsob, ako ladiť problémy s backendom, stále vám hovorí, ktoré zdroje vracajú súbor a 404 chyba po spustení databázového dotazu týchto prvkov.
Súvisiace: Bežné chyby webových stránok a ich význam
Zmeňte orientáciu nástrojov pre vývojárov prehliadača Chrome
Ak chcete zmeniť pozíciu vývojárskych nástrojov prehliadača Chrome, kliknite na tri bodky ponuky v nástrojoch DevTools (nie na hlavné v prehliadači). Potom vyberte požadovanú pozíciu z Strana doku možnosť.
Nainštalujte si rozšírenia Chrome DevTools
Môžete si tiež nainštalovať rozšírenia špecifické pre jazyk alebo rámec, ktoré fungujú s nástrojom Chrome DevTools. Inštalácia týchto rozšírení vám umožní efektívnejšie ladiť vašu webovú stránku.
V Chrome máte prístup k zoznamu dostupných rozšírení pre Chrome DevTools Odporúčané rozšírenia DevTools galéria.
Skontrolujte bezpečnostné problémy na webových stránkach
Chrome DevTools vám umožňuje posúdiť, ako je váš web bezpečný, na základe parametrov, ako je napríklad dostupnosť certifikáty zabezpečenia webu a ako je okrem iného zabezpečené pripojenie. Ak chcete skontrolovať, či je váš web bezpečný, kliknite na ikonu Zabezpečenie možnosť v hornej časti okna DevTools.
The Zabezpečenie karta vám ponúka prehľad podrobností o zabezpečení vašich webových stránok a uvádza všetky potenciálne hrozby.
Vykonajte audit svojho webu
Chrome DevTools má funkciu, ktorá vám umožňuje kontrolovať celkový výkon vášho webu na základe konkrétnych parametrov.
Ak chcete získať prístup k tejto funkcii, zvoľte Maják možnosť v hornej časti okna DevTools. Ďalej vyberte parametre, ktoré chcete skontrolovať, a potom začiarknite políčko Mobilné alebo Pracovná plocha možnosti, ako zistiť, ako si vaša webová stránka vedie na rôznych platformách.
Ďalej kliknite na Generovať správu na spustenie analýzy vašej webovej stránky na základe parametrov, ktoré ste vybrali predtým.
Výkonnosť spustenia alebo načítania webovej stránky môžete tiež posúdiť kliknutím na Výkon možnosť. Test spustíte kliknutím na ikonu vedľa Kliknite na tlačidlo záznamu možnosť vykonať analýzu za behu. Prípadne môžete kliknutím na tlačidlo znova načítať pod ním vyhodnotiť výkonnosť pri načítaní. Kliknite na Prestaň na zastavenie analyzátora a zobrazenie výsledkov.
Využite výhody Chrome DevTools
V závislosti od toho, na čo to potrebujete, vám Chrome DevTools umožní viac než len jednoduché ladenie webových stránok. Našťastie sa DevTools ľahko používa pre programátorov všetkých úrovní znalostí. Môžete sa dokonca naučiť niektoré základy vývoja frontendu webových stránok vyhľadaním zdrojového kódu webových stránok, ktoré navštevujete.
Windows 10 nemá prístup na internet, ale je pripojený
Môžete tiež objaviť niektoré ďalšie možnosti, o ktorých sme v tomto článku nehovorili. Neváhajte sa teda pohrať s dostupnými funkciami. Vylepšenie týchto funkcií navyše trochu nepoškodí webovú stránku.
zdieľam zdieľam Tweet E -mail Ako používať Chrome OS na Raspberry PiNemôžete si dovoliť Chromebook? Hľadáte alternatívu k Raspbian? Tu je postup, ako nainštalovať verziu systému Chrome OS na váš Raspberry Pi.
Čítajte ďalej Súvisiace témy- Internet
- Programovanie
- HTML
- Vývoj webových aplikácií
- JavaScript
- Google Chrome
Idowu je zanietený pre čokoľvek, čo sa týka inteligentných technológií a produktivity. Vo svojom voľnom čase sa hrá s kódovaním a keď sa nudí, prejde na šachovnicu, ale tiež rád, keď sa raz za čas odtrhne od rutiny. Jeho vášeň ukazovať ľuďom cestu okolo moderných technológií ho motivuje písať viac.
Viac od Idowu Omisolaprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber