Ingen webbplats är perfekt byggd. Liksom alla produkter tillverkade av människor är kodfel en del av processen. Det är därför det är viktigt att noggrant testa alla nya webbplatser du bygger för att se till att den är så felfri som möjligt för att ge dina användare den bästa möjliga upplevelsen. 

Du bör inte testa en webbplats utan att prova Google Chromes^(Chrome) DevTools -^(DevTools) kit först. Chromes^(Chrome) utvecklarläge låter dig prova och noggrant testa en ny webbplats (eller en befintlig) för att hitta och åtgärda buggar. Det kan också ge dig insikt i hur andra webbplatser drivs, inklusive att visa källkoden. 

Här är allt du behöver veta om utvecklarläget för webbläsaren Google Chrome , vilka verktyg det har och hur du använder det effektivt.

Vad är Chrome Developer Mode?^{(What Is Chrome Developer Mode?)}

När vi hänvisar till Chromes^(Chrome) utvecklarläge talar vi inte om samma utvecklarläge^{(same developer mode)} som du ser på Chromebooks . Det vi syftar på är de omfattande utvecklingsverktygen för Chrome (kallade ^(Chrome)Google DevTools ) som är inbyggda i själva webbläsaren.

Det här är verktyg som är utformade för att testa, analysera och avsiktligt bryta (om du behöver) en webbsida som du har laddat in i webbläsaren Google Chrome för teständamål. På en grundläggande nivå kan du använda DevTools för att se källkoden för en webbplats, så att du kan kika under huven för att se hur en webbplats har byggts och hur bra den fungerar.

Google DevTools erbjuder dock mer än så här. Du kan använda Chromes^(Chrome) utvecklarläge för att ändra en sida efter att den har laddats, köra Google Chrome -konsolkommandon för att kontrollera och manipulera sidan, samt köra hastighets- och nätverkstester för att övervaka webbtrafik.

Du kan också emulera andra enheter, inklusive olika operativsystem och skärmupplösningar, i Chrome DevTools- läget. Detta låter dig se om en webbplats har responsiv webbdesign och var webbplatsens innehåll och layouter kommer att ändras beroende på enhetens upplösning eller typ.

Även om dessa verktyg är inriktade på professionella webbutvecklare eller testare, är det också praktiskt för vanliga Chrome - användare att känna sig runt DevTools- sviten. Om du ser ett problem med en webbplats som du inte kan lösa, kan en byte till utvecklarläget för Chrome hjälpa dig att se om problemet ligger på webbplatsen eller din webbläsare.

Hur man kommer åt Google Chrome DevTools-menyn^{(How To Access Google Chrome DevTools Menu)}

Det finns några sätt att komma åt menyn Google Chrome DevTools , beroende på vilket verktyg du vill använda.

Den enklaste metoden att göra detta är från Google Chrome- menyn. För att göra detta, klicka på menyikonen med tre punkter^{(three-dots menu icon)} uppe till höger. Från menyn som visas klickar du på More Tools > Developer Tools .

Detta kommer att öppna DevTools- paketet i en ny meny på höger sida av din öppna Chrome - flik eller fönster.

Du kan också göra detta genom att använda kortkommandon. Från en Windows- eller Linux-dator^{(Linux PC)} öppnar du webbläsaren Chrome och trycker på F12- tangenten. Du kan också trycka på Ctrl + Alt + J eller Ctrl + Alt + I i en öppen flik eller ett öppet fönster i Chrome .

På macOS, tryck på F12 eller tryck på Option + Command + J eller Option + Command + I för att öppna Chrome DevTools- menyn istället. Detta öppnar Chrome -konsolen, med alternativ för att flytta till andra Chrome- verktyg högst upp på DevTools- menyn.

Om du vill kan du se källkoden för en webbplats (öppna fliken Element i ^(Elements)DevTools- menyn i processen) på vilken öppen webbsida som helst genom att högerklicka på och klicka på alternativet Inspektera^{(Inspect )} .

Använder Chrome DevTools^{(Using Chrome DevTools)}

Som vi kort har pekat på kan du använda Chrome DevTools- kit för att se källkoden för en webbplats under fliken Element . ^(Elements)Det låter dig analysera koden bakom sidan du har laddat, samt visa felmeddelanden (som indikerar problem med hur webbplatsen har laddats) i Chrome -konsolen under fliken Konsol^(Console) .

Du kan också se de olika källorna för innehåll från en webbplats under fliken Källor . ^(Sources)Om en webbplats till exempel använder ett innehållsleveransnätverk (CDN)^{(using a content delivery network (CDN))} skulle media från en webbplats listas som en annan källa här.

Med Chromes^(Chrome) utvecklarläge kan du ladda ner innehållet direkt eller utföra mer komplex analys av innehållet.

Om du vill testa hur en webbplats presterar kan du övervaka och registrera din nätverksanvändning under fliken Nätverk . ^(Network)Detta kommer att visa hastigheten, storleken och typen av nätverksbegäranden som görs mellan din webbläsare och webbplatsen.

