Google Chrome on edistyneiden ominaisuuksiensa ansiosta yksi suosituimmista verkkoselaimista verkkokehitykseen. Chromen kehittäjätyökalut^{(Chrome Developer Tools)} voivat olla erittäin hyödyllisiä virheenkorjauksen aikana. Useimmat meistä tietävät jo, että voimme muokata live- CSS : ää Chrome Dev Tools -työkaluilla^{(Chrome Dev Tools)} , mutta jaamme kanssasi tänään muitakin vinkkejä.

Chromen kehitystyökalujen vinkkejä

Chrome Dev Toolsissa^{(Chrome Dev Tools)} on monia tuntemattomia ja piilotettuja temppuja, ja tarkastelemme niistä hyödyllisimpiä temppuja. Avaa kehittäjätyökalut Chromessa^(Chrome) painamalla näppäimistön F12 -näppäintä ja kokeilemalla seuraavia temppuja.

1. Etsi ja avaa mikä tahansa tiedosto

Kun teemme verkkokehitystä, käsittelemme monia HTML- , CSS- , JS- ja muita tiedostoja. Kun haluamme tehdä virheenkorjauksen, avaamme Chrome Dev -työkalut. Voit nopeasti etsiä ja löytää tietyn tiedoston työsi helpottamiseksi. Paina vain ^(Just)Ctrl + P ja ala kirjoittaa tiedoston nimeä. Tämä auttaa sinua löytämään tietyn tiedoston tiedostoluettelosta.

2. Hae lähdetiedostosta

Edellisessä temppussa opimme etsimään tiettyä tiedostoa. Voit jopa etsiä tiettyä merkkijonoa kaikista ladatuista tiedostoista. Paina Ctrl + Shift + F etsiäksesi merkkijonoa tiedostoista. Se tukee myös säännöllisiä lausekkeita.

3. Siirry tietylle riville

Kun olet avannut minkä tahansa lähdetiedoston ja haluat siirtyä tietylle riville, paina Ctrl + G ja anna rivin numero ja paina Enter.

4. Valitse DOM-elementit Konsoli^(Console) - välilehdeltä

Dev Toolsin^{(Dev Tools)} avulla voit myös valita elementtejä konsolissa.

• $() – Palauttaa^(Returns) vastaavan CSS - valitsimen ensimmäisen esiintymän.
• $$() – Se palauttaa joukon elementtejä, jotka vastaavat annettua CSS - valitsinta.

Jos haluat lisää konsolikomentoja, siirry tähän viestiin.^{(this post.)}

5. Hyödynnä useita hoitoja

Joskus haluat asettaa useat merkit eri paikkoihin, ja voit tehdä sen helposti Chrome Dev -työkaluissa pitämällä Ctrl - näppäintä painettuna ja napsauttamalla kohtaa, johon haluat sijoittaa ne. Aloita sitten kirjoittaminen ja näet, että se on sijoitettu useisiin valittuihin paikkoihin.

6. Säilytä loki

Säilytä^(Preserve) loki auttaa sinua säilyttämään lokin, vaikka sivu olisi ladattu. Valitse Konsolin lokissa ^(Console)Säilytä loki^{(Preserve log )} -kohdan valinta , niin loki säilytetään. Tämä näyttää lokin ennen kuin sivu on ladattu, ja siitä on apua virheiden tutkimisessa.

7. Käytä sisäänrakennettua koodin kaunistajaa

Chrome Dev Toolsissa^{(Chrome Dev Tools)} on sisäänrakennettu koodin kaunistaja nimeltä pretty print "{}" . Kehittäjätyökalu näyttää pienennetyn koodin, eikä sitä ole niin helppo lukea. Napsauta^(Click) kaunista tulostuspainiketta, joka näkyy avatun lähdetiedoston vasemmassa alakulmassa, näyttääksesi lähdetiedoston ihmisen luettavassa muodossa.

8. Onko verkkosivustosi mobiiliystävällinen? Tarkista se täältä

