Home-theater-designers
Chrome DevTools je základním přínosem pro vývojáře. Zatímco jiné prohlížeče nabízejí velmi praktické nástroje pro řešení potíží, Chrome DevTools si díky multifunkčnímu rozhraní a oblíbenosti stojí za pozornost.
Chrome je pro vývojáře nejpopulárnějším prohlížečem díky své výkonné sadě nástrojů pro ladění. Používání Chrome DevTools je snadné, ale musíte pochopit, jak funguje, abyste z něj dostali maximum.
Jak fungují nástroje pro vývojáře Chrome
Chrome DevTools vám umožňuje řešit problémy na webu prostřednictvím jeho chybové konzoly a dalších nástrojů pro ladění a monitorování. Používání DevTools odhaluje mezery ve frontendu a umožňuje vám sledovat, jak se váš web zobrazuje na mobilních zařízeních a tabletech.
S DevTools můžete provádět úpravy kódu webu v reálném čase, jako je JavaScript, HTML a CSS, a získat okamžité výsledky svých změn.
Změny provedené prostřednictvím DevTools neovlivní web trvale. Pouze dočasně zobrazují očekávaný výsledek, jako byste je použili na skutečný zdrojový kód. To vám umožní zjistit, jak se vaše webové stránky načítají mnohem rychleji, a také snáze odstraníte chyby.
Jak přistupovat k Chrome DevTools
K aplikaci Chrome DevTools můžete přistupovat několika způsoby. Chcete -li otevřít nástroje pro vývojáře pomocí metody zkratek v systému Mac OS, stiskněte Cmd + Opt + I . Pokud používáte operační systém Windows, stiskněte Ctrl + Shift + I klávesy na vaší klávesnici.
Případně se k nástrojům pro vývojáře Chrome dostanete kliknutím na tři tečky v pravém horním rohu obrazovky. Vydejte se na Více nástrojů a vyberte Vývojářské nástroje . Další možností je kliknout pravým tlačítkem na webovou stránku a kliknout na Kontrolovat volba.
Diagnostika webových stránek pomocí nástrojů pro vývojáře Chrome
Chrome DevTools nabízí několik způsobů vylepšení webové stránky a řešení potíží s ní. Pojďme se podívat na některé ze způsobů, jak vám DevTools může pomoci.
Podívejte se, jak vypadá váš web na chytrém telefonu
Jakmile přepnete prohlížeč Chrome do vývojářského režimu, vykreslí poloviční verzi vaší webové stránky. To vám však neposkytne skutečný pohled na to, jak by to vypadalo na smartphonu nebo tabletu.
Naštěstí kromě nastavení velikosti obrazovky webové stránky umožňuje Chrome DevTools přepínat také mezi různými typy a verzemi mobilních obrazovek.
Chcete -li se k této možnosti dostat, přepněte na Kontrolovat režimu. Dále klikněte na Citlivý rozevíracího seznamu v levém horním rohu DevTools a vyberte preferované mobilní zařízení. Webová stránka se poté vykreslí a upraví tak, aby odpovídala velikosti mobilního zařízení, které jste vybrali.
kmode výjimka není zpracována vypnutí systému Windows 10
Přístup ke zdrojovým souborům webové stránky
K souborům, které tvoří webovou stránku, můžete přistupovat pomocí Chrome DevTools. K těmto souborům se dostanete kliknutím na Prameny možnost v horní části nabídky DevTools. Tím se odhalí systém souborů na webu a také vám umožní úpravy.
Můžete také vyhledávat zdrojové soubory, což může být užitečné, když pracujete s webovou stránkou, která má mnoho zdrojů. Chcete -li vyhledat zdrojový soubor prostřednictvím DevTools, klikněte na Vyhledávání možnost těsně nad konzolí.
Pokud však nemůžete najít Vyhledávání možnost, lepší alternativou je použít klávesové zkratky. V systému Mac OS stiskněte Cmd + Opt + F klíče pro hledání zdrojového souboru. Pokud používáte operační systém Windows, stiskněte Ctrl + Shift + F klíč pro přístup k liště pro vyhledávání zdrojových souborů.
Proveďte živé úpravy webové stránky
Jedním z hlavních účelů používání DevTools je provést okamžitá falešná úprava prvků na webové stránce . Jakmile přepnete na nástroje pro vývojáře, můžete upravit obsah HTML webových stránek kliknutím na Elementy volba. Potom v editoru kódu klikněte pravým tlačítkem na libovolný bod, na který chcete použít změny, a vyberte Upravit jako HTML .
Chcete -li upravit vlastnosti CSS, které nejsou vložené, vyberte Prameny . Dále vyberte soubor CSS, který chcete upravit. Chcete -li provést živou úpravu, umístěte kurzor na vybraný řádek v kódové konzole. Tím získáte okamžitou zpětnou vazbu o všech změnách stylu, které na webovou stránku použijete.
Všimněte si toho, že když upravujete stránku prostřednictvím DevTools, načtením stránky ve vašem prohlížeči se obnoví její původní podoba a úprava je viditelná pouze pro vás. Úpravy prostřednictvím DevTools nemají vliv na plynulý chod ani používání této webové stránky jinými uživateli.
Ladění kódu JavaScript pomocí konzoly DevTools
Jedním z nejlepších způsobů ladění JavaScriptu je použití vývojářských nástrojů prohlížeče Chrome. Poskytuje přímý přehled neplatných skriptů a přesné umístění chyby.
Je dobrým zvykem nechat DevTools vždy otevřený při navrhování webových stránek pomocí JavaScriptu. Například spuštěním souboru console.log () příkaz JavaScriptu na sadě pokynů zobrazí výsledek tohoto protokolu v konzole DevTools, pokud se program úspěšně spustí.
Ve výchozím nastavení konzole hlásí jakékoli problémy s JavaScriptem na vašem webu. Konzolu najdete ve spodní části DevTools nebo na ni přejdete kliknutím na Řídicí panel možnost v horní části okna Chrome DevTools.
Monitorujte načítání zdrojů z databáze
Kromě ladění JavaScriptu vám konzola může poskytnout také podrobnosti o prostředcích, které se z databáze webu nenačítají správně.
I když to není vždy nejlepší způsob, jak ladit problémy s backendem, stále vám to říká, které prostředky vrací a 404 chyba po spuštění databázového dotazu těchto prvků.
Související: Časté chyby webových stránek a jejich význam
Změňte Orientaci nástrojů pro vývojáře Chrome
Chcete -li změnit umístění nástrojů pro vývojáře v prohlížeči Chrome, klikněte na tři body nabídky v nástrojích DevTools (nikoli na hlavní v prohlížeči). Poté vyberte požadovanou pozici z Strana doku volba.
Nainstalujte si rozšíření pro Chrome DevTools
Můžete také nainstalovat rozšíření specifická pro jazyk nebo rámec, která fungují s Chrome DevTools. Instalace těchto rozšíření vám umožní efektivnější ladění vaší webové stránky.
V Chrome máte přístup k seznamu dostupných rozšíření pro Chrome DevTools Doporučená rozšíření DevTools galerie.
Zkontrolujte bezpečnostní problémy na webových stránkách
Chrome DevTools vám umožňuje posoudit, jak bezpečný je váš web, podle parametrů, jako je dostupnost certifikáty zabezpečení webu a jak je mimo jiné zabezpečené připojení. Chcete -li zkontrolovat, zda je váš web bezpečný, klikněte na Bezpečnostní možnost v horní části DevTools.
The Bezpečnostní karta vám poskytuje přehled o bezpečnostních podrobnostech vašich webových stránek a informuje vás o všech potenciálních hrozbách.
Zkontrolujte svůj web
Chrome DevTools má funkci, která vám umožňuje zkontrolovat celkový výkon vašeho webu na základě konkrétních parametrů.
Chcete -li se k této funkci dostat, vyberte Maják možnost v horní části okna DevTools. Dále vyberte parametry, které chcete zkontrolovat, a potom zaškrtněte buď mobilní, pohybliví nebo plocha počítače možnosti, jak zjistit, jak si vaše webová stránka vede na různých platformách.
Dále klikněte na Generovat hlášení spustit analýzu vaší webové stránky na základě parametrů, které jste vybrali dříve.
Výkon běhu nebo načítání webových stránek můžete také posoudit kliknutím na Výkon volba. Test spustíte kliknutím na ikonu vedle Klikněte na tlačítko záznamu možnost provést analýzu za běhu. Případně můžete kliknutím na tlačítko znovu načíst pod ním vyhodnotit výkon při načítání. Klikněte na Stop k zastavení analyzátoru a zobrazení výsledků.
Využijte výhody Chrome DevTools
V závislosti na tom, k čemu to potřebujete, vám Chrome DevTools umožní více než jen jednoduché ladění webových stránek. Naštěstí je DevTools snadno použitelný pro programátory všech úrovní znalostí. Můžete se dokonce naučit některé základy vývoje frontend webových stránek vyhledáním zdrojového kódu webových stránek, které navštívíte.
jak hrát hry ps3 na ps4
Můžete také objevit některé další možnosti, o kterých jsme v tomto článku nemluvili. Nebojte se tedy pohrát s dostupnými funkcemi. Kromě toho vylepšení těchto funkcí trochu nepoškodí webové stránky.
Podíl Podíl tweet E-mailem Jak používat Chrome OS na Raspberry PiNemůžete si dovolit Chromebook? Hledáte alternativu k Raspbian? Zde je návod, jak nainstalovat verzi systému Chrome OS na váš Raspberry Pi.
Číst dále Související témata- Internet
- Programování
- HTML
- Vývoj webu
- JavaScript
- Google Chrome
Idowu je zapálený pro cokoli chytrého a produktivního. Ve svém volném čase si hraje s kódováním a když se nudí, přepne na šachovnici, ale také se rád jednou za čas odpoutá od rutiny. Jeho vášeň ukazovat lidem cestu kolem moderních technologií ho motivuje psát více.
Více od Idowu OmisolaPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru