Zwiększ produktywność tworzenia stron internetowych

Ostatnia aktualizacja 13 października 2020 r.

Jeśli lubisz tworzyć strony internetowe, tak jak ja, powinieneś wiedzieć, jak ważne jest posiadanie świetnych narzędzi w przeglądarce internetowej, które upraszczają pracę i zwiększają produktywność. Tak jest w przypadku przeglądarki Google Chrome i kompleksowej oferty rozszerzeń Chrome, które zwiększą produktywność Twoich programistów internetowych.

Tak, Firefox jest doskonałą przeglądarką do tworzenia stron internetowych, a Firefox Developer Edition jest fantastyczny do debugowania i testowania CSS. Jednak Chrome ma długą listę rozszerzeń narzędzi, które zapewniają obsługę najnowszych funkcji internetowych i narzędzi programistycznych, dzięki czemu jest ulubionym miejscem wielu twórców stron internetowych w celu zwiększenia produktywności twórców stron internetowych.

Chrome Marketplace zawiera jedne z najlepszych rozszerzeń, najstarsze lub nowe, które pomagają programistom rozwijać i testować witrynę lub stronę docelową. Poniżej poznasz niektóre z najlepszych rozszerzeń, które sugeruję jako „niezbędne” w twoim zestawie narzędzi do tworzenia stron internetowych.

Rozszerzenia Chrome, które zwiększają produktywność tworzenia stron internetowych

Asystent tagów

Asystent tagów pomaga rozwiązywać problemy z instalacją różnych tagów Google, w tym Google Analytics, Menedżera tagów Google itp. Asystent tagów umożliwia sprawdzenie, czy poprawnie zainstalowałeś różne tagi Google na swojej stronie. Wystarczy przejść na dowolną stronę, a Asystent tagów poinformuje Cię, które tagi są obecne, zgłosi wszelkie wykryte błędy i zasugeruje ulepszenia, które można wprowadzić w swojej implementacji. Sprawdzana jest większość tagów Google, w tym Google Analytics, Adwords Conversion Tracking, Google Tag Manager itp.

Co działa

Odkryj, co obsługuje witrynę — frameworki, narzędzia analityczne, wtyczki WordPress, czcionki — to wszystko. Rozszerzenie WhatRuns jest jednym kliknięciem, aby znaleźć technologie używane w każdej odwiedzanej witrynie. Wykrywa nawet nowe i nadchodzące narzędzia i usługi, od narzędzi programistycznych i sieci reklamowych po wtyczki i motywy WordPress. Nie tylko to – możesz śledzić strony internetowe, aby otrzymywać powiadomienia, gdy korzystają z nowych technologii lub usuwają istniejące.

Narzędzia programistyczne Vue.js

Jego imię jest bardzo wyraźne. Jest to rozszerzenie Chrome i Firefox DevTools do debugowania aplikacji Vue.js. Umożliwia sprawdzanie hierarchii komponentów Vue.js w Narzędziach dla programistów Chrome. Otrzymasz nową kartę w swoim Chrome DevTools: „Vue”.

Narzędzia programistów React

Jako Vue.js Devtools, React Developer Tools to rozszerzenie dla Chrome i Firefox DevTools dla biblioteki JavaScript React o otwartym kodzie źródłowym. Umożliwia sprawdzenie hierarchii komponentów React w Narzędziach dla programistów Chrome. Otrzymasz dwie nowe zakładki w Chrome DevTools: „Komponenty” i „Profiler”. Zakładka Komponenty pokazuje główne komponenty Reacta, które zostały wyrenderowane na stronie oraz podkomponenty, które ostatecznie wyrenderowały. Wybierając jeden z trzech komponentów, możesz sprawdzić i edytować jego aktualne właściwości i stan w panelu po prawej stronie. W bułce tartej możesz sprawdzić wybrany komponent, komponent, który go utworzył, komponent, który go utworzył itp.

JSON Viewer Niesamowite

To rozszerzenie pomaga w wizualizacji odpowiedzi JSON z dowolnej witryny lub żądania interfejsu API w przeglądarce. Wprowadza Cię w niesamowite doświadczenia upiększania JSON. Posiada wiele unikalnych cech, które czynią go niesamowitym. Pomaga programistom w formatowaniu lub upiększaniu JSON i przechodzeniu do właściwości w widoku graficznym. Ma przyjazny i interaktywny wykres przedstawiający odpowiedź serwera lub dostarczony JSON w sekcji wejściowej w widoku graficznym.

Inspektor META SEO

