Ma jiro degel si fiican loo dhisay. Sida dhammaan alaabooyinka ay sameeyeen aadanuhu, khaladaadka koodka ayaa qayb ka ah habka. Taasi waa sababta ay muhiim u tahay inaad si fiican u tijaabiso degel kasta oo cusub oo aad dhisto si aad u hubiso inuu yahay mid ka xor ah khaladaadka sida ugu macquulsan si loo siiyo isticmaalayaashaada khibrada ugu fiican ee suurtogalka ah. 

Waa inaadan tijaabin shabakada adoon tijaabin Google Chrome 's DevTools marka hore. Habka horumariyaha Chrome^(Chrome) wuxuu kuu oggolaanayaa inaad tijaabiso oo aad si fiican u tijaabiso goob cusub (ama mid jirta) si aad u hesho oo aad u hagaajiso cayayaanka. Waxa kale oo ay ku siin kartaa aragti ku saabsan sida goobaha kale loo maamulo, oo ay ku jirto daawashada koodka isha. 

Waa kuwan wax walba oo aad u baahan tahay inaad ka ogaato habka horumariyaha biraawsarka Google Chrome , aaladaha uu leeyahay, iyo sida si hufan loogu isticmaalo.

Waa maxay Habka Horumariyaha Chrome?^{(What Is Chrome Developer Mode?)}

Marka aan tixraacno qaabka horumariyaha Chrome , kama hadlayno isla qaabka horumariyaha ee^{(same developer mode)} aad ku arki doonto Chromebooks . Waxa aan tixraaceyno waa aaladaha horumarinta Chrome ee ballaaran (oo loo yaqaan ^(Chrome)Google DevTools ) ee ku dhex dhisan browserka laftiisa.

Kuwani waa qalab loogu talagalay in lagu tijaabiyo, lafo-gureeyo, oo si ulakac ah loo jebiyo (haddii aad u baahan tahay) bog shabakad aad ku shubatay biraawsarkaaga Google Chrome ujeeddooyin tijaabo ah. Heerka aasaasiga ah, waxaad isticmaali kartaa DevTools si aad u aragto koodhka isha ee mareegaha, taasoo kuu ogolaanaysa inaad eegto daboolka hoostiisa si aad u aragto sida goobta loo dhisay iyo sida wanaagsan ee ay u shaqeyso.

Google DevTools waxa ay bixisaa wax ka badan tan, si kastaba ha ahaatee. Waxaad isticmaali kartaa habka horumariyaha Chrome si aad u bedesho bogga ka dib marka la raro, socodsiiso amarada konsole Google Chrome si aad u maamusho oo aad u maamusho bogga, iyo sidoo kale u socodsiiso xawaaraha iyo tijaabinta shabakada si aad ula socoto taraafikada shabakada.

Waxaad sidoo kale ku dayan kartaa aaladaha kale, oo ay ku jiraan nidaamyada hawlgalka ee kala duwan iyo xallinta shaashadda, qaabka Chrome DevTools . Tani waxay kuu ogolaanaysaa inaad aragto haddii goobta ay leedahay nashqad shabakad ka jawaabi karta, iyo halka ay ka kooban tahay goobta iyo habayntu ay isbeddeli doonaan iyadoo ku xidhan xallinta qalabka ama nooca.

In kasta oo aaladahaan loogu talagalay horumariyeyaasha mareegaha xirfadleyda ah ama tijaabiyeyaasha, sidoo kale waa u anfaca isticmaaleyaasha caadiga ah ee Chrome si ay u ogaadaan dariiqa ay ku maraan qolka DevTools . Haddii aad dhibaato ku aragto goobta aanad xallin karin, u beddelashada qaabka horumariyaha Chrome waxay kaa caawin kartaa inaad aragto haddii dhibaatadu ka jirto goobta ama browserkaaga.

Sida loo galo Google Chrome DevTools Menu^{(How To Access Google Chrome DevTools Menu)}

Waxaa jira dhowr siyaabood oo aad ku geli karto Google Chrome DevTools menu, iyadoo ku xiran aaladda aad rabto inaad isticmaasho.

Habka ugu fudud ee tan loo sameeyo waa ka menu Google Chrome . Si taas loo sameeyo, dhagsii calaamadda menu-ka ee saddex-dhibcood ah^{(three-dots menu icon)} ee ku yaal dhinaca sare ee midig. Laga soo bilaabo liiska soo muuqda, dhagsii More Tools > Developer Tools .

Tani waxay ku furi doontaa xirmada DevTools menu cusub oo ku yaal dhanka midig ee tabka Chrome -ka ama daaqadaada furan.^(Chrome)

