Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'Google Chrome' Kategorie

Narzędzia dewelopera w Google Chrome

Autor: Piotr Karpiuk o 5. lipca 2016

Dzisiejszy artykuł będzie narzędziach, jakie przeglądarka Google Chrome udostępnia programistom do debugowania i monitorowania aplikacji webowych, pod przyciskiem F12. Dla tych co mają dużo czasu, pełny opis możliwości jest dostępny na stronach Google’a: https://developers.google.com/web/tools/chrome-devtools/. Tutaj zakładam że Czytelnik ma już jakieś pojęcie o tych narzędziach, zapewne już z nich korzysta w jakimś zakresie i chciałby możliwie szybko poszerzyć swoją wiedzę o różne przydatne i ciekawe triki, które pojawiły się ostatnimi czasy, lub były od dawna ale nie są oczywiste.

Task Manager

Kombinacja klawiszy Shift+ESC otwiera managera zadań, w którym możemy zobaczyć zużycie zasobów komputera z rozbiciem na poszczególne zakładki przeglądarki:

Edycja drzewa DOM

Czytaj więcej »

Napisany w Google Chrome, JavaScript, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »

HTML5: File, File Writer i FileSystem API

Autor: Piotr Karpiuk o 27. sierpnia 2011

Przedmiotem dzisiejszego posta jest wchodzące w skład HTML5 API dzięki któremu JavaScript może w przeglądarce operować na plikach lokalnych, co można wykorzystać do tworzenia cache’y i danych offline na użytek aplikacji (np. baza emaili w webowym kliencie poczty, dostępna nawet po utracie połączenia z Internetem). Póki co API zaimplementowane jest w Google Chrome 9+, a jego podstawy (File API) w Firefox 3.6.3+.

Czytelnik obeznany z obsługą AJAXa (zwłaszcza w najnowszej, drugiej wersji) odnajdzie się tu bez trudu, ponieważ sposób wykonywania operacji I/O jest bliźniaczo podobny jak w XMLHttpRequest2. Tu również mamy do dyspozycji zdarzenia które pozwalają nam monitorować przebieg operacji (obsługując je możemy np. uaktualniać pasek postępu), podobnie jak mamy do wyboru tryb asynchroniczny i synchroniczny (ten drugi z przeznaczeniem dla osobnych wątków – WebWorkers). Zawartość pliku możemy traktować jako łańcuch, Data URL, blob, lub ArrayBuffer. Data URL to (w uproszczeniu) łańcuch reprezentujący tablicę bajtów w Base64 – można go użyć w HTMLowym img.src (czyli jako źródło danych wyświetlanego obrazka). Dwa ostatnie typy danych zostały wprowadzone ponieważ sam JavaScript nie udostępnia typu całkowitoliczbowego ani wydajnej implementacji tablicy bajtów, przy czym ArrayBuffer reprezentuje bufor danych na potrzeby WebGL.

File

File API pozwala reprezentować w przeglądarce plik, jak również uzyskać dostęp do metadanych plików lokalnych wybranych w formularzu przez użytkownika, oraz dostęp do danych zawartych w plikach (odczyt). Istotna nowinka znacząco poprawiająca doznania Internautów: teraz w kontrolce wyboru pliku dzięki atrybutowi multiple użytkownik może wybrać wiele plików naraz, a dzięki webkitdirectory nawet cały katalog. Może też przeciągać pliki z pulpitu do formularza na stronie WWW i odwrotnie. Po wyborze plików, a przed wysłaniem ich do serwera, z poziomu JavaScriptu możemy ustalić dla każdego z nich nazwę, rozmiar, typ MIME, datę ostatniej modyfikacji itp., a także wczytać zawartość pliku do przeglądarki. Dzięki temu możemy np. już w przeglądarce stwierdzić że plik jest zbyt duży aby przesyłać go na serwer, wyświetlić podgląd obrazka (ang. thumbnail), ewentualnie zapisać zawartość pliku w systemie plików zarezerwowanym dla aplikacji webowej (patrz FileSystem API dalej) tak aby była dostępna offline gdy nie ma dostępu do Internetu itd.

Czytaj więcej »

Tags: ,
Napisany w Google Chrome, WWW | Brak komentarzy »

SPDY: dopalacz HTTP

Autor: Piotr Karpiuk o 24. sierpnia 2011

Google zaproponował rozszerzenie protokołu HTTP przyspieszające ładowanie stron WWW nawet o 50%.

