Żadna strona nie jest zbudowana perfekcyjnie. Podobnie jak wszystkie produkty wytwarzane przez ludzi, błędy kodu są częścią procesu. Dlatego ważne jest, aby dokładnie przetestować każdą nową witrynę, którą tworzysz, aby upewnić się, że jest ona jak najbardziej wolna od błędów, aby zapewnić użytkownikom jak najlepsze wrażenia. 

Nie należy testować witryny internetowej bez wcześniejszego wypróbowania zestawu DevTools^(DevTools) Google Chrome . ^(Chrome)Tryb programisty Chrome^(Chrome) pozwala wypróbować i dokładnie przetestować nową witrynę (lub istniejącą), aby znaleźć i naprawić błędy. Może również dać wgląd w sposób działania innych witryn, w tym wyświetlanie kodu źródłowego. 

Oto wszystko, co musisz wiedzieć o trybie programisty przeglądarki Google Chrome , o dostępnych w nim narzędziach i o tym, jak skutecznie z niego korzystać.

Co to jest tryb programisty Chrome?^{(What Is Chrome Developer Mode?)}

Kiedy mówimy o trybie programisty Chrome , nie mówimy o tym samym trybie programisty^{(same developer mode)} , który zobaczysz na Chromebookach^{(Chromebooks)} . To, o czym mówimy, to rozbudowane narzędzia programistyczne Chrome (zwane Google DevTools ), które są wbudowane w samą przeglądarkę.

Są to narzędzia przeznaczone do testowania, analizowania i celowego łamania (w razie potrzeby) strony internetowej załadowanej do przeglądarki Google Chrome^{(Google Chrome)} w celach testowych. Na podstawowym poziomie możesz użyć DevTools , aby wyświetlić kod źródłowy witryny, co pozwala zajrzeć pod maskę, aby zobaczyć, jak witryna została zbudowana i jak dobrze działa.

Google DevTools oferuje jednak więcej. Możesz użyć trybu programisty Chrome , aby zmienić stronę po jej załadowaniu, uruchomić polecenia konsoli Google Chrome , aby kontrolować i manipulować stroną, a także uruchamiać testy szybkości i sieci w celu monitorowania ruchu internetowego.

W trybie Chrome DevTools^{(Chrome DevTools)} możesz też emulować inne urządzenia, w tym różne systemy operacyjne i rozdzielczości ekranu . Dzięki temu można sprawdzić, czy witryna ma responsywny projekt strony internetowej oraz gdzie zawartość i układ witryny będą się zmieniać w zależności od rozdzielczości lub typu urządzenia.

Chociaż te narzędzia są przeznaczone dla profesjonalnych twórców stron internetowych lub testerów, przydaje się również dla standardowych użytkowników przeglądarki Chrome^(Chrome) , którzy znają się na pakiecie DevTools . Jeśli zauważysz problem z witryną, którego nie możesz rozwiązać, przejście do trybu programisty Chrome może pomóc Ci sprawdzić, czy problem dotyczy witryny, czy przeglądarki.

Jak uzyskać dostęp do menu Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Istnieje kilka sposobów uzyskania dostępu do menu Google Chrome DevTools , w zależności od narzędzia, którego chcesz użyć.

Najłatwiej to zrobić z menu Google Chrome . Aby to zrobić, kliknij ikonę menu z trzema kropkami^{(three-dots menu icon)} w prawym górnym rogu. W wyświetlonym menu kliknij More Tools > Developer Tools .

Spowoduje to otwarcie zestawu DevTools w nowym menu po prawej stronie otwartej karty lub okna Chrome .

Możesz to również zrobić za pomocą skrótów klawiaturowych. Na komputerze z systemem Windows^(Windows) lub Linux^{(Linux PC)} otwórz przeglądarkę Chrome i naciśnij klawisz F12 . Możesz też nacisnąć Ctrl + Alt + J lub Ctrl + Alt + I w otwartej karcie lub oknie Chrome .

W systemie macOS naciśnij klawisz F12 lub naciśnij Option + Command + J lub Option + Command + I , aby zamiast tego otworzyć menu Chrome DevTools . Spowoduje to otwarcie konsoli Chrome z opcjami przejścia do innych narzędzi Chrome w górnej części menu DevTools .

Jeśli chcesz, możesz wyświetlić kod źródłowy witryny (otwierając kartę Elementy menu ^(Elements)DevTools w procesie) na dowolnej otwartej stronie internetowej, klikając prawym przyciskiem myszy i klikając opcję Sprawdź^{(Inspect )} .

Korzystanie z Chrome DevTools^{(Using Chrome DevTools)}

Jak już pokrótce wspomnieliśmy, możesz użyć zestawu Chrome DevTools , aby zobaczyć kod źródłowy witryny na karcie Elementy^(Elements) . Pozwoli Ci to przeanalizować kod za załadowaną stroną, a także wyświetlić komunikaty o błędach (wskazujące problemy z załadowaniem strony) w konsoli Chrome na karcie ^(Chrome)Konsola^(Console) .

Możesz także wyświetlić różne źródła treści z witryny na karcie Źródła^(Sources) . Na przykład, jeśli witryna korzysta z sieci dostarczania treści (CDN)^{(using a content delivery network (CDN))} , multimedia z witryny będą tutaj wymienione jako inne źródło.

Tryb programisty Chrome^(Chrome) umożliwia bezpośrednie pobieranie treści lub przeprowadzanie bardziej złożonej analizy treści.

Jeśli chcesz sprawdzić, jak działa witryna, możesz monitorować i rejestrować wykorzystanie sieci na karcie Sieć^(Network) . To pokaże prędkość, rozmiar i typ żądań sieciowych przesyłanych między Twoją przeglądarką a witryną.

