Chrome Developer Tools: Přepsání a pracovní plocha - Komplexní průvodce

V této příručce se dozvíte, jak můžete využívat nástroje pro vývojáře Chrome k úpravě stylů a skriptů bez jakýchkoli změn v původním kódu. Ukáže se vám, jak pomocí Overrides a Workspace Chrome provádět rozsáhlé testy a úpravy na vašem webu, aniž byste museli měnit původní serverový soubor.

Nejdůležitější poznatky

• Pomocí Overrides můžete lokálně přepsat soubory k provedení testů a úprav.
• Workspace vám umožní propojit váš lokální vývojový adresář s nástroji pro vývojáře Chrome a provádět změny přímo zde.
• Tyto dvě funkce jsou velmi užitečné k ladění problémů v produkčním prostředí, aniž byste ovlivňovali původní serverový kód.

Postup krok za krokem

Chcete-li efektivně využívat Nástroje pro vývojáře Chrome, postupujte podle těchto kroků:

1. Použití Overrides

Nejprve chceme použít funkci Overrides v Chrome. Vyberte si JavaScript soubor, například main.js, který je načítán ze serveru.

Klikněte pravým tlačítkem myši na soubor a zvolte možnost „Přepsat obsah“ v kontextovém menu.

Otevře se dialogové okno, ve kterém můžete vybrat umístění pro lokální soubor. Ujistěte se, že jste již vytvořili složku, kam chcete umístit své přepisované soubory.

Vyberte požadovanou složku a klepněte na „Vybrat složku“. Tím se naváže spojení mezi původním souborem a vaším lokálním souborem.

Nyní musíte prohlížeči udělit přístup k tomuto adresáři. Klikněte znovu na menu Overrides a ujistěte se, že povolení k přístupu k požadovanému adresáři je aktivováno.

2. Vytvoření lokálního souboru

Nyní můžete vytvořit nový soubor ve složce Override. Otevřete soubor a napište do něj například jednoduchý skript alert().

Můžete upravit obsah podle svých potřeb. Soubor uložte a načtěte stránku znovu, abyste viděli, že nyní se místo souboru, který byl původně načítán ze serveru, objeví okno s upozorněním.

3. Kontrola síťové aktivity

Abychom zajistili, že soubor již neni načítaný ze serveru, otevřete záložku Sítě v nástrojích pro vývojáře. Měli byste vidět, že soubor main.js nyní není načítán ze serveru, ale namísto toho jsou zde lokálně přepsané obsahy.

Pokud chcete přidat další přepisy nebo smazat stávající, přejděte do oblasti Overrides, kde získáte přehled o všech aktivovaných přepisech.

4. Práce s prostorem

Dále chceme nastavit Workspace. Zde můžete propojit váš lokální vývojový adresář s Nástroji pro vývojáře. Přejděte do Nastavení nástrojů pro vývojáře a najděte možnost „Workspace“.

Vyberte složku, kde jsou umístěny vaše projekty. Chrome také potřebuje oprávnění k přístupu k této složce, ujistěte se, že jste udělili příslušná oprávnění.

5. Úpravy kódu

Nyní můžete přímo pracovat ve workspace. Například otevřete svůj soubor main.js, proveďte změny a uložte soubor. Kód se pak automaticky načte znovu ze serveru a můžete ihned vidět, jak se úprava projeví na vašem webu.

6. Ladění v Workspace

Jednou praktickou výhodou Workspace je možnost nastavit si zastávky, abyste mohli efektivně ladit svůj kód. Nastavte si zastávky ve vašem kódu a načtěte stránku znovu, abyste mohli provádění pozastavit a zkontrolovat aktuální stav proměnných.

7. Výhody a nevýhody

I když je Workspace užitečný, mnoho vývojářů doporučuje provádět změny přímo v kódu v editoru jako je Visual Studio Code a soubory tam ukládat. Tím zajistíte, že lépe uvidíte, která verze souborů je použita. Při používání Workspace může být obtížné, zejména pokud není jasná vazba na původní soubory.

Přesto, pokud upravujete pouze jednoduché CSS soubory nebo nezkompilovaný kód, může být Workspace dobrá volba.

Shrnutí

V této příručce jste se naučili, jak můžete pracovat s Overridy a Workspace v Chrome Developer Tools, abyste mohli upravovat styly a skripty bez dotyku originálního serverového souboru. S Overridy můžete rychle provádět změny, zatímco Workspace vám umožňuje pracovat přímo se složkou vašeho vývoje.