Chrome Developer Tools: Presunutia a pracovná plocha - Rozsiahla príručka

V tejto príručke sa dozvieš, ako môžeš využívať nástroje pre vývojárov Chrome na úpravu štýlov a skriptov bez zásahovania do pôvodného kódu. Ukáže sa ti, ako pomocou Overrides a Workspace v Chrome vykonávať rozsiahle testy a úpravy na svojom webe bez toho, aby si sa musel dotknúť originálnych serverových súborov.

Najdôležitejšie poznatky

• S Overrides môžeš lokálne prepísať súbory na urobnie testov a úprav.
• Workspace ti umožňuje pripojiť tvoj lokálny vývojový priečinok k nástrojom pre vývojárov Chrome a robiť zmeny priamo.
• Tieto dve funkcie sú veľmi užitočné na ladenie problémov v produkčnom prostredí bez ovplyvňovania pôvodného kódu na serveri.

Krok za krokom príručka

Aby si efektívne využíval nástroje pre vývojárov Chrome, postupuj podľa týchto krokovov:

1. Použitie Overrides

Najprv chceme použiť funkciu Overrides v Chrome. Vyber JavaScriptový súbor, napríklad main.js, ktorý je načítavaný zo servera.

Pravým tlačidlom myši klikni na súbor a z kontextového menu vyber možnosť „Override Content“.

Objaví sa dialógové okno, v ktorom môžeš zvoliť umiestnenie pre lokálny súbor. Uistite sa, že si už vytvoril(a) priečinok, kde chceš uložiť svoje prepísané súbory.

Vyber požadovaný priečinok a klikni na „Vybrať priečinok“. Tým sa vytvorí spojenie medzi originálnym súborom a tvojím lokálnym súborom.

Teraz musíš prehliadaču umožniť prístup k tomuto adresáru. Znovu klikni na ponuku Overrides a uisti sa, že povolenie na prístup k cieľovému adresáru je aktívne.

2. Vytvorenie lokálneho súboru

Teraz môžeš vytvoriť nový súbor v priečinku Override. Otvor súbor a napíš doň napríklad jednoduchý skript alert().

Môžeš upraviť obsah podľa svojich potrieb. Ulož súbor a obnov stránku, aby si videl(a), že teraz sa zobrazuje okno upozornenia namiesto súboru, ktorý bol pôvodne načítaný zo servera.

3. Kontrola aktivity siete

Aby si sa uistil(a), že súbor už nie je načítaný zo servera, otvor záložku Network v Developer Tools. Mal(a) by si vidieť, že súbor main.js už nie je získavaný zo servera, ale namiesto toho sa zobrazujú lokálne prepísané obsahy.

Ak chceš pridať ďalšie Overrides alebo odstrániť existujúce, choď do časti Overrides, kde máš prehľad o všetkých aktivovaných Overrides.

4. Práca s Workspace

Ďalej chceme nastaviť Workspace. Pomocou neho môžeš pripojiť svoj lokálny vývojový priečinok k nástrojom pre vývojárov a Chrome. Prejdite do Nastavení nástrojov pre vývojárov a vyhľadajte možnosť „Workspace“.

Vyber priečinok, v ktorom sa nachádzajú tvoje projekty. Chrome potrebuje aj tu povolenie k prístupu k tomuto priečinku, preto sa uistite, že si mu udelil(a) príslušné oprávnenia.

5. Úpravy v kóde

Teraz môžeš priamo pracovať v pracovnom priestore. Napríklad otvor svoj súbor main.js, vykonaj zmeny a ulož súbor. Kód sa potom automaticky znovu načíta zo servera a okamžite uvidíš, ako sa úprava prejaví na tvojej webovej stránke.

6. Ladnie v pracovnom priestore

Jednou z praktických výhod Workspace je možnosť nastavenia Breakpoints na efektívne ladenie kódu. Nastav Breakpoints vo svojom kóde a obnov stránku, aby sa vykonávanie zastavilo a mohol si skontrolovať aktuálny stav premenných.

7. Výhody a nevýhody

Hoci je Workspace užitočný, mnohí vývojári odporúčajú robiť zmeny priamo v editori kódu ako je Visual Studio Code a súbory tam ukladať. To ti umožní lepšie vidieť, ktorá verzia súborov sa používa. Pri používaní Workspace môže byť zmätočné, najmä ak nie je jasná prepojenie na originálne súbory.

Aj napriek tomu, ak upravuješ iba jednoduché CSS súbory alebo nepreložený kód, Workspace môže byť dobrá voľba.

Zhrnutie

V tejto príručke si sa naučil, ako môžeš pracovať s Overrides a Workspace v Chrome Developer Tools, aby si mohol prispôsobiť štýly a skripty bez toho, aby si sa dotkol originálneho serverového súboru. S Overrides môžeš rýchlo robiť zmeny, pričom Workspace ti umožňuje priamo pracovať so svojou vývojovou zložkou.