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ę

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

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:...