Google Chrome jest przeznaczony nie tylko dla zwykłych użytkowników internetu, ale także dla twórców stron internetowych, którzy często tworzą witryny internetowe, projektują blogi itp. Opcja Inspect Element lub Inspect w przeglądarce Google Chrome^{(Google Chrome)} pomaga użytkownikom znaleźć niektóre informacje o witrynie, która jest ukryta . Oto kilka wskazówek dotyczących korzystania z narzędzia Inspect Element przeglądarki Google Chrome na komputerze z systemem Windows^{(Windows PC)} .

Sprawdź element Google Chrome

1] Find hidden JavaScript/Media files

Wiele witryn wyświetla wyskakujące okienka, jeśli użytkownik pozostaje na stronie dłużej niż 15 lub 20 sekund. Lub wiele razy obraz, reklama lub ikona otwierają się po kliknięciu gdzieś losowo. Aby znaleźć te ukryte pliki na stronie internetowej, możesz skorzystać z zakładki Źródła w ^(Sources)Inspect Element . Po lewej stronie pokazuje listę w widoku drzewa, którą można przeglądać.

2] Get HEX/RGB color code in Chrome

Czasami możemy polubić kolor i możemy chcieć poznać jego kod koloru. Możesz łatwo znaleźć kod koloru HEX lub RGB używany na określonej stronie internetowej, korzystając z natywnej opcji w Google Chrome . Kliknij kolor prawym przyciskiem myszy i kliknij ^{(Right-click)}Sprawdź^(Inspect) . W większości przypadków kod koloru otrzymasz po prawej stronie z innymi CSS . Jeśli go nie widzisz, być może będziesz musiał użyć darmowego oprogramowania do wybierania kolorów.

WSKAZÓWKA^(TIP) : Przyjrzyj się także tym narzędziom online Color Picker^{(Color Picker online tools)} .

3] Uzyskaj wskazówki dotyczące poprawy wydajności strony internetowej^{(3] Get web page performance improvement tips)}

Każdy lubi lądować na stronie, która szybko się otwiera. Jeśli projektujesz swoją stronę internetową, zawsze powinieneś o tym pamiętać. Istnieje wiele narzędzi do sprawdzania i optymalizacji szybkości ładowania strony. Jednak Google Chrome ma również wbudowane narzędzie, które pozwala użytkownikom uzyskać wskazówki dotyczące poprawy szybkości ładowania witryny. Aby uzyskać dostęp do tych narzędzi, przejdź do zakładki Audyty^(Audits) i upewnij się, że wybrane są opcje Wykorzystanie^{(Network Utilization)} sieci , Wydajność strony internetowej^{(Web Page Performance)} oraz Odśwież stronę i Audyt po załadowaniu^{(Reload Page and Audit on Load)} . Następnie kliknij przycisk Uruchom^{(Run )} . Przeładuje stronę i pokaże pewne informacje, które można wykorzystać do przyspieszenia strony. Na przykład możesz uzyskać wszystkie zasoby, które nie mają wygaśnięcia pamięci podręcznej, JavaScriptktóre można połączyć w jeden plik i tak dalej.

4] Sprawdź responsywność^{(4] Check responsiveness)}

Stworzenie responsywnej strony internetowej jest w dzisiejszych czasach kluczowe. Istnieje wiele narzędzi, które mogą sprawdzić, czy Twoja witryna jest całkowicie responsywna, czy nie. Jednak to narzędzie przeglądarki Google Chrome^{(Google Chrome)} pomaga użytkownikom zorientować się, czy witryna jest responsywna, czy nie , a także sprawdzić, jak wyglądałaby na konkretnym urządzeniu mobilnym. Otwórz dowolną witrynę, pobierz zakładkę Sprawdź element^{(Inspect Element )} , kliknij przycisk urządzenia mobilnego^{(mobile )} , ustaw rozdzielczość lub wybierz żądane urządzenie, aby przetestować stronę internetową.

5] Edytuj witrynę na żywo^{(5] Edit live website)}

Załóżmy, że tworzysz stronę internetową, ale nie masz pewności co do schematu kolorów, rozmiaru menu nawigacyjnego, zawartości lub proporcji paska bocznego. Możesz edytować swoją aktywną witrynę internetową za pomocą opcji Sprawdź element ^{(Inspect Element)}przeglądarki Google Chrome^{(Google Chrome)} . Chociaż nie możesz zapisać zmian na działającej stronie internetowej, możesz przeprowadzić całą edycję, aby móc z niej dalej korzystać. Aby to zrobić, otwórz Inspect Element , wybierz właściwość HTML po lewej stronie i dokonaj zmian stylizacji po prawej stronie. Jeśli dokonasz jakichkolwiek zmian w CSS , możesz kliknąć link do pliku, skopiować cały kod i wkleić go do oryginalnego pliku.

Inspect Element Google Chrome to prawdziwy towarzysz każdego twórcy stron internetowych . Nie ma znaczenia, czy tworzysz witrynę jednostronicową, czy dynamiczną, z pewnością możesz skorzystać z tych wskazówek.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed nоt just for regular internet users but also for web develоpers, who often сreate a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome nie odpowiada, uruchomić ponownie teraz?

• Jak naprawić błędy pobierania plików w przeglądarce Google Chrome

• Jak zmienić domyślne ustawienia drukowania w Google Chrome

• Jak zniszczyć profil w przeglądarce Zamknij w Google Chrome

• Anna Assistant to idealna asystentka głosowa dla Google Chrome

• Jak włączyć i używać funkcji Commander w Google Chrome

• Rozszerzenia Menedżera kart zwiększające produktywność w Google Chrome

• Rozszerzenia Google Chrome nie działają w systemie Windows 11/10

• Jak zainstalować Google Chrome za pomocą Windows PowerShell

• Napraw błąd ERR_SPDY_PROTOCOL_ERROR w Google Chrome

• Google Chrome, aby ograniczyć subskrypcje powiadomień push do 90 dni

• Jak sprawdzić szybkość połączenia internetowego za pomocą przeglądarki Google Chrome

• Twój profil nie mógł zostać poprawnie otwarty w Google Chrome

• Jak włączyć lub wyłączyć ikonę Tab Search w Google Chrome

• Jak włączyć nowy interfejs Material Design dla przeglądarki Google Chrome

• Jak uniemożliwić użytkownikom instalowanie rozszerzeń w Google Chrome

• Jak naprawić „Kurza twarz!” komunikat o błędzie w przeglądarce Google Chrome

• Pobierz oficjalne motywy Google Chrome dla swojej przeglądarki

• Napraw błąd pobierania skryptu proxy w Google Chrome

• Google Chrome nie usuwa historii przeglądania i danych