Till exempel, när en sida laddas först, kommer webbplatsen att ladda själva sidinnehållet, men den kan också begära data från tredjepartsdatabaser. Till exempel, när du loggar in kan detta fråga efter en databas som skulle dyka upp som en nätverksbegäran här.

Du kan analysera detta ytterligare under fliken Prestanda^{(Performance )} , där du kan spela in din Chrome - webbläsaranvändning mer på djupet, inklusive inspelning av skärmdumpar vid olika punkter. Detta kommer att logga hur lång tid det tar att ladda din webbplats för vidare analys.

Google Chrome har ett rykte om sig att vara hårt mot ditt PC-minne^{(being hard on your PC memory)} , så du kan testa din webbplats JavaScript - minnesanvändning under fliken Minne . ^(Memory)Olika Chrome^{(Different Chrome)} -testprofiler kan användas här, med mer information om testet på Chrome DevTools-dokumentationssidan^{(Chrome DevTools documentation page)} .

För mer djupgående analys av innehållet på din webbplats, såväl som eventuell webbläsarlagring den kan använda (till exempel för att logga data), kan du söka på fliken Applikationer . ^{(Application)}Du kan se information om webbplatsens cookies här under avsnittet Cookies , eller rensa lagringen som används genom att klicka på alternativet Rensa lagring .^{(Clear storage)}

Om du är orolig för din webbplatssäkerhet kan du kontrollera hur bra den fungerar under fliken Säkerhet . ^{(Security )}Detta ger dig en snabb översikt över Chromes säkerhetsanalys för en sida, inklusive om sidan har ett korrekt och pålitligt SSL- certifikat eller inte.

Om du vill skapa en rapport om din webbplats prestanda, inklusive om den uppfyller typiska användarstandarder och om webbplatsens prestanda kan påverka sökmotoroptimering, kan du klicka på fliken Lighthouse . Detta erbjuder inställningar som du kan markera eller avmarkera för din rapport – klicka på Skapa rapport^{(Generate report)} för att skapa rapporten att visa.

Detta skrapar knappt på ytan av potentialen som Chrome -utvecklarläget kan ge utvecklare. Om du vill lära dig mer bör Chrome DevTools-dokumentationen^{(Chrome DevTools documentation)} hjälpa dig med de verktyg och funktioner som erbjuds, inklusive hur du bygger dina egna användartester med den. 

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

De flesta Chrome-användare kommer aldrig att veta att Google Chrome DevTools- kit finns i deras webbläsare, men för avancerade användare är det fortfarande ett exceptionellt användbart sätt att testa och analysera webbplatser. Det finns även Chrome-tillägg från tredje part för webbutvecklare^{(Chrome extensions for web developers)} tillgängliga för att testa din webbplats ytterligare.

Om du bygger en grundläggande webbplats^{(building a basic website)} kan ett byte till Chromes^(Chrome) utvecklarläge hjälpa dig att upptäcka fel på din webbplats som inte är direkt synliga. Du kan bara göra detta om Chrome fungerar korrekt, så om du har problem med Chrome-krascher^{(struggling with Chrome crashes)} kan du behöva återställa eller installera om webbläsaren först.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built рerfectly. Like all prоducts made by humans, code errors are part of thе process. That’s why it’s important to thorоughly test any new websitе you build to make sure that it’s as frеe of errors as posѕible to givе your userѕ the best possible experiencе. 

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 Autofyll: En komplett guide

• De 10 bästa integritetstilläggen för Chrome (2022)

• Använd dessa 4 Chrome-plugins för att kryptera dina Gmail-meddelanden

• Google Chrome Innehållsinställningar: En fullständig guide

• Vad är den bästa konferenssamtalstjänsten – de bästa apparna jämfört

• 5 kommandotolktrick för att göra CMD mer intressant

• Tester med döda pixlar för att fixa en fast pixel på din bildskärm

• Bästa programmen för att lägga till ny funktionalitet till Windows 10

• Vad är en chatbot och hur man använder en på din webbplats

• En handledning för Microsoft Planner: Allt du behöver veta

• Hur man blockerar webbplatser med gratis programvara för föräldrakontroll

• HDG förklarar: Vad är SQL, T-SQL, MSSQL, PL/SQL och MySQL?

• Bästa CPU-, grafikkorts- och RAM-tuningverktyg

• Hur du enkelt ripper dina DVD-skivor och Blu-rays med MakeMKV

• Bästa väderwidgetarna för Windows 10/11

• Hur Signal Desktop-appen kan hjälpa till att skydda din integritet

• HDG förklarar: Vad är Markdown och vad är grunderna jag borde veta?

• De 7 bästa klippverktygen för Chromebook

• Använd HP Print and Scan Doctor för att åtgärda vanliga skrivarproblem

• Så här kontrollerar du om din CPU-temperatur är för hög