Efektívne používanie vývojárskych nástrojov Chrome (tutoriál)

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

Všetky videá tutoriálu Efektívne používanie vývojárskych nástrojov Chrome (tutoriál)

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.

Chrome Developer Tools: Nahradiť a pracovná plocha - Podrobný návod

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.

Nástroje vývojára pre prehliadač Chrome: Prekrytia a Pracovná plocha - Podrobný sprievodca

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.

Chrome Developer Tools: Prekrytia a pracovná plocha - Podrobný návod

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().

Nástroje pre vývojárov Chrome: Nahrádzanie a pracovná plocha - Podrobný sprievodca

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.

Chrome Developer Tools: Nahradiť a pracovná plocha - Podrobný sprievodca

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.

Chrome Developer Tools: Zmeny a pracovná plocha - Komplexný návod

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.

Nástroje pre vývojárov Chrome: Nahradenia a pracovná plocha - Podrobný sprievodca

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“.

Nástroje pre vývojárov Chrome: Prekážky a pracovné prostredie - Podrobný návod

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.

Chrome Developer Tools: Prepisy a pracovný priestor - Podrobný návod

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.

Chrome Developer Tools: Overrides a Workspace - Rozsiahla príručka

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.

Chrome Developer Tools: Nastavenia a pracovný priestor - Podrobný návod

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

Chrome Developer Tools: Prepisy a pracovný priestor - Podrobný návod

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.

Často kladené otázky

Môžem použiť Overrides aj pre súbory CSS?Áno, môžeš použiť Overrides aj pre súbory CSS. Jednoducho vyber požadovaný súbor CSS a aktivuj Override.

Ako deaktivujem Overrides?Môžeš deaktivovať Overrides tým, že v Developer Tools prejdeš na Overrides a vypneš ich alebo odstrániš.

Sú nejaké obmedzenia Workspace?Áno, niekedy môže byť problém identifikovať správny Workspace, najmä pri preloženom kóde.

Prečo používať Overrides namiesto Workspace?Overrides poskytujú jasný spôsob, akým môžeš robiť zmeny, aby si sa nepreháňal s rôznymi verziami súborov. Sú často jednoduchšie na manipuláciu, ak nechceš priamo upravovať originálne súbory.