Waxa kale oo aad tan ku samayn kartaa adiga oo isticmaalaya furayaasha kiiboodhka. Laga soo bilaabo kombuyutarka Windows ama Linux^{(Linux PC)} , fur browserka Chrome oo taabo furaha F12 . Waxaad sidoo kale riixi kartaa Ctrl + Alt + J ama Ctrl + Alt + I furayaasha Chrome -ka furan ama daaqada.

On macOS, taabo F12 ama riix Option + Command + J ama Option + Command + I furayaasha si aad u furto Chrome DevTools menu halkii. Tani waxay furi doontaa console-ka Chrome -ka , oo leh xulashooyin aad ugu guuri karto aaladaha kale ee Chrome -ka ee sare ee menu-ka ^(Chrome)DevTools .

Haddii aad rabto, waxaad arki kartaa koodhka isha ee degelka (furitaanka tabka Elements ee menu ^(Elements)DevTools ee hawsha) bogga shabakad kasta oo furan adiga oo midigta gujinaya oo gujinaya xulashada Kormeer .^{(Inspect )}

Isticmaalka Chrome DevTools^{(Using Chrome DevTools)}

Sida aan si kooban u taabannay, waxaad isticmaali kartaa qalabka Chrome DevTools si aad u aragto koodhka isha ee degelka hoostiisa tabka Elements . Waxay kuu ogolaan doontaa inaad falanqeyso koodka ka dambeeya bogga aad shubtay, iyo sidoo kale inaad aragto fariimaha khaldan (oo muujinaya dhibaatooyinka sida goobta u soo rartay) gudaha konsole-ka Chrome ka ee hoosta Console tab.

Waxa kale oo aad ka arki kartaa ilaha kala duwan ee nuxurka laga helo mareegta hoosteeda tabka Sources . Tusaale ahaan, haddii goobta ay isticmaaleyso shabakad gudbinta macluumaadka (CDN)^{(using a content delivery network (CDN))} , warbaahinta goobta waxaa lagu qori doonaa ilo ka duwan halkan.

Habka horumariyaha Chrome^(Chrome) wuxuu kuu oggolaanayaa inaad si toos ah u soo dejiso waxa ku jira, ama aad samayso falanqayn kakan waxa ku jira.

Haddii aad rabto inaad tijaabiso sida goobtu u shaqeyso, waxaad la socon kartaa oo aad duubi kartaa isticmaalka shabakadaada hoosta tab Network . Tani waxay tusi doontaa xawaaraha, cabbirka, iyo nooca codsiyada shabakadda ee u dhexeeya biraawsarkaaga iyo goobta.

Tusaale ahaan, marka boggu ugu horeeyo, goobta ayaa soo shubi doonta waxa ku jira bogga lafteeda, laakiin waxa kale oo laga yaabaa inay ka codsato xogta xog ururinta qolo saddexaad. Tusaale ahaan, markaad soo gasho, tani waxay waydiin kartaa xog-ururin taasoo u soo bixi doonta codsi shabakad ahaan halkan.

Waxaad si dheeraad ah u falanqeyn kartaa tan hoosta Performance tab, halkaas oo aad ku duubi karto isticmaalka biraawsarkaaga Chrome si qoto dheer, oo ay ku jiraan duubista shaashadaha meelo kala duwan. Tani waxay qori doontaa inta ay qaadanayso in lagu shubo goobtaada si loo baaro.

Google Chrome waxay sumcad u leedahay inay ku adag tahay xusuusta PC-gaaga , si aad u tijaabiso isticmaalka xusuusta ^{(being hard on your PC memory)}JavaScript ee goobtaada hoosta tabka xusuusta . ^(Memory)Noocyada kala duwan ee tijaabada Chrome^{(Different Chrome)} ayaa loo isticmaali karaa halkan, iyadoo macluumaad dheeraad ah oo ku saabsan tijaabadan laga helayo bogga dukumeentiyada Chrome DevTools^{(Chrome DevTools documentation page)} .

Si aad u hesho falanqayn qoto dheer oo ku saabsan waxa ku jira boggaaga, iyo sidoo kale kaydinta browserka kasta ee ay isticmaali karto (tusaale ahaan, si aad xogta u gasho), waxaad ka dhex raadin kartaa tabka Codsiga . ^{(Application)}Waxaad ka arki kartaa macluumaadka buskudka ee halkan hoostooda qaybta Kukiyada^(Cookies) , ama waad nadiifin kartaa kaydinta la isticmaalay adiga oo gujinaya Nadiifi ikhtiyaarka kaydinta .^{(Clear storage)}

Haddii aad ka welwelsan tahay amniga goobtaada, waxaad hubin kartaa sida ugu wanaagsan ee ay ugu shaqeyso hoosta tabka Amniga . ^{(Security )}Tani waxay ku siin doontaa dulmar degdeg ah oo ku saabsan falanqaynta amniga Chrome ka ee bogga, oo ay ku jiraan iyo haddii uu boggu leeyahay shahaado SSL oo sax ah oo la aamini karo iyo in kale.