Przydatne do sprawdzania metadanych znalezionych na stronach internetowych, zwykle niewidocznych podczas przeglądania. Metadane to nie tylko zwykłe metatagi HTML, ale tagi XFN, różne mikroformaty, niedawno wprowadzony atrybut kanoniczny, linki no-follow itp. To rozszerzenie jest skierowane głównie do twórców stron internetowych, którzy muszą zweryfikować kod HTML swojej witryny, aby postępuj zgodnie z wytycznymi Google dla webmasterów, ale nawet komu interesują treści stron, które zwykle są niewidoczne, ale mogą ujawnić interesujące właściwości witryny. Posiada również opcję drukowania/eksportu, która umożliwia wydrukowanie lub zapisanie raportu w formacie PDF lub skopiowanie/wklejenie danych w preferowanym narzędziu.

Szybka przeglądarka stylów HTML

Szybka przeglądarka stylów elementów HTML DOM. Po prostu przesuń mysz, a pokaże style celu.

CSSViewer

CSSViewer to prosta przeglądarka właściwości CSS dla Chrome i Firefox. Aby włączyć CSSViewer, kliknij ikonę paska narzędzi, a następnie najedź na dowolny element, który chcesz sprawdzić na bieżącej stronie.

Czcionki Ninja

Zidentyfikuj czcionki z dowolnej witryny, dodaj do zakładek, wypróbuj je i kup. Analizuje pliki czcionek, aby uzyskać dokładniejsze wyniki. Najedź myszą na dowolny tekst, aby uzyskać nazwę czcionki i właściwości CSS. W głównym oknie rozszerzenia wyświetli się również podsumowanie wszystkich czcionek użytych na stronie. Możesz uzyskać więcej informacji o czcionkach. Sprawdź ile jest dostępnych stylów, ich odlewnię i cenę.

Uwielbiam adaptację – testowanie mobilne/responsywne

Narzędzie do testowania responsywnych stron internetowych. Rozszerzenie ILOVEADAPTIVE do Chrome dodaje przycisk do paska narzędzi. Po kliknięciu przycisku otworzy się adres URL, na którym jesteś na bieżącej karcie. Główne funkcje obejmują podgląd adresu URL na wielu urządzeniach jednocześnie, filtrowanie urządzeń, filtrowanie systemu operacyjnego, zmianę ich ilości, powiększanie, wyświetlanie panelu ios, przełączanie na poziomy i pionowy.

Wskaźniki internetowe

Mierz dane dla zdrowej witryny. Web Vitals to sygnały jakościowe, które są kluczem do zapewnienia doskonałego UX w sieci (https://web.dev/vitals). To rozszerzenie mierzy podstawowe wskaźniki internetowe, zapewniając natychmiastową informację zwrotną na temat wczytywania, interaktywności i metryk zmiany układu. Jest to zgodne ze sposobem, w jaki te dane są mierzone przez Chrome i raportowane do innych narzędzi Google.

Redux linijki strony

Linijka Web Developer\Designer pozwalająca uzyskać idealne wymiary w pikselach i pozycjonowanie do mierzenia elementów na dowolnej stronie internetowej. Page Ruler Redux to podstawowe narzędzie dla programistów i projektantów stron internetowych, które umożliwia uzyskiwanie perfekcyjnych pomiarów elementów internetowych. Jest przeznaczony do tworzenia stron internetowych, projektowania stron internetowych lub dowolnego zadania, którego możesz potrzebować, aby uzyskać doskonałe pomiary pikseli dowolnych elementów internetowych.

Linijka siatki

Twórz siatki i łatwo mierz ich odległość. Pozwala na tworzenie siatek pionowych i poziomych w stylu Photoshopa. Posiada również linijkę do mierzenia odległości między twoimi siatkami.

Zarysuj to

To rozszerzenie zarysowuje każdy element HTML na stronie internetowej, umożliwiając wyświetlanie obramowań elementów. Rozszerzenie obsługuje wszystkie kolory tęczy (czerwony, pomarańczowy, żółty, zielony, niebieski, indygo i fioletowy). Posiada również funkcję usuwania konturu po jego zastosowaniu.

Emulator przeglądarki mobilnej

Przetestuj mobilne i responsywne strony internetowe na swoim komputerze. Wybierz najpopularniejsze rozdzielczości ekranu mobilnego jednym kliknięciem myszy. Strona aktywnej zakładki otworzy się w osobnym oknie.

Cóż, to moja lista rozszerzeń Chrome, które sugeruję mieć w przeglądarce Chrome, aby zwiększyć produktywność programistów internetowych. Tak, tak… Istnieją inne przydatne i fajne rozszerzenia, których nie umieściłem na powyższej liście. Ale kiedy nadejdzie czas, będę kontynuował odkrywanie innych fantastycznych rozszerzeń, które prawdopodobnie zostaną wymienione w przyszłym blogu.