Łącza internetowe stają się coraz szybsze, ale pozostaje problem dużych opóźnień. Jest on dodatkowo pogłębiany przez protokół HTTP, który został zaprojektowany kilkanaście lat temu i coraz gorzej pasuje do współczesnych wymagań. Główne zarzuty w tym kontekście:

  • Jest to protokół zapytanie/odpowiedź, pojedyncza realizacja zlecenia blokuje całe połączenie TCP nawet na kilkaset milisekund nie pozwalając na równoległą realizację innych zleceń (np. dociągnięcie obrazków); aby przyspieszyć, przeglądarki otwierają kilka połączeń TCP (np. 6).
  • Serwer może wysłać klientowi dane tylko w odpowiedzi na zapytanie klienta.
  • Sekcja nagłówków w każdym komunikacie HTTP (w tym ciasteczka i praktycznie niezmienne nagłówki takie jak User-Agent, Host czy Accept*) stanowią często znaczną część każdego komunikatu HTTP (od 200 bajtów do 2KB).
  • Kompresja i szyfrowanie danych są opcjonalne.

Google zaimplementował w swojej przeglądarce i używa w swoich usługach (Google Search, GMail, Google Docs) rozszerzenie HTTP o nazwie SPDY.

Na czym polega zmiana na lepsze?

  • Można współbieżnie realizować dowolnie wiele zleceń HTTP w obrębie jednego połączenia TCP.
  • Nagłówki są kompresowane (co zmniejsza ich rozmiar nawet o 85%), a redundantne nagłówki nie są w ogóle przesyłane.
  • Serwer może inicjować komunikację z klientem wypychając do niego dane jeśli zajdzie taka potrzeba (nagłówki X-AssociatedContent i X-Subresources, przy czym ten drugi jest sugestią dla klienta, że powinien poprosić o dodatkowe zasoby).
  • Klient może przypisać priorytety swoim żądaniom, aby poprawić doznania użytkownika gdy wąskim gardłem jest przepustowość sieci.
  • Strumień komunikatów jest szyfrowany (SSL).
  • Aby móc skorzystać z usprawnienia, należy zmienić implementację przesyłania pakietów HTTP przez serwer WWW i przeglądarkę, ale nie jest konieczna zmiana kodu istniejących aplikacji webowych ani po stronie serwera, ani klienta. W szczególności, nie ulega zmianie format komunikatów HTTP GET ani HTTP POST.

Mozilla wyraziła zainteresowanie pomysłem Google’a i zaimplementowała jego obsługę w jednej ze swoich łatek Firefoksa. Dostępne są już implementacje serwerów WWW dla różnych języków programowania (Python, Java, Ruby), a także stosowny moduł do Apache (mod-spdy).

Tags:
Napisany w Google Chrome, WWW | Brak komentarzy »

Google Chrome – ukryte możliwości

Autor: Piotr Karpiuk o 17. sierpnia 2011

Gdy w Google Chrome wejdziemy na URL chrome://about, otrzymamy rozpiskę wewnętrznych stron przeglądarki, pozwalających „zajrzeć pod maskę” Chrome’a, jak również wejść do różnych formatek poprzez URL zamiast pracowicie wyklikiwać je z menu.

Co ciekawsze pozwoliłem sobie wynotować:

chrome://net-internals diagnostyka sieci
chrome://tasks taki odpowiednik linuksowego „top”
chrome://flags włączniki eksperymentalnych zabawek Google’a
chrome://version informacje o wersji przeglądarki i opcjach wiersza poleceń z którymi została uruchomiona
chrome://gpu informacje o karcie graficznej
chrome://flash szczegółowe informacje o Flashu
chrome://cache lista wszystkich URLi jakie użytkownik odwiedził
chrome://memory rozbicie na procesy, ile który zjada pamięci
chrome://plugins zainstalowane pluginy (Flash, Java itp.)
chrome://extensions zainstalowane rozszerzenia
chrome://sync diagnostyka silnika synchronizacyjnego
chrome://workers czyżby WebWorkers?
chrome://dns diagnostyka zapytań DNS

Chrome oferuje również bogatą listę opcji wiersza poleceń. Przykładowo opcja --enable-logging --v=1 włącza logowanie do katalogu z danymi użytkownika ( ~/.config/google-chrome/chrome_debug.log na Linuksie, C:\Users\\AppData\Local\Google\Chrome\User Data\chrome_debug.log na Windows, katalog z danymi użytkownika można zmienić opcją --user-data-dir).

Do wspomnianego katalogu z danymi użytkownika (i jego podkatalogu Default) warto zajrzeć, żeby zobaczyć np. jak Chrome obsługuje pliki bazy SQLite dostępne za pomocą Web SQL Database.

Tags:
Napisany w Google Chrome | Brak komentarzy »