A Google Chrome^{(Google Chrome)} fejlett funkcióinak köszönhetően az egyik legnépszerűbb webböngésző a webfejlesztéshez. A Chrome fejlesztői eszközök^{(Chrome Developer Tools)} nagyon hasznosak lehetnek a hibakeresés során. A legtöbben már tudjuk, hogy szerkeszthetjük az élő CSS -t a Chrome Dev Tools segítségével , de további tippeket is megosztunk veled ma.

Tippek a Chrome fejlesztői eszközökhöz

A Chrome Dev Tools^{(Chrome Dev Tools)} számos ismeretlen és rejtett trükköt tartalmaz, és ezek közül a leghasznosabb trükköket vizsgáljuk meg. A fejlesztői eszközök Chrome -ban való megnyitásához nyomja meg az F12 billentyűt a billentyűzeten, és próbálja ki a következő trükköket.

1. Keressen meg és nyissa meg bármelyik fájlt

Amikor webfejlesztést végzünk, sok HTML- , CSS- , JS- és egyéb fájllal foglalkozunk. Ha bármit hibakeresni akarunk, megnyitjuk a Chrome Dev eszközöket. Gyorsan megkeresheti és megtalálhatja az adott fájlt, hogy megkönnyítse munkáját. Csak^(Just) nyomja meg a Ctrl + P , és kezdje el beírni a fájl nevét. Ez segít megtalálni az adott fájlt a fájlok listájából.

2. Keressen a forrásfájlban

Az előző trükkben megtudtuk, hogyan kell keresni egy adott fájlt. Akár egy adott karakterláncot is kereshet az összes betöltött fájlban. Nyomja meg a Ctrl + Shift + F egy karakterlánc kereséséhez a fájlokban. Támogatja a reguláris kifejezéseket is.

3. Lépjen egy adott sorra

Miután megnyitott egy forrásfájlt, és egy adott sorra szeretne lépni, nyomja meg a Ctrl + G , adja meg a sor számát, majd nyomja meg az Enter billentyűt.

4. Válassza ki a DOM elemeket a Konzol^(Console) lapon

A Dev Tools^{(Dev Tools)} lehetővé teszi az elemek kiválasztását a konzolon is.

• $() – CSS - választó első előfordulását adja vissza .^(Returns)
• $$() – Az adott CSS - szelektornak megfelelő elemek tömbjét adja vissza.

További konzolparancsokért látogasson el erre a bejegyzésre.^{(this post.)}

5. Használjon több gondozást

Előfordulhat, hogy különböző helyekre kívánja beállítani a több elemet, és ezt egyszerűen megteheti a Chrome Dev eszközökben, ha lenyomva tartja a Ctrl billentyűt, és rákattint arra a helyre, ahol el szeretné helyezni őket. Ezután kezdje el írni, és látni fogja, hogy a kiválasztott különböző helyeken van elhelyezve.

6. Napló megőrzése

A napló megőrzése^(Preserve) segít a napló megőrzésében még az oldal betöltésekor is. Jelölje be a Napló megőrzése^{(Preserve log )} melletti lehetőséget a konzolnaplóban, és^(Console) a napló megmarad. Ez megjeleníti a naplót az oldal betöltése előtt, és hasznos a hibák kivizsgálásához.

7. Használjon beépített kódszépítőt

A Chrome Dev Tools^{(Chrome Dev Tools)} beépített kódszépítővel rendelkezik, a szép nyomtatás „{}”^{(pretty print “{}”)} néven . A fejlesztői eszköz a minimálisra csökkentett kódot mutatja, és nem olyan könnyen olvasható. Kattintson^(Click) a szép nyomtatás gombra, amely a megnyitott forrásfájl bal alsó sarkában látható, hogy a forrásfájlt ember által olvasható formátumban jelenítse meg.

8. Mobilbarát a weboldala? Nézd meg itt

