DevTools Showdown Edge's F12 vs Firefox vs Chrome
Narzędzia deweloperskie Microsoft Edge, nowa domyślna przeglądarka Windows 10 ma nowoczesny wygląd i kilka nowych funkcji w porównaniu do swojego poprzednika, narzędzia F12 Dev Internet Explorer 11.
Pytanie, czy narzędzia programistyczne Microsoft Edge odpowiadają ich popularnym konkurentom - narzędzia dev w innych nowoczesnych przeglądarkach, takich jak Mozilla Firefox i Google Chrome - naturalnie pojawia się w umysłach wielu programistów.
W tym poście staramy się odpowiedzieć na to pytanie i dowiedzieć się, czy naprawdę warto użyć narzędzi Dev F12. Porównamy jego funkcje z funkcjami narzędzi programistycznych Firefoksa i DevTools Google Chrome.
Otwórz Narzędzia Dev
Naciśnięcie F12 otwiera narzędzia dla programistów we wszystkich 3 przypadkach: Narzędzia programistyczne w Firefoksie, DevTools w Chrome i F12 Dev Tools w Microsoft Edge. To jest skrót klawiaturowy, w którym oficjalna nazwa Edge's F12 Dev Tools pochodzi z.
Kiedy otworzysz Edge's Dev Tools, możesz od razu doświadczyć jednego z jego najbardziej znanych niedociągnięć: obecnie jest to niemożliwe przypięcie narzędzi do istniejącego okna. Chociaż możesz śledzić, co dzieje się na ekranie w Narzędziach programistycznych Firefox i narzędziach DevTools, przypinając okno narzędzi dev na dole ekranu, nie możesz zrobić tego samego z Edge.
Programiści Microsoftu twierdzą, że naprawią ten problem w przyszłej aktualizacji.
Sprawdź DOM
The Eksplorator DOM narzędzie (skrót: CTRL + 1) to pierwsza karta narzędzi Dev F12 Microsoft Edge. Jego układ i ogólny wygląd jest podobny do tego Element karta Chrome i Inspektor karta w Firefoksie, jednak możliwości wyraźnie się różnią.
W Edge możesz spojrzeć na renderowany dokument HTML, powiązane style CSS i programy obsługi zdarzeń zarejestrowane w każdym elemencie. Możesz także znaleźć małą grafikę dotyczącą modelu skrzynki CSS z wartościami obliczonymi, dobrze znanymi już z dwóch konkurencyjnych przeglądarek.
Możesz eksperymentuj z regułami CSS usuwając bieżące i dodając nowe, a zobaczysz swoje podsumowane zmiany na oddzielnej karcie podrzędnej “Zmiany” (znajduje się po lewej stronie). Ta ostatnia funkcja nie jest wbudowana w Firefox Developer ani Chrome DevTools. Może dać użytkownikowi szybkie podsumowanie, więc jest to bardzo przydatna opcja.
W Narzędziach dla programistów Firefoksa jest kilka funkcji, których obecnie ani Edge, ani Google Chrome nie zapewniają, ale mogą znacznie ułatwić życie projektanta: narzędzia analizatora Czcionka i Animacja.
W Edge jest fajny próbnik kolorów choć może to nieco zrekompensować użytkownikowi to.
Interakcja z JavaScript
The Konsola tab (skrót: CTRL + 2) w Microsoft Edge pozwala na interakcję z JavaScript swojej witryny, tak jak w Firefox i Chrome Dev Tools. Wszystkie trzy pozwalają śledzić błędy JavaScript w czasie rzeczywistym, a także analizować je, wprowadzając własne dane.
Narzędzie Console w Edge's F12 Dev Tools ma fajne funkcja autouzupełniania który pomaga ci w wydawaniu poleceń, jakkolwiek się wydaje mniej kompetentny w porównaniu z narzędziami Firefox i Chrome Dev.
Krawędź oddziela błędy, ostrzeżenia i komunikaty co jest dużą pomocą, choć nie jest to coś, czego nie mają dwa pozostałe zestawy narzędzi.
Konsola Firefoksa wydaje się być najbardziej profesjonalna z trzech narzędzi dev, jak również oddzielnie pokazuje inne rodzaje problemów: sieć, CSS, błędy bezpieczeństwa i komunikaty logowania, i pozwala na interakcję z nimi za pośrednictwem Interfejs konsoli, nie tylko z błędami JavaScript.
Zrozum, co robi Twój kod
The Debugger narzędzie (skrót: CTRL + 3) pomaga zrozumieć, co dzieje się z kodem podczas wyszukiwania potencjalnych błędów. Możesz ustawić zegarki i punkty przerwania oraz przeglądać stosy połączeń.
Panel Zegarki wyświetla wartości zmiennych, tryb Callstack pokazuje łańcuch wywołań funkcji, które doprowadziły do aktualnego stanu, a tryb Breakpoints pokazuje listę ustawionych punktów przerwania.
Narzędzia Edge F12 Dev pozwalają Ci wstrzymaj swój kod w trakcie wykonywania i przejdź przez linię po linii. Masz także opcję poprawić czytelność skompilowanego lub zminimalizowanego pliku JavaScript, i możesz debuguj różne zasoby (JavaScript, rozszerzenia itp.) Jeden po drugim.
Firefox i Chrome DevTools oferują wszystkie te funkcje, więc Edge nie oferuje wyjątkowych możliwości debugowania, ale zapewnia użytkownikowi solidne i niezawodne narzędzie, które jest na równi z konkurentami.
Spójrz na komunikację z serwerem przeglądarki
The Sieć narzędzie (skrót: CTRL + 4) zostało całkowicie przeprojektowane dla Microsoft Edge od Internet Explorer 11. Za pomocą tego poręcznego narzędzia możesz śledzić komunikację między serwerem a przeglądarką, i sprawdź indywidualne wnioski.
Możesz filtrowanie wyników według typu treści takie jak arkusze stylów, obrazy, media, czcionki, XHR i wiele innych. Możesz również debuguj AJAX za pomocą narzędzia sieciowego.
Karta sieciowa Edge i Firefox oferuje podobne możliwości i interfejs użytkownika. Oba mają przyjazne dla użytkownika okienko paska bocznego, które pozwala spojrzeć na nagłówek HTTP wybranego zasobu, treść HTTP, parametry, powiązane pliki cookie i terminy po elemencie.
Karta Sieć Chrome DevTools nie ma takiego okienka, ale po kliknięciu żądań jeden po drugim można zobaczyć te same informacje. Jest to jednak rozwiązanie mniej intuicyjne.
Śledź wolne strony
The Wydajność karta (skrót: CTRL + 5) pomaga zrozumieć powody powolnej strony internetowej. Dzięki narzędziu Performance Microsoft wykonał ogromny krok naprzód, łącząc poprzednie Reakcja użytkownika i profil użytkownika narzędzia do tworzenia całościowego widoku wszystkich skryptów i wizualizacji wydajności.
To przydatne narzędzie udostępnia raporty różne rodzaje wykorzystania procesora, daje wgląd w malowanie ramek witryny, a także jest możliwe izoluj różne scenariusze użytkowników, ustawiając etykiety na osi czasu.
Podczas procesu testowania odkryliśmy, że narzędzie Performance w Edge dostarczyło nam więcej informacji o problemach z prędkością niż Firefox Developer lub Chrome DevTools. Interfejs użytkownika karty Wydajność w Edge jest całkiem dobrze zaprojektowany, co pomaga nam w wielu wizualnych wskazówkach i jest stosunkowo łatwy w użyciu. Jeśli chcesz dowiedzieć się więcej o tym, jak z niego korzystać, przeczytaj szczegółowe Dokumenty.
Diagnozuj problemy z pamięcią
The Pamięć narzędzie (skrót: CTRL + 6) umożliwia znaleźć przecieki pamięci co może również spowolnić twoją stronę internetową wpływać na stabilność Twojej witryny.
Za pomocą ładnego wykresu możesz łatwo zrozumieć, gdzie rośnie zużycie pamięci, i możesz tworzyć migawki w określonych punktach, które umożliwiają analizę wykorzystania pamięci. Możesz również porównaj dwie migawki wykonane w różnych punktach cyklu życia strony, aby zrozumieć różnicę między nimi.
Narzędzia DevTools Chrome mają również ładny profiler pamięci w zakładce Profile, podczas gdy Firefox Developer nie udostępnia tej funkcji domyślnie, ale możesz pobrać i zainstalować takie dodatki, jeśli chcesz. Profiler pamięci Chrome DevTools jest dość zaawansowany i oferuje więcej funkcji niż Edge, na przykład pozwala na zapisywać alokacje obiektów JavaScript w czasie które mogą pomóc w wyizolowaniu wycieków pamięci.
Przetestuj swoją witrynę w różnych rozmiarach ekranu
The Współzawodnictwo narzędzie (skrót: CTRL + 7) umożliwia testowanie witryny w różnych okolicznościach. Możesz wybrać jeden z dwóch profili przeglądarki: Desktop i Windows 10 Mobile, a także z wielu różnych programów użytkownika, w tym wszystkich wersji desktopowych i mobilnych Internet Explorera z powrotem do IE6, a także wielu konkurentów Edge'a, Chrome, Firefox, Safari itp..
Ciekawe, że masz możliwość wzięcia spójrz na swoją stronę jako Bing Bot. Możesz również emuluj GPS, i nastaw różne rozdzielczości i orientacje.
Narzędzia programistyczne Firefoksa nie mają narzędzia do emulacji urządzeń, ale narzędzia DevTools Chrome mają tak zaawansowany emulator, że Edge nie może z nim konkurować.
Na przykład ekran emulacji Chrome ma dokładna siatka, w której znajduje się emulowany widok, i nie tylko możesz wybierać z profili przeglądarek i aplikacji użytkownika, ale także z wielu urządzeń, takich jak różne wersje iPhone'a lub Samsunga Galaxy i wiele innych. Emulator Chrome DevTools ma także przydatny Opcja powiększenia i możesz przetestować swoją witrynę w różnych sieciach, takich jak 3G, 4G, DSL, WiFi itp.
streszczenie
Ogólnie rzecz biorąc, narzędzia Microsoft Edge F12 Dev Tools wydają się zaskakująco dobre. Zapewnia funkcje podobne do popularnych zestawów narzędzi do tworzenia stron internetowych innych nowoczesnych przeglądarek. Istnieją dwa obszary, w których Edge's F12 Dev Tools jest dość mocny: the interfejs użytkownika to jest naprawdę intuicyjny, przyjazny dla użytkownika i dobrze zaprojektowany, i narzędzia diagnostyczne wydajności.
W przypadku tych dwóch funkcji warto rozważyć przejście na lub przynajmniej przetestowanie Edge'a. Największą wadą jest brak możliwości przypięcia narzędzi dev na dole ekranu, ale miejmy nadzieję, że Microsoft szybko rozwiąże ten problem.
