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.
![Nástroje pre vývojárov prehliadača Chrome: Nahrádzania a pracovná plocha - Kompletný sprievodca Chrome Developer Tools: Nahradiť a pracovná plocha - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-15.webp?tutkfid=226688)
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 pre vývojárov Chrome: Predefinované hodnoty a pracovný priestor - Podrobný návod Nástroje vývojára pre prehliadač Chrome: Prekrytia a Pracovná plocha - Podrobný sprievodca](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-74.webp?tutkfid=226695)
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: Nastavenia a pracovná plocha - Podrobný návod Chrome Developer Tools: Prekrytia a pracovná plocha - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-93.webp?tutkfid=226702)
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().
![Chrome Developer Tools: Prepisovania a pracovná plocha - Podrobný návod Nástroje pre vývojárov Chrome: Nahrádzanie a pracovná plocha - Podrobný sprievodca](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-105.webp?tutkfid=226705)
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ý návod Chrome Developer Tools: Nahradiť a pracovná plocha - Podrobný sprievodca](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-116.webp?tutkfid=226708)
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: Prestíž a pracovná plocha - Podrobný sprievodca Chrome Developer Tools: Zmeny a pracovná plocha - Komplexný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-144.webp?tutkfid=226711)
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.
![Chrome Developer Tools: Nahradenia a pracovná plocha - Ucelený návod Nástroje pre vývojárov Chrome: Nahradenia a pracovná plocha - Podrobný sprievodca](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-158.webp?tutkfid=226713)
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 vývojára Chrome: Nahradenia a pracovná plocha - Podrobný návod Nástroje pre vývojárov Chrome: Prekážky a pracovné prostredie - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-202.webp?tutkfid=226715)
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á plocha - Podrobný návod Chrome Developer Tools: Prepisy a pracovný priestor - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-226.webp?tutkfid=226717)
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: Zmeny a pracovná plocha - Podrobný návod Chrome Developer Tools: Overrides a Workspace - Rozsiahla príručka](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-324.webp?tutkfid=226724)
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: Nahradiť a Pracovná plocha - Podrobný návod Chrome Developer Tools: Nastavenia a pracovný priestor - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-373.webp?tutkfid=226728)
Aj napriek tomu, ak upravuješ iba jednoduché CSS súbory alebo nepreložený kód, Workspace môže byť dobrá voľba.
![Nástroje pre vývojárov Chrome: Přepísania a pracovná plocha - Komplexný sprievodca Chrome Developer Tools: Prepisy a pracovný priestor - Podrobný návod](https://www.tutkit.com/storage/media/text-tutorials/2959/chrome-developer-tools-overrides-und-workspace-eine-umfassende-anleitung-359.webp?tutkfid=226731)
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.