Ingen hjemmeside er bygget perfekt. Som alle produkter fremstillet af mennesker er kodefejl en del af processen. Derfor er det vigtigt grundigt at teste enhver ny hjemmeside, du bygger, for at sikre, at den er så fri for fejl som muligt for at give dine brugere den bedst mulige oplevelse. 

Du bør ikke teste et websted uden først at prøve Google Chromes^(Chrome) DevTools -^(DevTools) sæt. Chrome -udviklertilstand giver dig mulighed for at prøve og grundigt teste et nyt websted (eller et eksisterende) for at finde og rette fejl. Det kan også give dig indsigt i, hvordan andre websteder drives, herunder at se kildekoden. 

Her er alt, hvad du behøver at vide om Google Chrome -browserens udviklertilstand, hvilke værktøjer den har, og hvordan du bruger den effektivt.

Hvad er Chrome Developer Mode?^{(What Is Chrome Developer Mode?)}

Når vi henviser til Chrome -udviklertilstanden, taler vi ikke om den samme udviklertilstand,^{(same developer mode)} som du vil se på Chromebooks . Det, vi henviser til, er de omfattende Chrome - udviklingsværktøjer (kaldet Google DevTools ), der er indbygget i selve browseren.

Disse er værktøjer designet til at teste, analysere og bevidst bryde (hvis du har brug for det) en webside, du har indlæst i Google Chrome -browseren til testformål. På et grundlæggende niveau kan du bruge DevTools til at se kildekoden til et websted, så du kan kigge under motorhjelmen for at se, hvordan et websted er blevet bygget, og hvor godt det kører.

Google DevTools tilbyder dog mere end dette. Du kan bruge Chrome -udviklertilstand til at ændre en side, efter den er indlæst, køre Google Chrome -konsolkommandoer for at kontrollere og manipulere siden, samt køre hastigheds- og netværkstests for at overvåge webtrafik.

Du kan også efterligne andre enheder, inklusive forskellige operativsystemer og skærmopløsninger, i tilstanden Chrome DevTools . Dette lader dig se, om et websted har responsivt webdesign, og hvor webstedets indhold og layout vil ændre sig afhængigt af enhedens opløsning eller type.

Selvom disse værktøjer er rettet mod professionelle webudviklere eller testere, er det også praktisk for standard Chrome - brugere at kende deres vej rundt i DevTools- pakken. Hvis du ser et problem med et websted, som du ikke kan løse, kan skift til Chrome -udviklertilstand hjælpe dig med at se, om problemet er med webstedet eller din browser.

Sådan får du adgang til menuen Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Der er et par måder, du kan få adgang til menuen Google Chrome DevTools , afhængigt af det værktøj, du ønsker at bruge.

Den nemmeste metode til at gøre dette er fra Google Chrome- menuen. For at gøre dette skal du klikke på menuikonet^{(three-dots menu icon)} med tre prikker øverst til højre. Klik på More Tools > Developer Tools i menuen, der vises .

Dette åbner DevTools- sættet i en ny menu i højre side af din åbne Chrome - fane eller -vindue.

Du kan også gøre dette ved at bruge tastaturgenveje. Fra en Windows- eller Linux-pc skal du åbne Chrome - browseren og trykke på F12 - tasten. Du kan også trykke på Ctrl + Alt + J eller Ctrl + Alt + I i en åben Chrome- fane eller et åbent vindue.

På macOS skal du trykke på F12 eller trykke på Option + Command + J eller Option + Command + I - tasterne for at åbne Chrome DevTools- menuen i stedet. Dette åbner Chrome -konsollen med muligheder for at flytte til andre Chrome - værktøjer øverst i DevTools- menuen.

Hvis du vil, kan du se kildekoden til et websted (åbner fanen Elementer^(Elements) i menuen DevTools i processen) på enhver åben webside ved at højreklikke på og klikke på Inspect - indstillingen.

Brug af Chrome DevTools^{(Using Chrome DevTools)}

Som vi kort har været inde på, kan du bruge Chrome DevTools- sættet til at se kildekoden til et websted under fanen Elementer^(Elements) . Det giver dig mulighed for at analysere koden bag den side, du har indlæst, samt se fejlmeddelelser (som indikerer problemer med, hvordan webstedet er indlæst) i Chrome -konsollen under fanen Konsol^(Console) .

Du kan også se de forskellige kilder til indhold fra et websted under fanen Kilder^(Sources) . Hvis et websted f.eks. bruger et indholdsleveringsnetværk (CDN)^{(using a content delivery network (CDN))} , vil medier fra et websted blive angivet som en anden kilde her.

Chrome -udviklertilstand giver dig mulighed for at downloade indholdet direkte eller udføre mere kompleks analyse af indholdet.

Hvis du vil teste, hvordan et websted klarer sig, kan du overvåge og registrere dit netværksforbrug under fanen Netværk^(Network) . Dette vil vise hastigheden, størrelsen og typen af ​​netværksanmodninger mellem din browser og webstedet.

