Google Chrome waa mid ka mid ah browser-yada caanka ah ee horumarinta mareegaha, taas oo ay ugu wacan tahay sifooyinkeeda horumarsan. Aaladaha horumariyaha Chrome^{(Chrome Developer Tools)} waxa ay noqon karaan kuwo aad waxtar u leh marka la ciribtirayo. Inta badan oo naga mid ah waxaan hore u ognahay inaan wax ka beddeli karno CSS -ka tooska ah anagoo adeegsanayna Chrome Dev Tools , laakiin waxaa jira talooyin badan oo aan maanta kula wadaagi doono.

Tilmaamaha Aaladaha Horumarinta Chrome

Waxaa jira khiyaano badan oo aan la aqoon oo qarsoon oo Chrome Dev Tools ah waxaanan eegi doonaa tabaha ugu faa'iidada badan iyaga. Si aad u furto qalabka horumariyaha ee Chrome , taabo F12 kiiboodhkaga oo isku day tabaha soo socda.

1. Raadi oo fur fayl kasta

Marka aan samaynayno horumarinta shabakadda waxaan la macaamilnaa HTML , CSS , JS, iyo faylal kale oo badan. Marka aan rabno inaan wax ka saarno, waxaan furnaa qalabka Chrome Dev . Waxaad si degdeg ah u raadin kartaa oo aad u heli kartaa faylka gaarka ah si aad shaqadaada ugu fududayso. Kaliya^(Just) , taabo Ctrl + P oo bilow inaad ku qorto magaca faylka. Tani waxay kaa caawinaysaa inaad ka hesho faylka gaarka ah liiska faylalka.

2. Ka dhex raadi faylka isha

Khiyaamadii hore, waxaan ku ogaanay sida loo raadiyo fayl gaar ah. Waxaad xitaa ka raadin kartaa xadhig gaar ah dhammaan faylasha la raray. Riix Ctrl + Shift + F si aad u raadiso xarkaha faylasha. Waxa kale oo ay taageertaa tibaaxaha joogtada ah.

3. Tag xariiq gaar ah

Markaad furto faylal kasta oo isha oo aad rabto inaad u guurto khad gaar ah, ka dib riix Ctrl + G oo bixi lambarka khadka oo ku dhufo geli.

4. Doorashada DOM Elements ee tabka Console

Qalabka Dev^{(Dev Tools)} sidoo kale wuxuu kuu ogolaanayaa inaad doorato walxaha ku jira console-ka.

• $() – Soo celisa^(Returns) dhacdadii ugu horeysay ee xulashada CSS ee ku habboon.^(CSS)
• $$() – Waxa ay soo celisaa soo koobida walxaha u dhigma dooraha CSS^(CSS) ee la bixiyay .

Si aad u heshid amarrada console-ka, u gudub boostadan.^{(this post.)}

5. Isticmaal daryeelo badan

Mararka qaarkood, waxaad rabtaa inaad dejiso xannaanooyinka badan ee meelo kala duwan waxaadna taas ku samayn kartaa si sahlan qalabka Chrome Dev adiga oo haysta furaha Ctrl oo gujinaya meesha aad rabto inaad dhigto. Kadib bilow qorista oo waxaad arki doontaa in la dhigay meelo kala duwan oo la doortay.

6. Ilaalinta Log

Kaydinta^(Preserve) log waxay kaa caawinaysaa inaad ku adkaysato diiwaanka xitaa bogga waa la raray. Hubi ikhtiyaarka ku ag yaal kaydinta log^{(Preserve log )} -ka Console -ka oo diiwaanka waa la xafiday. Tani waxay muujinaysaa diiwaanka ka hor inta aan bogga la dejin oo waxtar leh in la baaro cayayaanka.

7. Isticmaal wax qurxiyaha kood ku dhex jira

Chrome Dev Tools waxay leedahay qurxiyaha koodka ku dhex jira ee loo yaqaan daabaca qurxoon "{}"^{(pretty print “{}”)} . Qalabka horumariyahu wuxuu muujinayaa koodka la yareeyay oo ma fududa in la akhriyo. Guji^(Click) badhanka daabacaadda quruxda badan ee ka muuqda dhanka bidix ee hoose ee faylka isha furan, si aad u tusto faylka isha ee qaabka bani-aadmiga loo akhriyi karo.

8. Mareegtaada moobayl saaxiib ma tahay? Halkan ka hubi

