Powrót

Chrome

skróty klawiaturowe – keyboard shortcuts

  • tryb incognito – CTRL + SHIFT + N

testowanie w Chrome

  1. F12
  2. menu boczne (trzy pionowe kropki – More options):
    1. show media queries
    2. show rulers
    3. add device pixel ratio
    4. add device type
  3. boczny panel ELEMENTS i zakładki:
    1. Styles
    2. Event Listeners
    3. DOM Breakpoints
    4. Properties
      1. img
        1. currentSrc – do sprawdzenia jakie zdjęcie jest wczytywane
    5. Accessibility

zmiana lokacji w devtools

  1. otwieramy menu Customize and control DevTools (ikona 3 pionowych kropek)
  2. more tools
  3. sensors
  4. ustawiamy Geolocation wg potrzeb i odświeżamy stronę

Narzędzia deweloperskie DevTools

Otwieramy je poprzez:

  • kliknięcie prawym klawiszem myszy w dowolnym miejscu strony i wybierając z menu kontekstowego Zbadaj/Inspect
  • naciskając klawisz F12

Pozwalają między innymi na:

  • weryfikację jakie znaczniki/tagi są renderowane w kodzie
  • jakie mają style CSS, i co się stanie jak je zmienimy
  • jakie są problemy, błędy z kod JavaScript
  • symulowanie wygląd strony na telefonie komórkowym konkretnej marki
  • sprawdzić, jak długo będzie się wczytywać strona na wolnym łączu internetowym

Zakładki devTools

  • strzałka po prawej stronie – po jej kliknięciu możemy wskazać element na stronie by podświetlił nam się w drzewie DOM zakładki Elements
  • widok symulacji strony na wybranym urządzeniu – ikona zaraz obok ikony strzałki, przedstawiajacą laptop i telefon – pozwala na pokazanie jak strona będzie renderowana na różnych urządzeniach
  • Elements – zawiera strukturę DOM – czyli reprezentację kodu HTML oraz informacje o wyglądzie czyli style CSS
  • Console – wyświetlone informacje z JavaScript jak również komunikaty błędów JS, pozwala na wykonanie kodu JS
  • Network – jakie zasoby zostały wczytane wraz ze stroną, tu testujemy wolniejsze łącze internetowe,

testowanie wydajności strony w chrome:

  1. Performance
  2. dolny panel (jeśli jest nie widoczny włączamy go poprzez ESC)
  3. Rendering
    1. paint flashing – zaznacza na zielono elementy które wymagają Paint podczas malowania czyli są zasobochłonne – obciążają przeglądarkę
    2. FPSmetter – licznik klatek na sekundę przy wykonywaniu danej animacji

Pluginy

  • JSON Formatter
  • Lighthouse
  • Form Filler – autouzupełnianie formularzy
  • Vue.js devtools
  • Linkclump – pozwala na otwarcie wielu zaznaczonych linków kombinacją klawisza myszy i wybranym klawiszem, do indywidualnego ustawienia w opcjach
  • WooRank – SEO Analysis & Website Review
  • Check My Links – plugin do sprawdzania poprawności linków i wyszukania broken links

bardzo przydatne

do pobierania filmów ze stron

do formularzy

devTools

Linki

SEO

graficzne i wizualne

Print Screen

  • Nimbus Screenshot & Screen Video Recorder
  • FireShot – zrzut ekranu całej strony oraz jej fragmentów

Językowe, tekst

inne

Hope this helps and happy coding :)

Zobacz jeszcze

Narzędzia SEO

trends...

pozioma linia hr

tag pozwalający zasygnalizować tematyczną zmianę treści lub wizualne oddzielenie od siebie sekcji treści hr { background-color: #ddd; border: 0 none; clear: both; color:...

Powrót