Chrome Dev Toolsin^{(Chrome Dev Tools)} avulla voimme myös tarkistaa, onko verkkosivusto mobiiliystävällinen vai ei. Voit tarkistaa, miltä verkkosivustosi näyttää eri laitteilla. Siirry Chrome Dev -työkaluihin ja Emulointi^{(Emulation )} - välilehdellä voit tallentaa erilaisia ​​laitteita. Valitse haluamasi laite ja testaa, miltä verkkosivustosi näyttää kyseisellä laitteella.

Saat lisätietoja katsomalla seuraavaa videota.

9. Emuloi antureita ja maantieteellistä sijaintia^{(Geographical Location)}

Voit jopa emuloida antureita, kuten kosketusnäyttöjä ja kiihtyvyysantureita. Voit jopa jäljitellä maantieteellistä sijaintia. Voit tehdä tämän siirtymällä kohtaan Emulation -> Sensors.

10. Valitse nykyisen sanan seuraava esiintymä

Jos haluat korvata sanan kaikessa esiintymisessä, valitse sana ja paina Ctrl + D valitaksesi valitun sanan seuraavan esiintymän. Sitten voit muokata sanaa kaikissa esiintymisissään yhdellä kertaa.

11. Muuta värimuotoa

Käytä vain Shift + Click värin esikatselua muuttaaksesi muutoksia rgba-, heksadesimaali- ja hsl-muotoilun välillä.

12. Lisää^(Add) muutoksia paikallisiin tiedostoihin työtilan kautta

Pystymme muokkaamaan lähdetiedostoja ja tekemään muutoksia CSS- , JavaScript- ja muihin tiedostoihin Chrome Dev -työkaluissa. Jos haluat lisätä nämä muutokset paikallisiin tiedostoihin, muutoksia ei tarvitse kopioida ja liittää työtilasta levyllä oleviin tiedostoihin. Chrome Dev -työkalujen avulla voit täsmäyttää tiedostoja ja päivittää paikallisen tiedoston kehitystyökaluissa tekemilläsi muutoksilla. Voit tehdä tämän napsauttamalla hiiren kakkospainikkeella lähdetiedostoa Lähteet^{(Sources )} - välilehden vasemmalla puolella ja valitsemalla Lisää kansio työtilaan.^{(Add Folder to workspace.)}

Toivottavasti tämä auttaa.

Chrome Development Tools Tutorials, Tips, Tricks

Gоogle Chrome is one of the popular web browsers for web development, due to its advаnced 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

• Parhaat Google Chromen vinkit ja temput Windows PC -käyttäjille

• 3 hyödyllistä vinkkiä muistilappujen käyttämiseen

• Fontin lataaminen verkkosivustolta kehittäjätyökalujen avulla

• Käynnistä Chrome, Edge tai Firefox uudelleen menettämättä välilehtiä Windows 11/10:ssä

• Vinkkejä Google Chrome -selaimen Inspect Elementin käyttöön

• Yhdistä kaikki sähköpostitilisi yhdeksi Gmail-postilaatikoksi

• Tee InPrivate- tai Incognito-pikakuvakkeita Firefoxille, Chromelle, Edgelle, Operalle tai Internet Explorerille

• Tunnista fontit Chromessa, Edgessä ja Firefoxissa kehittäjätyökalujen avulla

• Aseta Chrome ja muut selaimet koko näytön tilaan (Edge, Firefox ja Opera)

• Tekstin lähettäminen tietokoneelta Android-viesteillä

• Chrome-ilmoitusten poistaminen käytöstä Androidissa: täydellinen opas

• Kuinka korjata 403 kielletty virhe Google Chromessa

• Google Chrome Macille: miten hankit sen!

• Korjaa ongelma: Google Chrome käyttää paljon prosessoria (CPU) vieraillessani verkkosivustolla

• Kuinka korjata Twitch Error 2000 Google Chromessa

• Evästeiden poistaminen Chromesta: Kaikki mitä sinun tarvitsee tietää

• Kuinka tulostaa artikkeli ilman mainoksia kaikissa yleisimmissä selaimissa -

• Kuinka estää Chromea pyytämästä salasanojen tallentamista -

• Vie salasanat Chromesta, Firefoxista, Operasta, Microsoft Edgestä ja Internet Explorerista

• 15 parasta VPN:ää Google Chromelle estettyjen sivustojen käyttämiseksi