Chrome Dev Tools waxa kale oo ay noo ogolaataa in aanu hubino in mareegtadu tahay mid mobile-ku-saaxiibtinimo ah iyo in kale. Waxaad ka eegi kartaa sida website-kaagu u ekaado aaladaha kala duwan. U gudub qalabka Chrome Dev oo hoos yimaada ^{(Chrome Dev)}Emulation tab, waxaad fayl gareyn kartaa qalabyo kala duwan. Dooro qalabka aad rabto oo tijaabi sida website-kaagu ugu ekaado qalabkaas.

Wixii macluumaad dheeraad ah, eeg muuqaalkan soo socda.

9. Ku dayo Dareemayaasha iyo Goobta Juqraafiyeed^{(Geographical Location)}

Waxaad xitaa ku dayan kartaa dareemayaasha sida muraayadaha taabashada iyo xawaaraha. Waxaad xitaa ku dayan kartaa goobta juqraafi ahaan. Si tan loo sameeyo, u gudub Emulation -> Sensors.

10. Dooro dhacdada xigta ee kelmadda hadda jirta

Haddii aad rabto in aad bedesho erayga dhammaan inta uu dhacay, ka dib dooro ereyga oo Ctrl + D si aad u doorato dhacdada xigta ee ereyga la doortay. Kadib, waxaad tafatir kartaa kelmaddaas dhammaan dhacdooyinkiisa hal tallaal.

11. Beddel Qaabka Midabka

Kaliya isticmaal Shift + Click aragtida midabka si aad u bedesho wax ka beddelka rgba, hexadecimal iyo hsl formatting.

12. Ku dar^(Add) isbeddelada faylasha maxaliga ah iyada oo loo marayo goobta shaqada

Waxaan awoodnaa inaan tafatirno faylalka isha oo aan ku samayno isbeddelo ku saabsan CSS , JavaScript iyo faylasha kale ee aaladaha Chrome Dev . Si loogu daro isbeddeladan faylasha maxalliga ah, markaa looma baahna in la koobiyeeyo isbeddelada goobta shaqada ilaa faylasha diskka. Qalabka Chrome Dev^{(Chrome Dev)} wuxuu kuu oggolaanayaa inaad ku ekaato faylalka oo aad ku cusboonaysiiso faylka maxalliga ah isbeddellada aad ku samaysay aaladaha dev. Si tan loo sameeyo midig guji faylka isha ee dhinaca bidix ee ku yaal tab Sources oo dooro Ku dar Folder goobta shaqada.^{(Add Folder to workspace.)}

Rajo in tani ay ku caawiso.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is оnе of the popular web browsers for wеb development, due 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

• Tabaha ugu Fiican Google Chrome iyo tabaha loogu talagalay isticmaalayaasha PC-ga Windows

• 3 Talooyin iyo Khiyaamo Faa'iido leh oo ku Saabsan Isticmaalka Qoraallada Dheg-dheer

• Sida loo soo dejiyo farta mareegaha iyada oo la adeegsanayo Aaladaha Horumarinta

• Dib u bilow Chrome, Edge ama Firefox adoon lumin tabsiyada gudaha Windows 11/10

• Talooyin ku saabsan adeegsiga Qaybta Kormeerka ee browserka Google Chrome

• Halkee lagu kaydiyaa cookies Windows 10 ee dhammaan daalacashada waaweyn?

• Sida bogga internetka loogu dhejiyo barta shaqada ama Start Menu gudaha Windows 10

• Aqoonso xarfaha Chrome, Edge iyo Firefox adoo isticmaalaya Aaladaha Horumarinta

• Sida loo galo qarsoodiga Chrome, Firefox, Edge, iyo Opera

• Ku tag qarsoodiga leh furaha gaaban ee Chrome, Edge, Firefox, iyo Opera

• Sida sawirada loogu dhejiyo Instagram-ka PC-ga

• Sida loogu suurtogeliyo Java dhammaan daalacashada shabakadda ee waaweyn

• Sida loo sahlo Ha Raad-raacin Chrome, Firefox, Edge, iyo Opera

• Waa maxay DNS ka badan HTTPS ama raadinta DNS ee sugan? Ka yeel Google Chrome!

• Sida loo hagaajiyo Netflix Error Code M7111-1101

• 15ka VPN ee ugu Wanaagsan Google Chrome si loo galo Goobaha Xiran

• Sida loo damiyo ogeysiisyada Chrome-ka Android: Hagaha oo dhammaystiran

• Ku dar dhammaan xisaabaadkaaga iimaylka hal sanduuq oo Gmail ah

• Sida loo xannibo cookies-ka qolo saddexaad ee Chrome, Firefox, Edge, iyo Opera

• Sideen ugu isticmaali karaa Google Input Tools on my Windows 11/10 PC?