Czym jest konsola deweloperska?
Konsola deweloperska to zintegrowane środowisko programistyczne z zestawem narzędzi, które umożliwia tworzenie, debugowanie i testowanie aplikacji bezpośrednio w przeglądarce. Rejestruje (loguje) informacje związane ze stroną, takie jak żądania sieciowe, HTML, CSS, JavaScript, ostrzeżenia i błędy. Zrzuty ostrzeżeń z Konsoli deweloperskiej mogą być niezwykle pomocne dla zespołu wsparcia Elfsight przy rozwiązywaniu problemów z naszymi widżetami.
Jak otworzyć konsolę w różnych przeglądarkach
Wystarczy kilka kliknięć, aby otworzyć konsolę w wybranej przeglądarce, a także można ją uruchomić za pomocą skrótów klawiszowych. W poniższym przewodniku znajdziesz krótkie instrukcje, jak otworzyć konsolę we wszystkich najpopularniejszych przeglądarkach oraz zrzuty ekranu z całego procesu.
Jak otworzyć konsolę deweloperską w Chrome
Aby otworzyć panel deweloperski w Google Chrome, należy kliknąć ikonę z trzema kropkami w prawym górnym rogu okna przeglądarki, wybrać Więcej narzędzi, a w rozwijanym menu znajdziesz Narzędzia deweloperskie.
Kolejną opcją jest użycie skrótu narzędzi deweloperskich Chrome: F12 (Windows/Linux) oraz Option + ⌘ + J (macOS).
Zobaczysz konsolę na dole lub po prawej stronie okna przeglądarki Chrome. Wybierz opcję Console i zacznij analizować wydajność swojego kodu.
Ponadto, gdy już nauczysz się otwierać konsolę deweloperską w Chrome, zapoznasz się z procesem otwierania narzędzi deweloperskich w różnych przeglądarkach.
Otwórz Narzędzia deweloperskie Opera
Możesz użyć konsoli Opera do przeglądania, edytowania i debugowania HTML, CSS i JavaScript. Aby z niej skorzystać, użyj poniższego skrótu: Ctrl+Shift+C aby otworzyć Konsolę narzędzi deweloperskich lub Ctrl+Shift+I aby najpierw otworzyć narzędzia deweloperskie i dalej wybrać Konsola.
Uruchom konsolę sieciową Firefox
Konsola Mozilla może zostać uruchomiona poprzez kliknięcie w Web Developer w menu z prawego górnego rogu, a następnie wybranie Konsoli przeglądarki. Możesz także użyć skrótu narzędzi deweloperskich Firefox: Ctrl+Shift+J.
Włącz narzędzia deweloperskie w Safari
W Safari, aby otworzyć konsolę, musisz włączyć Menu deweloperskie. Aby to zrobić, przejdź do ustawień Safari (Menu Safari > Preferencje) i wybierz Karta Zaawansowane.
Ponadto otworzysz konsolę deweloperską w Safari, klikając na Develop > Show Javascript Console. Możesz także skorzystać ze skrótu Option + ⌘ + C. Zakładka konsoli otworzy się automatycznie, nie będziesz musiał jej wybierać.
Otwórz konsolę Microsoft Edge
Otwórz konsolę przeglądarki Edge, klikając Narzędzia deweloperskie F12 w menu rozwijanym lub naciskając F12. Możesz także kliknąć prawym przyciskiem myszy dowolny element strony i wybrać Zbadaj element.
Otwórz konsolę Internet Explorera
Konsolę deweloperską Internet Explorera można otworzyć w ten sam sposób co konsolę Edge. Kliknij w rozwijanym menu na Narzędzia deweloperskie F12 w menu rozwijanym lub po prostu naciśnij klawisz F12. Dzięki temu uzyskasz dostęp do konsoli Internet Explorera i będziesz mógł ją analizować.
Główne zakładki w Narzędziach deweloperskich
Poniżej znajduje się krótkie zestawienie najważniejszych kart konsoli w Narzędziach deweloperskich. Omówiliśmy je na przykładzie przeglądarki Google Chrome.
Zakładka Elementy
Panel elementów to doskonałe narzędzie dla osób, które chcą przeanalizować wydajność CSS i HTML na swojej stronie. Możesz również kliknąć prawym przyciskiem myszy dowolny element strony, wybrać Zbadaj element, i zobaczyć atrybuty elementu podświetlone w kodzie.
Konsola
Zakładka Konsola w Narzędziach deweloperskich Chrome służy do wyświetlania działania skryptów na stronie internetowej. Jest to interpreter poleceń, którego możesz użyć do uruchomienia silnika skryptów i wpisania poleceń, aby wykonywać skrypty. Jeśli nasz zespół wsparcia prosi Cię o zrobienie zrzutu ekranu konsoli, potrzebne będzie zdjęcie z zakładki Konsola.
Panel źródeł
Możesz skorzystać z Karta Źródeł w Chrome DevTools, aby edytować JavaScript i CSS, przeglądać pliki, tworzyć fragmenty JavaScript i używać ich dalej. Ta karta może także pomóc w debugowaniu kodu JavaScript.
Zakładka Sieć
Panel sieci może być używany jako narzędzie testowe, które bada wydajność strony i identyfikuje problemy, które spowalniają witrynę. Zakładka Sieć w Chrome zaczyna rejestrować wszystkie żądania sieciowe po otwarciu DevTools. Możesz je dalej sortować według różnych właściwości.
Zakładka Wydajność
Panel Wydajność umożliwia rejestrowanie czasu działania i wydajności ładowania. Ten panel pokazuje, jak dobrze strona działa po pełnym załadowaniu i podczas odwiedzin użytkowników. Możesz wybrać nagrywanie wydajności lub wykonać serię zrzutów ekranu procesu.
Karta Pamięci
Można użyć przeglądarki Chrome Pamięć tab, aby diagnozować i naprawiać problemy z pamięcią, takie jak nadmierne zużycie pamięci, zbieranie śmieci (garbage collection) i wycieki. Wszystkie te problemy wpływają na wydajność strony. Jeśli te problemy nie zostaną rozwiązane, Twoja strona będzie wolna i mało atrakcyjna dla odwiedzających.
Panel aplikacji
Przy użyciu zakładki Aplikacja tab możesz debugować progresywne aplikacje internetowe; przeglądać i zarządzać przechowywaniem danych, bazami danych i pamięcią podręczną; przeglądać i usuwać ciasteczka; i przeglądać zasoby.
Bezpieczeństwo
Zakładka Bezpieczeństwo może być przydatna, jeśli chcesz zdiagnozować problemy z mieszanymi treściami i problemy z certyfikatami. Strona uznawana jest za niezabezpieczoną, gdy odwiedzany adres URL był żądany za pomocą protokołu HTTP. Zgodnie z nowoczesnymi wymaganiami sieci, powinno to być realizowane przy użyciu protokołu HTTPS. Jeśli widzisz, że strona zawiera mieszane treści, oznacza to, że jest częściowo chroniona i narażona na podsłuchiwaczy.
Zakładka Lighthouse
Lighthouse to zautomatyzowane narzędzie podnoszące jakość aplik internetowych. Jest bezpośrednio zintegrowane z Chrome DevTools. Oferuje audyty wydajności, Dostępność, progresywne aplikacje internetowe (PWA), SEO i więcej.
Typowe ostrzeżenia i błędy konsoli podczas pracy widżetów Elfsight
Czasami coś idzie nie tak w działaniu widżetów Elsfight. Nie obawiaj się, jeśli zobaczysz czerwone ostrzeżenia lub błędy w konsoli. Jeśli znasz powód ich wystąpienia, prawdopodobnie sam będziesz w stanie naprawić wszystko. Poniżej znajdziesz listę typowych błędów, które możesz zobaczyć w konsoli.
To dwa błędy dotyczące wszystkich naszych widżetów:
WIDGET JEST ZABLOKOWANY – zablokowałeś domenę witryny w swoim koncie Elfsight, jeśli błąd dotyczy apps.elfsight.com.
WIDGET NIE ZNALEZIONY – prawdopodobnie przypadkowo usunąłeś widget ze swojego konta. Sprawdź go.
Widzisz, to nic wielkiego. Teraz omówimy kilka błędów w pracy konkretnych widgetów i integracji.
Najczęstsze problemy z Google Maps
Jeśli chodzi o Google Maps, błędy najczęściej wynikają z problemów z kluczem API.
ExpiredKeyMapError – klucz API wygasł lub nie jest rozpoznawany. W większości przypadków należy wygenerować nowy. Jeśli ten błąd pojawi się tuż po utworzeniu nowego klucza API, będziesz musiał poczekać od 1 do 8 minut lub oddzielnie włączyć Places API.
RefererNotAllowedMapError – Adres Elfsight ładujący Maps JavaScript API nie ma uprawnienia do bycia referrerem. Sprawdź ustawienia źródła odwołania (referrer) dla klucza API w konsoli Google Cloud Platform. Podczas korzystania z naszego widżetu musisz dodać nas jako źródło odwołania. Oto artykuł jak to zrobić poprawnie.
ClientBillingNotEnabledMapError – For using Google maps widget, you’ll need to have a Billing account. This failure happened because you didn’t activate billing on your project. The solution is to enable billing on the Google Cloud Project associated to this client ID. You may do it here.
BillingNotEnabledMapError – Korzystając z Google Maps, musisz włączyć rozliczenia.
Błędy galerii YouTube w konsoli
Korzystając z Elfsight YouTube Video Gallery, nie będziesz musiał martwić się o większość problemów wymienionych poniżej. Istnieją jednak dwa ogólne problemy, które mogą również wystąpić w naszym widżecie.
quotaExceeded – YouTube używa limitów, by umożliwić dostęp do treści i pobieranie jej na strony lub aplikacje. Gdy limit YouTube zostanie przekroczony, zauważysz, że Twoja Galeria YouTube przestaje działać lub działa wolniej na stronie. Poniższe rozwiązanie może być następujące:
- Pobierz nowy klucz API, jeśli sam pobierasz treści z YouTube;
- Skontaktuj się z naszym zespołem wsparcia pod adresem support@elfsight.com, jeśli używasz Elfsight YouTube Gallery — to znacznie prostsze.
videoNotFound – This warning can occur if the URL you inserted to link to the YouTube video is incorrect. Sometimes users paste a link to the page with the video in it, but it is not the actual location of the video, resulting in the error. Check everything and paste the link to the original video.
Błędy feedów Facebooka i Instagrama
Jeżeli Facebook Feed lub Instagram przestały działać, możesz sprawdzić, co się dzieje w Konsoli deweloperskiej. Ponieważ obie te popularne aplikacje działają na bazie API Facebooka, poniższe wyjaśnienia błędów mogą działać równie dobrze dla obu.
err_ssl_protocol_error podczas korzystania z widżetu Facebook Feed lub Instagram Feed na Twojej stronie może mieć wiele przyczyn. Aby to rozwiązać, możesz spróbować ustawić prawidłową datę i godzinę, wyczyścić dane przeglądania Chrome lub zresetować stan SSL. Ponadto, jeśli Facebook Graph API zwróci błędy, możesz użyć fbtrace_id, aby dowiedzieć się więcej o nich. Jednak jeśli nic z powyższego nie pomogło, zawsze możesz skontaktować się z naszym zespołem wsparcia.
rest_cannot_access – zazwyczaj oznacza, że zewnętrzna wtyczka, np. Password Protect, uniemożliwia prawidłowe działanie naszego widżetu. Wyłączenie takiej usługi rozwiąże problem.
<strong>The page you requested cannot be displayed right now </strong>– this may mean your Facebook application is in development mode. You will not get this error message if you are an Elfsight Facebook Feed user, however, if you see this message, contact our support team.
OAuthException na Instagramie w szczególności oznacza, że status logowania lub token dostępu został cofnięty, wygasł lub jest nieprawidłowy z jakiegoś powodu. W takim przypadku skontaktuj się z naszym zespołem wsparcia — deweloperzy Elfsight uzyskają nowy token dostępu lub sprawdzą ewentualny kod podrzędny, jeśli taki istnieje.
Najczęstsze błędy konsoli
Jako doświadczony deweloper stron internetowych prawdopodobnie widziałeś te błędy częściej, niż byś chciał. Mogą pojawić się w Chrome, gdy odczytujesz właściwość lub wywołujesz metodę na niezdefiniowanym obiekcie. Możesz przetestować obsługę tych konkretnych błędów przy użyciu bloków try…catch w konsoli deweloperskiej Chrome i Safari.
Jeśli nie jesteś profesjonalnym programistą, możesz pominąć tę wskazówkę.
Nieprzechwycony TypeError: Nie można odczytać właściwości
Może to wynikać z wielu przyczyn, ale najczęściej jest to nieprawidłowa inicjalizacja stanu podczas renderowania komponentów interfejsu. To łatwe do naprawienia. Najprostszy sposób: zainicjuj stan wartościami domyślnymi w konstruktorze.
TypeError: ‘undefined’ nie jest obiektem
To błąd, który występuje w Safari, gdy odczytujesz właściwość lub wywołujesz metodę na niezdefiniowanym obiekcie. Możesz przetestować to w konsoli deweloperskiej Safari. W praktyce jest to to samo co powyższy błąd w Chrome, ale Safari wyświetla inny komunikat błędu.
(nieznane): Błąd skryptu
Jeśli pojawi się ten błąd, najpierw uzyskaj prawdziwą treść komunikatu. Możesz to zrobić w następujący sposób: ustaw nagłówek Access-Control-Allow-Origin na * — oznacza to, że zasób może być poprawnie dostępny z dowolnej domeny. Możesz zastąpić * swoją domeną, jeśli to konieczne: na przykład: Access-Control-Allow-Origin: www.example.org. Jednak zarządzanie wieloma domenami bywa skomplikowane i może nie mieć sensu, jeśli używasz CDN z powodu problemów z cache’owaniem, które mogą wystąpić.
Tak powinieneś rozwiązywać najczęstsze błędy konsoli JavaScript. Będziemy uzupełniać tę listę tak długo, jak my i nasi klienci napotykamy inne problemy.
Podsumowanie
Konsola deweloperska to doskonałe narzędzie, dające programistom dostęp do ogromu danych o ich stronie. Otwarcie i rozpoczęcie pracy z nią nie jest skomplikowane, ale wymaga trochę czasu i wysiłku — proszę o cierpliwość.
Z jakimi błędami się spotkałeś? Podziel się swoimi doświadczeniami w komentarzach poniżej — chętnie to z Tobą omówimy!
Pamiętaj także, że mamy inne świetne przewodniki. Na przykład dowiesz się, jak osadzić recenzje firmy Google na stronie internetowej!