A Chrome Dev Tools^{(Chrome Dev Tools)} segítségével azt is ellenőrizhetjük, hogy egy webhely mobilbarát-e vagy sem. Megnézheti, hogyan néz ki webhelye különböző eszközökön. Nyissa meg a Chrome Dev eszközöket, és az Emuláció^{(Emulation )} lapon különféle eszközöket tárolhat. Válassza ki a kívánt eszközt, és tesztelje, hogyan néz ki webhelye azon az eszközön.

További információért tekintse meg az alábbi videót.

9. Szenzorok és földrajzi helyzet emulálása^{(Geographical Location)}

Az érzékelőket, például az érintőképernyőket és a gyorsulásmérőket is emulálhatja. Akár a földrajzi elhelyezkedést is utánozhatja. Ehhez lépjen az Emulation -> Sensors.

10. Válassza ki az aktuális szó következő előfordulását

Ha le szeretné cserélni a szót teljes előfordulásában, akkor válassza ki a szót, és nyomja meg a Ctrl + D a kiválasztott szó következő előfordulásának kiválasztásához. Ezután a szót minden előfordulásában szerkesztheti egy képpel.

11. Színformátum módosítása

Csak használja a Shift + Click a szín előnézetére az rgba, hexadecimális és hsl formázás módosításához.

12. Változtassa meg^(Add) a helyi fájlokat a munkaterületen keresztül

Képesek vagyunk szerkeszteni a forrásfájlokat, és módosítani tudunk a CSS -ben, a JavaScript -ben és más fájlokban a Chrome Dev eszközeiben. Ha ezeket a változtatásokat a helyi fájlokhoz szeretné hozzáadni, akkor nem kell a munkaterületről a lemezen lévő fájlokra másolni és beilleszteni a változtatásokat. A Chrome fejlesztői^{(Chrome Dev)} eszközei lehetővé teszik a fájlok egyeztetését és a helyi fájl frissítését a fejlesztői eszközökben végzett módosításokkal. Ehhez kattintson jobb gombbal a forrásfájlra a Források^{(Sources )} lap bal oldalán, és válassza a Mappa hozzáadása a munkaterülethez lehetőséget.^{(Add Folder to workspace.)}

Remélem ez segít.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web browsers for web development, duе 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

• A legjobb Google Chrome tippek és trükkök Windows PC-felhasználók számára

• 3 hasznos tipp és trükk a cetlik használatához

• Betűtípus letöltése egy webhelyről a Fejlesztői eszközök segítségével

• Indítsa újra a Chrome-ot, az Edge-t vagy a Firefoxot a lapok elvesztése nélkül a Windows 11/10 rendszerben

• Tippek a Google Chrome böngésző Inspect Elementjének használatához

• Hogyan lehet megszabadulni a Yahoo kereséstől a Chrome-ban

• A 403-as tiltott hiba javítása a Google Chrome-ban

• Hogyan állítsuk a Google Chrome-ot sötét módba -

• Hogyan válthatunk inkognitómódba Chrome-ban, Firefoxban, Edge-ben és Operában

• A Fejlesztői eszközök segítségével azonosíthatja a betűtípusokat a Chrome, az Edge és a Firefox böngészőben

• A mobilböngésző emulátor használata Chrome-ban, Firefoxban, Edge-ben és Opera-ban -

• Hogyan lehet újra megnyitni egy bezárt böngészőlapot a Chrome, a Safari, az Edge és a Firefox böngészőben

• Hogyan lehet a Chrome-ot alapértelmezett böngészővé tenni a Windows 10 rendszerben (Firefox és Opera)

• A keresőmotor megváltoztatása a Chrome-ban Windows, macOS, Android és iOS rendszeren -

• A Do Not Track engedélyezése a Chrome, a Firefox, az Edge és az Opera böngészőben

• Milyen verziójú Chrome-om van? 6 módja annak, hogy megtudd -

• Hogyan lehet megakadályozni, hogy a Chrome jelszavak mentését kérje -

• Készítsen InPrivate vagy Incognito parancsikonokat a Firefox, Chrome, Edge, Opera vagy Internet Explorer böngészőhöz

• Hol tárolják a cookie-kat a Windows 10 rendszerben az összes főbb böngészőhöz?

• A Twitch Error 2000 javítása a Google Chrome-ban