Google Chrome je vďaka svojim pokročilým funkciám jedným z populárnych webových prehliadačov na vývoj webových aplikácií. Nástroje pre vývojárov Chrome^{(Chrome Developer Tools)} môžu byť veľmi užitočné pri ladení. Väčšina z nás už vie, že živé CSS^(CSS) môžeme upravovať pomocou nástrojov Chrome Dev Tools^{(Chrome Dev Tools)} , ale dnes sa s vami podelíme o ďalšie tipy.

Tipy pre vývojové nástroje Chrome

Existuje mnoho neznámych a skrytých trikov Chrome Dev Tools a my sa pozrieme na tie najužitočnejšie triky z nich. Ak chcete v prehliadači Chrome^(Chrome) otvoriť nástroje pre vývojárov , stlačte na klávesnici kláves F12 a vyskúšajte nasledujúce triky.

1. Nájdite a otvorte ľubovoľný súbor

Keď robíme webový vývoj, zaoberáme sa mnohými HTML , CSS , JS a ďalšími súbormi. Keď chceme čokoľvek ladiť, otvoríme nástroje Chrome Dev . Môžete rýchlo vyhľadať a nájsť konkrétny súbor, aby ste si uľahčili prácu. Stačí^(Just) stlačiť Ctrl + P a začať písať názov súboru. To vám pomôže nájsť konkrétny súbor zo zoznamu súborov.

2. Vyhľadajte v zdrojovom súbore

V predchádzajúcom triku sme sa dozvedeli, ako hľadať konkrétny súbor. Môžete dokonca vyhľadať konkrétny reťazec vo všetkých načítaných súboroch. Stlačením Ctrl + Shift + F vyhľadajte reťazec v súboroch. Podporuje aj regulárne výrazy.

3. Prejdite na konkrétny riadok

Keď otvoríte ľubovoľný zdrojový súbor a chcete sa presunúť na konkrétny riadok, stlačte Ctrl + G a zadajte číslo riadku a stlačte Enter.

4. Výber prvkov DOM na karte Konzola^(Console)

Dev Tools vám tiež umožňujú vybrať prvky v konzole.

• $() – Vráti^(Returns) prvý výskyt zodpovedajúceho selektora CSS .
• $$() – Vráti pole prvkov zodpovedajúcich danému selektoru CSS .

Ak chcete získať ďalšie príkazy konzoly, prejdite na tento príspevok.^{(this post.)}

5. Využite viacnásobné zarážky

Niekedy chcete nastaviť viacero vsuviek na rôznych miestach a môžete to urobiť jednoducho v nástrojoch Chrome Dev podržaním klávesu Ctrl^{(Ctrl )} a kliknutím na miesto, kde ich chcete umiestniť. Potom začnite písať a uvidíte, že je umiestnený na rôznych vybraných miestach.

6. Zachovať denník

Zachovať^(Preserve) denník vám pomôže zachovať denník aj po načítaní stránky. Začiarknite možnosť Zachovať protokol^{(Preserve log )} v protokole konzoly^(Console) a protokol sa zachová. Toto zobrazí protokol pred uvoľnením stránky a pomôže to preskúmať chyby.

7. Použite vstavaný skrášľovač kódu

Nástroje pre vývojárov Chrome^{(Chrome Dev Tools)} majú vstavaný nástroj na skrášľovanie kódu nazývaný pekná tlač „{}“^{(pretty print “{}”)} . Vývojársky nástroj zobrazuje minimalizovaný kód a nie je tak ľahko čitateľný. Kliknutím^(Click) na pekné tlačidlo tlače, ktoré je zobrazené vľavo dole na otvorenom zdrojovom súbore, zobrazíte zdrojový súbor vo formáte čitateľnom pre ľudí.

8. Je váš web vhodný pre mobilné zariadenia? Skontrolujte to tu

