XAML WstępZaktualizowałem system do Windows 8.1. Nie ma sensu robić długiej recenzji, ale dla przeciętnego użytkownika PC aktualizacja właściwie nie jest potrzebna. Obecnie dla mnie najważniejszych gadżetem Windows 8.1 jest odpicowana przeglądarka Internet Explorer 11 wraz z narzędziami developerskimi.

Pierwszy raz mam wrażenie, że to narzędzie jest na tyle intuicyjne by go używać zamiast FireBug w FireFox-ie lub Developer Tools w Chrome.

Super UI

Narzędzia F12 zawsze były konsystentne w swoim UI . Menu rozwijalne, oraz okna podzielone na różne zakładki. Jednak to rozwiązanie nie było doskonałe i w praktyce używanie interfejsu było trudniejsze niż u konkurencji.

Teraz narzędzie F12 ma gigantycznego ribbon-a w stylu metro po lewej stronie.

F12 Menu Bar

Nagle poruszanie się po całym interfejsie stało się dużo wygodniejsze niż u konkurencji. Dla przypomnienia tak wyglądało narzędzie F12 wcześniej.

Stare IE10

A tak wygląda całe okno narzędzia F12.

DOM Exploere IE11

Interfejs teraz jest bardziej konsystentny z całym systemem Windows 8.

DOM Explorer

Poprzedni “DOM Explorer” był bardzo zacofany w sumie nigdy z niego nie korzystałem chyba, że musiałem sprawdzić dlaczego coś nie działa pod IE nawet 9.

DOM Exploere IE11 page

Najważniejszą zmianą jest moim zdaniem wyświetlenie stylów CSS. Wcześniej na przekór wszystkim podobnym narzędziom oglądało się style zgodnie z kolejnością dziedziczenia. Czyli by zobaczyć to co najbardziej ciebie interesowało trzeba było przesunąć zakładkę styli na sam koniec.

Teraz najbardziej aktualne style dla danego elementu wyświetlają się jako pierwsze i tak powinno być.

Oprócz tego pojawiło się wiele nowych funkcjonalności:

  • Zdolność do kliknięcia prawym przyciskiem myszki elementu na stronie i go prześledzenie.
  • Przesuwanie elementów do innej lokalizacji w DOM Explorer.
  • Elementy są teraz dobrze wyświetlane. Teraz nawigacja po hierarchii strony nie jest drogą przez mękę.
  • Intellisense do styli CSS.

Na dole mamy pasek określający hierarchię danego zaznaczonego elementu.

Okruszki chleba IE11

Uzupełnianie styli CSS też jest łatwe dzięki podpowiedziom.

CSS IE11

Naprawdę powoli zaczynam doceniać to narzędzie jako twardą alternatywę dla FireBug-a i Google Chrome Developer Tools.

Śledzenie UI i jego płynności

Obecnie istnieje wiele kodu po stronie klienta. Mamy frameworki takie jak Ember.js I Angular.  Wiele logiki dzieje się w JavaScript.

Obecnie gry napisane HTML 5 nie są już czystą fantazją.

O ile nie siedzisz magicznych Ajax-owych kontrolkach Telerick-a, które wrzucają kod kliencki do serwera to wiesz o czym ja mówię. Uśmiech

Używając zakładki “UI Responsiveness” jesteś wstanie określi jak CPU reaguje na odpowiednie skrypty i jak to wpływa na wyświetlanie klatek strony.

Czas reakcji użytkownika IE 11

W linii czasu jesteś wstanie dokładnie określić, które zdarzenie bądź wywołanie sieciowe negatywnie wpływa na stronę.

Patrząc na każdy element na osi czasu jesteś wstanie uzyskać więcej informacji o nim w oknie po lewej stronie.

Czasomierz IE11

Możesz sobie wyobrazić jak cenne te informację są zwłaszcza dla twórców gier pod przeglądarki.

Debugger Script

Debugowanie skryptu JavaScript czy to FireFox czy to Google Chrome nigdy nie było dla mnie przyjemnością.

Prawdopodobnie dlatego, że w ASP.NET czy w DOT.NETNUKE istnieje niezły bałagan skryptów wbudowanych na stronie.

O IE wcześniej już lepiej nie mówić.

Wczoraj miałem okazję jednak sprawdzić debugowanie skryptu JavaScript w akcji i doświadczenie było całkiem przyjemne. Nawet bym powiedział zadawalające i pokrewne z uczuciem debugowania kod C# w Visual Studio 2012.

Debuger IE11

Można też zapomnieć o wyrażeniu console.log(). gdyż zmienne łatwo się monitoruje.

Analiza pamięci

Ustalanie problemów z pamięcią nigdy nie było łatwe. F12 posiada jednak narzędzie, które pozwoli tobie określić liczbę obiektów jak i ilość pamięci pochłanianej przez stronę.

Używając snapshots możesz dokładnie określić co powoduje problemy.

Pamięć IE11

Możesz prześledzić obiekty w snapshot-a i je porównywać. Jak widać pewne głupie zdjęcie na mojej stronie zawiera więcej pamięci niż cały tag <body>.

Migawka IE11

Emulowanie innych urządzeń.

Używając tej zakładki programista jest wstanie wymusić by strona została wyrenderowana w inny sposób. Wszystko wskazuje na to, że nie można już sprawdzić jak strona działa na starszych wersja IE.

W sumie ta funkcja i tak nie działa jak trzeba.

Emulacja IE11

 

Najważniejszą funkcją jest tryb dokumentu: Egde. Niestety nie jest ona domyślnie dostępna i trzeba za nią zapłacić. Tak funkcja ma związek z BrowserStack.

Podsumowanie

Jest to doskonała  aktualizacja. Nie widzę już powodów by unikać nawet IE w trakcie tworzenia strony internetowej. Może w końcu jest to przeglądarka godna współczesnego procesu tworzenia strony.

Debbuger mnie przekonał by korzystać z tego narzędzia dużo częściej. Zwłaszcza, że w swojej pracę robię wszystko i nic i muszę posiadać wiele umiejętności i po stronie serwera jak i klienta.