Google Chrome 41 wyrasta na najlepszą przeglądarkę dla webdeweloperów

Narzędzia deweloperskie w Chrome od pierwszych swoich dni musiały konkurować z ukochanym przez wszystkich Firebugiem, który obecnie jest już nieco zapominanym narzędziem. Konkurencja sprawiła, że Google udało się stworzyć narzędzie wręcz uniwersalne, pozwalające na kontrolę praktycznie każdego aspektu działania aplikacji i witryn internetowych.

Tym razem Google oddało deweloperom możliwość kontrolowania szybkości odtwarzanych na stronie animacji opartych o Web Animation API, które pojawiło w stabilnym wydaniu się w lipcu. Aby się dostać do panelu kontroli tempa odtwarzania animacji wystarczy wybrać ikonę animacji na karcie stylów CSS.

Inną wartą odnotowania zmianą jest możliwość inspekcji zawartości buforów Serivce Workerów. Dotychczas autor korzystającej z nich aplikacji musiał posiłkować się konsolą, aby móc sprawdzić jakie dane jego aplikacja przechowuje w pamięci podręcznej. Pozycja Service Worker Cache pojawi się w zakładce Resources, po uruchomieniu narzędzi deweloperskich ze strony chrome://serviceworker-internals/.

Na narzędziach deweloperskich nie kończą się zmiany w nowym Google Chrome. Warto zwrócić uwagę na rozbudowaną obsługę ciągów znaków. Problemy z jakimi muszą mierzyć się twórcy aplikacji internetowych, gdy przychodzi skorzystać z tak podstawowego typu danych jak string, są zaskakująco duże. Od braku należytej obsługi wieloliniowych ciągów znaków, po konieczność „klejenia” kolejnych bloków. To ma się zmienić za sprawą Template Literals, które są jedną z nowości w nadchodzącej specyfikacji języka ECMAScript 6.

Dzięki nim możliwe stanie się bardziej przejrzyste budowanie kodu:

var nazwa = "dobreprogramy",wiadomosc = Witamy w portalu ${nazwa}!; Wynik działania będzie prosty do przewidzenia. Zmienna wiadomosc będzie miała wartość "Witamy w portalu dobreprogramy!" Ale to dopiero najprostsze zastosowanie Template Literals. Dano możliwość użycia wyrażeń takich jak ${1+1} (o wyniku równym 2), jak również używania wyników zwróconych przez funkcje:

var tekst = Wynik: ${funkcja()};Wart uwagi jest mechanizm Tagged Templates, dzięki któremu w prosty sposób możemy formatować ciągi znaków przy pomocy zdefiniowanych tagów. Tagiem nazywamy zdefiniowaną przez autora aplikacji funkcję, która może na przykład przeprowadzić oczyszczanie potencjalnie niebezpiecznych dla użytkownika rzeczy:

html${username} napisał komentarz: "${content}”Z innych ciekawych zmian w testowej wersji przeglądarki Google’a warto wymienić obsługę atrybutów any-hover oraz any-pointer w Media Queries. Są one częścią specyfikacji Media Queries Level 4, która ma status szkicu roboczego, więc jeszcze długa droga zanim będzie można powszechnie z nich korzystać. Mają one za zadanie odpytać urządzenie o posiadane możliwości. Na przykład w większości przypadków przeglądarek mobilnych hover jest emulowany poprzez dłuższe przytrzymanie palca na elemencie. Autor strony może w tym przypadku zaprojektować interfejs w taki sposób, aby nie wymagał zbędnych akcji ze strony użytkownika.

Pojawiła się również własność CSS image-rendering: pixelated, która wyłącza algorytm interpolacji dwuliniowej podczas przeskalowywania grafik. Dzięki tej własności, podczas przeskalowywania grafik możliwe stanie się zachowanie szczegółów, co jest szczególnie ważne przy kodach QR, które coraz częściej goszczą na stronach internetowych.

Więcej o nowościach w becie Google Chrome’a możecie przeczytać na blogu projektu Chromium. Jeżeli jesteście ciekawi która z przeglądarek obsługuje najwięcej rzeczy z ECMAScript 6 to możecie to sprawdzić na stronie ES6 compatibility table.