Niti jedna web stranica nije izgrađena savršeno. Kao i svi proizvodi koje su napravili ljudi, pogreške u kodu dio su procesa. Zato je važno temeljito testirati svaku novu web stranicu koju izradite kako biste bili sigurni da nema pogrešaka što je više moguće kako biste svojim korisnicima pružili najbolje moguće iskustvo. 

Ne biste trebali testirati web-stranicu bez da prvo isprobate komplet alata za razvojne alate Google ^(DevTools)Chromea . ^(Chrome)Način rada za razvojne programere Chromea^(Chrome) omogućuje vam da isprobate i temeljito testirate novu (ili postojeću) web-lokaciju kako biste pronašli i ispravili greške. Također vam može dati uvid u to kako se pokreću druge stranice, uključujući pregled izvornog koda. 

Evo svega što trebate znati o načinu razvojnog programera preglednika Google Chrome , koje alate ima i kako ga učinkovito koristiti.

Što je način rada za razvojne programere Chrome?^{(What Is Chrome Developer Mode?)}

Kada govorimo o načinu rada za razvojne programere Chrome , ne govorimo o istom načinu rada za razvojne programere^{(same developer mode)} koji ćete vidjeti na Chromebookovima^{(Chromebooks)} . Ono na što mislimo su opsežni razvojni alati za Chrome (koji se nazivaju ^(Chrome)Google DevTools ) koji su ugrađeni u sam preglednik.

Ovo su alati dizajnirani za testiranje, analizu i namjerno razbijanje (ako je potrebno) web-stranicu koju ste učitali u preglednik Google Chrome^{(Google Chrome)} u svrhu testiranja. Na osnovnoj razini, možete koristiti DevTools za pregled izvornog koda web-mjesta, omogućujući vam da zavirite ispod haube da vidite kako je web-mjesto napravljeno i koliko dobro radi.

Međutim, Google DevTools^{(Google DevTools)} nudi više od ovoga. Možete koristiti način rada za razvojne programere Chromea^(Chrome) za promjenu stranice nakon što se učita, pokretanje naredbi konzole Google Chrome za kontrolu i upravljanje stranicom, kao i za pokretanje testova brzine i mreže za praćenje web prometa.

Također možete emulirati druge uređaje, uključujući različite operacijske sustave i razlučivosti zaslona, ​​u načinu Chrome DevTools . To vam omogućuje da vidite ima li web-mjesto responzivni web dizajn i gdje će se sadržaj i izgled web-mjesta mijenjati ovisno o razlučivosti ili vrsti uređaja.

Iako su ovi alati namijenjeni profesionalnim web programerima ili testerima, standardnim korisnicima Chromea^(Chrome) također je zgodno da se snalaze u paketu DevTools . Ako vidite problem s web-lokacijom koji ne možete riješiti, prelazak na način rada za razvojne programere Chrome može vam pomoći da vidite je li problem u web-lokaciji ili u vašem pregledniku.

Kako pristupiti izborniku Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Postoji nekoliko načina na koje možete pristupiti izborniku Google Chrome DevTools , ovisno o alatu koji želite koristiti.

Najlakši način za to je iz izbornika Google Chrome . Da biste to učinili, kliknite ikonu izbornika s tri točke^{(three-dots menu icon)} u gornjem desnom kutu. Na izborniku koji se pojavi kliknite More Tools > Developer Tools .

Ovo će otvoriti komplet DevTools u novom izborniku na desnoj strani vaše otvorene kartice ili prozora Chrome .

To možete učiniti i pomoću tipkovničkih prečaca. Na računalu sa sustavom Windows^(Windows) ili Linux^{(Linux PC)} otvorite preglednik Chrome i pritisnite tipku F12 . Također možete pritisnuti tipke Ctrl + Alt + J ili Ctrl + Alt + I na otvorenoj kartici ili prozoru Chromea .^(Chrome)

Na macOS-u pritisnite F12 ili pritisnite tipke Option + Command + J ili Option + Command + I da biste umjesto toga otvorili izbornik Chrome DevTools . Ovo će otvoriti konzolu Chrome , s opcijama za prelazak na druge Chromeove^(Chrome) alate na vrhu izbornika DevTools .

Ako želite, možete vidjeti izvorni kod za web stranicu (otvarajući karticu Elementi^(Elements) u izborniku DevTools u procesu) na bilo kojoj otvorenoj web stranici tako da desnom tipkom miša kliknete i kliknete opciju Inspect .

Korištenje Chromeovih DevTools^{(Using Chrome DevTools)}

Kao što smo ukratko dotaknuli, možete koristiti komplet Chrome DevTools da vidite izvorni kod web-mjesta na kartici Elementi^(Elements) . Omogućit će vam analizu koda iza stranice koju ste učitali, kao i pregled poruka o pogrešci (koje ukazuju na probleme s učitavanjem web-mjesta) na konzoli Chrome na kartici ^(Chrome)Konzola^(Console) .

Također možete vidjeti različite izvore sadržaja s web-mjesta na kartici Izvori^(Sources) . Na primjer, ako web-mjesto koristi mrežu za isporuku sadržaja (CDN)^{(using a content delivery network (CDN))} , mediji s web-mjesta bit će ovdje navedeni kao drugi izvor.

Način rada za razvojne programere Chromea^(Chrome) omogućuje vam da izravno preuzmete taj sadržaj ili izvršite složeniju analizu sadržaja.