Chrome Dev Tools nám tiež umožňujú skontrolovať, či je webová lokalita vhodná pre mobilné zariadenia alebo nie. Môžete skontrolovať, ako váš web vyzerá na rôznych zariadeniach. Prejdite na nástroje Chrome Dev a na karte ^{(Chrome Dev)}Emulácia^{(Emulation )} môžete uložiť rôzne zariadenia. Vyberte požadované zariadenie a otestujte, ako váš web na tomto zariadení vyzerá.

Viac informácií nájdete v nasledujúcom videu.

9. Emulujte senzory a geografickú polohu^{(Geographical Location)}

Môžete dokonca emulovať senzory, ako sú dotykové obrazovky a akcelerometre. Môžete dokonca napodobniť geografickú polohu. Ak to chcete urobiť, prejdite na Emulation -> Sensors.

10. Vyberte ďalší výskyt aktuálneho slova

Ak chcete nahradiť slovo v celom jeho výskyte, vyberte slovo a stlačením Ctrl + D vyberte ďalší výskyt vybraného slova. Potom môžete toto slovo upraviť vo všetkých jeho výskytoch naraz.

11. Zmena farebného formátu

Na zmenu medzi formátom rgba, hexadecimálnym a hsl stačí použiť Shift + Click

12. Pridajte^(Add) zmeny do lokálnych súborov cez pracovný priestor

V nástrojoch Chrome Dev^{(Chrome Dev)} dokážeme upravovať zdrojové súbory a vykonávať určité zmeny v súboroch CSS , JavaScript a ďalších . Ak chcete pridať tieto zmeny do lokálnych súborov, nie je potrebné kopírovať a vkladať zmeny z pracovného priestoru do súborov na disku. Nástroje Chrome Dev^{(Chrome Dev)} vám umožňujú porovnávať súbory a aktualizovať lokálny súbor so zmenami, ktoré ste vykonali v nástrojoch pre vývojárov. Ak to chcete urobiť, kliknite pravým tlačidlom myši na zdrojový súbor na ľavej strane na karte Zdroje^{(Sources )} a vyberte položku Pridať priečinok do pracovného priestoru.^{(Add Folder to workspace.)}

Dúfam, že to pomôže.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web brоwsers for web develoрment, dυe to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Najlepšie tipy a triky pre prehliadač Google Chrome pre používateľov počítačov so systémom Windows

• 3 užitočné tipy a triky na používanie poznámok

• Ako stiahnuť písmo z webovej lokality pomocou nástrojov pre vývojárov

• Reštartujte Chrome, Edge alebo Firefox bez straty kariet v systéme Windows 11/10

• Tipy na používanie prvku Inspect Element prehliadača Google Chrome

• Ako opraviť chybový kód Netflix M7111-1101

• Ako si zmeniť meno v Google Meet

• Jednoduché otázky: Čo sú cookies a na čo slúžia?

• Ako nastaviť proxy server v prehliadačoch Chrome, Firefox, Edge a Opera

• Ako prepnúť Google Chrome do tmavého režimu -

• Povoľte Flash pre konkrétne webové stránky v prehliadači Chrome

• Ako nastaviť Chrome ako predvolený prehliadač v systéme Windows 10 (Firefox a Opera)

• Ako opraviť zakázanú chybu 403 v prehliadači Google Chrome

• Ako vypnúť upozornenia prehliadača Chrome v systéme Android: Kompletný sprievodca

• Ako blokovať súbory cookie tretích strán v prehliadačoch Chrome, Firefox, Edge a Opera

• Akú verziu prehliadača Chrome mám? 6 spôsobov, ako to zistiť -

• Ako vytlačiť článok bez reklám vo všetkých hlavných prehliadačoch -

• Ako vymazať súbory cookie z prehliadača Chrome: Všetko, čo potrebujete vedieť

• 15 najlepších VPN pre Google Chrome na prístup k blokovaným stránkam

• Ako odoslať text z počítača pomocou správ pre Android