Na przykład, gdy strona załaduje się po raz pierwszy, witryna sama załaduje zawartość strony, ale może również zażądać danych z baz danych stron trzecich. Na przykład po zalogowaniu może to spowodować zapytanie do bazy danych, która pojawiłaby się tutaj jako żądanie sieciowe.

Możesz to dokładniej przeanalizować na karcie Wydajność^{(Performance )} , gdzie możesz dokładniej rejestrować korzystanie z przeglądarki Chrome , w tym nagrywać zrzuty ekranu w różnych punktach. Będzie to rejestrować, ile czasu zajmuje wczytanie witryny do dalszej analizy.

Google Chrome ma opinię tego, że obciąża pamięć komputera^{(being hard on your PC memory)} , więc możesz przetestować użycie pamięci JavaScript w swojej witrynie na karcie ^(JavaScript)Pamięć^(Memory) . W tym miejscu można używać różnych profili testowania Chrome . Więcej informacji na temat tego testowania można znaleźć na ^{(Different Chrome)}stronie dokumentacji Chrome DevTools^{(Chrome DevTools documentation page)} .

Aby uzyskać bardziej dogłębną analizę zawartości witryny, a także używanej przez nią pamięci przeglądarki (na przykład do rejestrowania danych), możesz przeszukać kartę Aplikacja^{(Application)} . Możesz wyświetlić informacje o plikach cookie witryny w sekcji Pliki cookie^(Cookies) lub wyczyścić pamięć, która jest używana, klikając opcję Wyczyść pamięć^{(Clear storage)} .

Jeśli martwisz się o bezpieczeństwo swojej witryny, możesz sprawdzić, jak dobrze działa w zakładce Bezpieczeństwo . ^{(Security )}Dzięki temu uzyskasz szybki przegląd analizy bezpieczeństwa Chrome dla strony, w tym czy strona ma poprawny i zaufany certyfikat SSL .

Jeśli chcesz wygenerować raport na temat wydajności Twojej witryny, w tym tego, czy spełnia ona typowe standardy użytkownika i jeśli wydajność witryny może mieć wpływ na optymalizację pod kątem wyszukiwarek, możesz kliknąć zakładkę Lighthouse . To oferuje ustawienia, które możesz zaznaczyć lub odznaczyć dla swojego raportu — kliknij Generuj raport^{(Generate report)} , aby utworzyć raport do wyświetlenia.

To ledwie zarysowuje potencjał, jaki tryb programisty Chrome może przynieść programistom. Jeśli chcesz dowiedzieć się więcej, dokumentacja Chrome DevTools^{(Chrome DevTools documentation)} powinna pomóc Ci w korzystaniu z oferowanych narzędzi i funkcji, w tym w tworzeniu własnych testów użytkowników. 

Zaawansowane sztuczki Google Chrome^{(Advanced Google Chrome Tricks)}

Większość użytkowników Chrome nigdy nie dowie się, że zestaw Google Chrome DevTools istnieje w ich przeglądarce, ale dla zaawansowanych użytkowników pozostaje on wyjątkowo przydatnym sposobem testowania i analizowania witryn internetowych. Dostępne są również rozszerzenia Chrome^{(Chrome extensions for web developers)} innych firm dla programistów internetowych , które ułatwiają dalsze testowanie Twojej witryny.

Jeśli tworzysz podstawową witrynę internetową^{(building a basic website)} , przejście do trybu programisty Chrome może pomóc w wykryciu w witrynie błędów, które nie są od razu widoczne. Możesz to zrobić tylko wtedy, gdy Chrome działa poprawnie, więc jeśli zmagasz się z awariami Chrome^{(struggling with Chrome crashes)} , może być konieczne uprzednie zresetowanie lub ponowne zainstalowanie przeglądarki.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all рrodυсts made by humans, code errors are part of the process. That’s why it’ѕ important to thoroughlу test any new website you bυild to make sure that іt’s as free of errors as poѕsible to give your users the best possіble 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

• Autouzupełnianie Google Chrome: kompletny przewodnik

• 10 najlepszych rozszerzeń prywatności dla Chrome (2022)

• Użyj tych 4 wtyczek do Chrome, aby zaszyfrować wiadomości w Gmailu

• Ustawienia treści Google Chrome: pełny przewodnik

• Jaka jest najlepsza usługa połączeń konferencyjnych — porównanie najlepszych aplikacji

• 7 najlepszych narzędzi do wycinania dla Chromebooka

• Co to jest chatbot i jak go używać na swojej stronie

• HDG wyjaśnia: Co to jest SQL, T-SQL, MSSQL, PL/SQL i MySQL?

• HDG wyjaśnia: Co to jest przecena i jakie są podstawy, które powinienem znać?

• Jak blokować witryny za pomocą bezpłatnego oprogramowania do kontroli rodzicielskiej?

• Avast Online Security Extension: czy warto go używać?

• Jak używać Menedżera pakietów systemu Windows do instalowania programów systemu Windows

• 5 najlepszych narzędzi skanera IP dla systemów Windows, Mac, iOS i Android

• Najlepsze aplikacje do monitorowania korzystania z Internetu

• Najlepsze programy do dodania nowych funkcji do systemu Windows 10

• Użyj narzędzia HP Print and Scan Doctor, aby rozwiązać typowe problemy z drukarką

• Najlepsze narzędzia do dostrajania procesora, karty graficznej i pamięci RAM

• Automatycznie przenoś, usuwaj lub kopiuj pliki w systemie Windows

• Dwa narzędzia do transkrypcji do przekształcania dźwięku w tekst

• Najlepsze 4 alternatywy dla Google Chromecast