Ako želite testirati izvedbu web-mjesta, možete pratiti i bilježiti upotrebu svoje mreže na kartici Mreža^(Network) . To će pokazati brzinu, veličinu i vrstu mrežnih zahtjeva između vašeg preglednika i web-mjesta.

Na primjer, kada se stranica prvi put učita, web-mjesto će sam učitati sadržaj stranice, ali također može zatražiti podatke iz baza podataka trećih strana. Na primjer, kada se prijavite, ovo može tražiti bazu podataka koja bi se ovdje prikazala kao mrežni zahtjev.

To možete dalje analizirati na kartici Performanse^{(Performance )} , gdje možete dublje zabilježiti upotrebu preglednika Chrome , uključujući snimanje snimki zaslona na različitim mjestima. To će zabilježiti koliko je vremena potrebno za učitavanje vaše stranice radi daljnje analize.

Google Chrome ima reputaciju da oštećuje memoriju vašeg računala , tako da na kartici ^{(being hard on your PC memory)}Memorija^(Memory) možete testirati korištenje JavaScript memorije vaše web-lokacije . Ovdje se mogu koristiti različiti^{(Different Chrome)} profili za testiranje Chromea, s dodatnim informacijama o ovom testiranju na stranici dokumentacije Chrome DevTools^{(Chrome DevTools documentation page)} .

Za detaljniju analizu sadržaja vaše web-lokacije, kao i bilo koje pohrane preglednika koju možda koristi (na primjer, za zapis podataka), možete pretraživati ​​na kartici Aplikacija^{(Application)} . Podatke o kolačićima web-mjesta možete vidjeti ovdje u odjeljku Kolačići^(Cookies) ili poništiti pohranu koja se koristi klikom na opciju Obriši pohranu^{(Clear storage)} .

Ako ste zabrinuti za sigurnost svoje web-lokacije, na kartici Sigurnost^{(Security )} možete provjeriti koliko dobro radi . To će vam dati brzi pregled Chromeove sigurnosne analize za stranicu, uključujući ima li stranica ispravan i pouzdan SSL certifikat.

Ako želite generirati izvješće o izvedbi svoje web-lokacije, uključujući ispunjava li ona tipične korisničke standarde i ako izvedba stranice može utjecati na optimizaciju tražilice, možete kliknuti karticu Svjetionik^(Lighthouse) . Ovo nudi postavke koje možete provjeriti ili poništiti za svoje izvješće – kliknite Generiraj izvješće^{(Generate report)} da biste izradili izvješće za pregled.

Ovo jedva da zagrebe površinu potencijala koji razvojni program Chrome može donijeti razvojnim programerima. Ako želite saznati više, dokumentacija Chrome DevTools^{(Chrome DevTools documentation)} trebala bi vam pomoći s ponuđenim alatima i značajkama, uključujući kako s njom izraditi vlastite korisničke testove. 

Napredni trikovi za Google Chrome^{(Advanced Google Chrome Tricks)}

Većina korisnika Chromea nikada neće znati da komplet Google Chrome DevTools postoji u njihovom pregledniku, ali za napredne korisnike on ostaje iznimno koristan način za testiranje i analizu web-mjesta. Dostupna su i Chrome proširenja^{(Chrome extensions for web developers)} trećih strana za web programere koja vam pomažu u daljnjem testiranju vaše stranice.

Ako izrađujete osnovnu web^{(building a basic website)} -lokaciju , prelazak na način rada za razvojne programere Chromea^(Chrome) mogao bi vam pomoći da uočite pogreške na vašoj web-lokaciji koje nisu odmah vidljive. To možete učiniti samo ako Chrome radi ispravno, pa ako imate problema s rušenjem Chromea^{(struggling with Chrome crashes)} , možda ćete prvo morati resetirati ili ponovno instalirati preglednik.

What Is Chrome Developer Mode & What Are Its Uses?

No websіte is built perfectly. Likе all products made by humans, code errors are part оf thе process. That’s why it’s importаnt to thoroughly test any new website you build to make sure that it’s as free of errors as possible to give yoυr 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

• Google Chrome Autofill: Potpuni vodič

• 10 najboljih proširenja privatnosti za Chrome (2022.)

• Koristite ova 4 Chrome dodatka za šifriranje Gmail poruka

• Postavke sadržaja Google Chromea: Potpuni vodič

• Koja je najbolja usluga konferencijskih poziva – najbolje aplikacije u usporedbi

• 7 najboljih alata za uklanjanje virusa za Windows

• Uređivač skripti za Google Apps: sve što trebate znati da biste započeli

• Zapier analizator e-pošte: 3 kreativna načina da ga koristite

• HDG objašnjava: Što je SQL, T-SQL, MSSQL, PL/SQL i MySQL?

• Najbolji vremenski widgeti za Windows 10/11

• Kako bez napora kopirati svoje DVD-ove i Blu-Ray s MakeMKV-om

• Vodič za Microsoft Planner: sve što trebate znati

• Stvari koje treba razmotriti prije stvaranja vlastitog Wiki

• Dva alata za transkripciju za pretvaranje zvuka u tekst

• 5 najboljih aplikacija za filter plavog svjetla za Windows, Mac i Linux

• Kako koristiti Windows Package Manager za instaliranje Windows programa

• Najbolje aplikacije za praćenje korištenja interneta

• 5 najboljih alata za IP skener za Windows, Mac, iOS i Android

• Kako aplikacija Signal za stolna računala može pomoći u zaštiti vaše privatnosti

• 11 najboljih besplatnih softvera za snimke zaslona za Windows