For eksempel, når en side først indlæses, vil webstedet indlæse selve sideindholdet, men det kan også anmode om data fra tredjepartsdatabaser. For eksempel, når du logger på, kan dette forespørge en database, der vil dukke op som en netværksanmodning her.

Du kan analysere dette yderligere under fanen Ydelse^{(Performance )} , hvor du kan optage din Chrome - browserbrug i større dybde, herunder optage skærmbilleder på forskellige punkter. Dette vil logge, hvor lang tid det tager at indlæse dit websted til yderligere analyse.

Google Chrome har ry for at være hård ved din pc-hukommelse^{(being hard on your PC memory)} , så du kan teste dit websteds JavaScript - hukommelsesbrug under fanen Hukommelse^(Memory) . Forskellige Chrome^{(Different Chrome)} -testprofiler kan bruges her, med yderligere oplysninger om denne test på Chrome DevTools-dokumentationssiden^{(Chrome DevTools documentation page)} .

For mere dybdegående analyse af dit websteds indhold, såvel som eventuel browserlagring, det måtte bruge (for eksempel til at logge data), kan du søge gennem fanen Application . Du kan se oplysninger om webstedscookie her under sektionen Cookies eller rydde den lagring, der bruges, ved at klikke på Ryd lagring^{(Clear storage)} .

Hvis du er bekymret for dit websteds sikkerhed, kan du tjekke, hvor godt det fungerer, under fanen Sikkerhed^{(Security )} . Dette giver dig et hurtigt overblik over Chromes sikkerhedsanalyse for en side, herunder hvorvidt siden har et korrekt og pålideligt SSL - certifikat.

Hvis du vil generere en rapport om dit websteds ydeevne, herunder om det opfylder typiske brugerstandarder, og hvis webstedets ydeevne kan påvirke søgemaskineoptimering, kan du klikke på fanen Lighthouse . Dette tilbyder indstillinger, du kan markere eller fjerne markeringen fra for din rapport – klik på Generer rapport^{(Generate report)} for at oprette den rapport, du vil se.

Dette ridser knap overfladen af ​​det potentiale, som Chrome -udviklertilstand kan bringe udviklere. Hvis du vil vide mere, bør Chrome DevTools-dokumentationen^{(Chrome DevTools documentation)} hjælpe dig med de værktøjer og funktioner, der tilbydes, herunder hvordan du opbygger dine egne brugertest med det. 

Avancerede Google Chrome-tricks^{(Advanced Google Chrome Tricks)}

De fleste Chrome-brugere vil aldrig vide, at Google Chrome DevTools- sættet findes i deres browser, men for superbrugere er det stadig en usædvanlig nyttig måde at teste og analysere websteder på. Der er også tredjeparts Chrome-udvidelser til webudviklere^{(Chrome extensions for web developers)} tilgængelige for at hjælpe med at teste dit websted yderligere.

Hvis du bygger et grundlæggende websted^{(building a basic website)} , kan skift til Chrome -udviklertilstand hjælpe dig med at finde fejl på dit websted, som ikke umiddelbart er synlige. Du kan kun gøre dette, hvis Chrome fungerer korrekt, så hvis du kæmper med Chrome-nedbrud^{(struggling with Chrome crashes)} , skal du muligvis nulstille eller geninstallere din browser først.

What Is Chrome Developer Mode & What Are Its Uses?

No webѕite іs built рerfectly. Like all products made by humans, code errors arе part of the procеss. That’s why it’s important to thoroughlу test any new website you build to make sυrе that it’s as free оf 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

• Google Chrome Autofyld: En komplet vejledning

• De 10 bedste privatlivsudvidelser til Chrome (2022)

• Brug disse 4 Chrome-plugins til at kryptere dine Gmail-beskeder

• Indstillinger for Google Chrome-indhold: En komplet vejledning

• Hvad er den bedste konferenceopkaldstjeneste – de bedste apps sammenlignet

• Hvordan Signal Desktop-appen kan hjælpe med at beskytte dit privatliv

• Bedste Markdown-redaktører: Alle platforme og online

• Virker Microsofts Windows-filgendannelse? Vi testede det.

• 5 bedste softwareprogrammer til at administrere dobbeltskærme

• Sådan ripper du dine dvd'er og Blu-rays nemt med MakeMKV

• 7 måder at åbne en MDB-fil uden Microsoft Access

• En Microsoft Planner Tutorial: Alt hvad du behøver at vide

• Brug et gammelt webcam til at overvåge din ejendom gratis

• 5 kommandoprompttricks til at gøre CMD mere interessant

• Sådan luges dublerede digitale fotos ud på din Windows-computer

• 5 bedste Firefox Privacy Add-ons til online sikkerhed

• HDG forklarer: Hvad er SQL, T-SQL, MSSQL, PL/SQL og MySQL?

• Bedste CPU, videokort og RAM Tuning Utilities

• Bedste vejrwidgets til Windows 10/11

• 3 værktøjer til at diagnosticere og fejlfinde problemer med din skærm