Haddii aad rabto inaad soo saarto warbixin ku saabsan waxqabadka goobtaada, oo ay ku jirto haddii ay la kulanto heerarka isticmaale ee caadiga ah iyo haddii waxqabadka goobta uu saameyn ku yeelan karo hagaajinta mashiinka raadinta, waxaad riix kartaa tab Lighthouse . Tani waxay ku siinaysaa habayn aad ku hubin karto ama ka saari karto warbixintaada-guji warbixinta^{(Generate report)} abuurista si aad u abuurto warbixinta si aad u aragto.

Tani waxay si dhib yar u xoqinaysaa dusha sare ee suurtogalka ah ee habka horumariyaha Chrome uu u keeni karo horumariyeyaasha. Haddii aad rabto inaad wax badan ka barato, dukumeentiyada DevTools Chrome^{(Chrome DevTools documentation)} waa inay kaa caawiyaan agabka iyo astaamaha lagu soo bandhigay, oo ay ku jiraan sida loo dhiso imtixaannada isticmaalahaaga. 

Khiyaamooyinka Horukacsan ee Google Chrome^{(Advanced Google Chrome Tricks)}

Inta badan isticmaalayaasha Chrome ma ogaan doonaan in qalabka Google Chrome DevTools uu ku jiro biraawsarkooda, laakiin isticmaalayaasha awoodda, waxay ahaanaysaa hab faa'iido leh oo aan caadi ahayn oo lagu tijaabiyo laguna falanqeeyo mareegaha. Waxa kale oo jira kordhinta Chrome^{(Chrome extensions for web developers)} -ka qolo saddexaad oo loogu talagalay soo-saareyaasha shabakadda oo diyaar u ah inay ka caawiyaan tijaabinta goobtaada.

Haddii aad dhisayso degel aasaasi ah^{(building a basic website)} , u beddelashada qaabka horumariyaha Chrome waxay kaa caawin kartaa inaad ogaato khaladaadka goobtaada aan isla markiiba la arki karin. Waxaad samayn kartaa oo kaliya haddii Chrome uu si sax ah u shaqeeyo, markaa haddii aad la halgameyso shilalka Chrome^{(struggling with Chrome crashes)} , waxaa laga yaabaa inaad u baahato inaad dib u dejiso ama dib u darto browserkaaga.

What Is Chrome Developer Mode & What Are Its Uses?

No wеbsіte is built perfeсtly. Like all products made by humans, code errors arе part of the process. That’s why it’s important to thoroughly test anу new website уou buіld to make sure that it’s as free of errors as possible to give your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Buuxinta otomaatiga ah ee Google Chrome: Hage Dhamaystiran

• 10ka Qarsoon ee ugu Fiican Chrome (2022)

• Isticmaal kuwan 4-ta ah ee Chrome Plugins si aad u xafidid fariimahaaga Gmail

• Dejinta Macluumaadka Google Chrome: Hage Buuxa

• Waa maxay Adeegga Wicida Shirka ugu Fiican - Apps-ka ugu Wanaagsan marka la barbardhigo

• 7 Siyood Oo Loo Furo Faylka MDB Iyadoon Microsoft Gelin

• Tifaftirayaasha Markdown-ka ugu Fiican: Dhammaan Platforms iyo Online

• Waa maxay Microsoft Power Automate iyo Qaababka bilaashka ah ee la soo dejiyo

• 7-da Aaladaha ugu Fiican ee ka saarida Bloatware ee Daaqadaha

• Widgets Cimilada ugu Fiican Windows 10/11

• CPU-ga ugu Fiican, Kaarka Fiidiyowga iyo Utilities Tuning RAM

• Si Toos ah u Dhaqaaq, Tirtir, ama Nuqul faylalka ku jira Windows

• Apps-ka ugu Wacan ee lagula soconayo Isticmaalka Internetka

• 5-ta Apps ee ugu Fiican ee Shaandhaynta Iftiin Buluugga ah ee loogu talagalay Windows, Mac iyo Linux

• 5 Apps oo la qaadi karo oo aad rabto in aad ku haysato USB stick

• Sida loo Isticmaalo Maamulaha Xidhmada Windows si loo rakibo Barnaamijyada Windows

• Tafatiraha qoraalka Apps Google: Wax kasta oo aad u baahan tahay inaad ogaato si aad u bilowdo

• 5 Windows Alternatives ee Linux sudo Command

• Isticmaal HP Print and Scan Doctor si aad u xalliso dhibaatooyinka daabacaadaha caadiga ah

• Sida Shabakadu u Shaqeeyaan: Baro waxa Hoodka Hoostiisa ku jira