{"id":34410,"date":"2025-01-10T10:34:11","date_gmt":"2025-01-10T09:34:11","guid":{"rendered":"https:\/\/nearshore-it.eu\/?p=34410"},"modified":"2025-01-31T16:23:42","modified_gmt":"2025-01-31T15:23:42","slug":"optymalizacja-z-chrome-devtools","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/optymalizacja-z-chrome-devtools\/","title":{"rendered":"Cz\u0119\u015b\u0107 1. Chrome DevTools: programisto, odkryj pot\u0119g\u0119 narz\u0119dzi deweloperskich Chrome"},"content":{"rendered":"\n<p>Narz\u0119dzia deweloperskie przegl\u0105darek s\u0105 uniwersalnym wsparciem w procesie tworzenia i testowania aplikacji. S\u0142u\u017c\u0105 g\u0142\u00f3wnie programistom front-end, jednak ich znajomo\u015b\u0107 usprawni tak\u017ce prac\u0119 tester\u00f3w i programist\u00f3w back-end, a u\u017cytkownikom pozwoli lepiej zrozumie\u0107 i zg\u0142asza\u0107 b\u0142\u0119dy. Dobra znajomo\u015b\u0107 narz\u0119dzi deweloperskich przegl\u0105darek umo\u017cliwia szybkie rozwi\u0105zywanie problem\u00f3w, optymalizacj\u0119 dzia\u0142ania aplikacji oraz skuteczniejsze testowanie funkcjonalno\u015bci. Programi\u015bci, kt\u00f3rzy biegle pos\u0142uguj\u0105 si\u0119 tymi narz\u0119dziami, zyskuj\u0105 znacz\u0105c\u0105 przewag\u0119 \u2013 mog\u0105 pracowa\u0107 bardziej efektywnie, lepiej komunikowa\u0107 si\u0119 z innymi cz\u0142onkami zespo\u0142u i szybciej reagowa\u0107 na zg\u0142aszane b\u0142\u0119dy.<\/p>\n\n\n\n<p>W tek\u015bcie przyj\u0119\u0142am za\u0142o\u017cenie, \u017ce j\u0119zyk przegl\u0105darki (a tym samym narz\u0119dzi deweloperskich) ustawiony jest jako angielski. To dobra praktyka, poniewa\u017c cz\u0119sto du\u017co \u0142atwiej jest znale\u017a\u0107 dokumentacj\u0119 i rozwi\u0105zania problem\u00f3w na stronach angloj\u0119zycznych, a same t\u0142umaczenia narz\u0119dzi cz\u0119sto bywaj\u0105 b\u0142\u0119dne i myl\u0105ce. Artyku\u0142 b\u0119dzie si\u0119 te\u017c g\u0142\u00f3wnie odnosi\u0107 do narz\u0119dzi deweloperskich dost\u0119pnych w przegl\u0105darce Google Chrome, jednak du\u017ca cz\u0119\u015b\u0107 wspomnianych zagadnie\u0144 jest r\u00f3wnie\u017c dost\u0119pna w innych przegl\u0105darkach pod zbli\u017conymi nazwami.<\/p>\n\n\n\n<div class=\"table-of-contents\">\n    <p class=\"title\"><\/p>\n    <ol>\n                    <li><a href=\"#Czym-s\u0105-narz\u0119dzia-deweloperskie-przegl\u0105darki?\">1.  Czym s\u0105 narz\u0119dzia deweloperskie przegl\u0105darki?\u00a0<\/a><\/li>\n                    <li><a href=\"#Jakie-funkcje-oferuj\u0105-narz\u0119dzia-deweloperskie?\">2.  Jakie funkcje oferuj\u0105 narz\u0119dzia deweloperskie?\u00a0<\/a><\/li>\n                    <li><a href=\"#Jak-otworzy\u0107-narz\u0119dzia-deweloperskie?-\">3.  Jak otworzy\u0107 narz\u0119dzia deweloperskie?\u00a0<\/a><\/li>\n                    <li><a href=\"#Jak-korzysta\u0107-z-Command-Menu-w-Chrome-DevTools?-\">4.  Jak korzysta\u0107 z Command Menu w Chrome DevTools?\u00a0<\/a><\/li>\n                    <li><a href=\"#Jak-korzysta\u0107-z-Chrome-DevTools-do-debugowania?-\">5.  Jak korzysta\u0107 z Chrome DevTools do debugowania?\u00a0<\/a><\/li>\n                    <li><a href=\"#Jak-monitorowa\u0107-zasoby-w-zak\u0142adce-Network?-\">6.  Jak monitorowa\u0107 zasoby w zak\u0142adce Network? <\/a><\/li>\n                    <li><a href=\"#Testowanie-responsywno\u015bci-stron-internetowych-\">7.  Testowanie responsywno\u015bci stron internetowych <\/a><\/li>\n            <\/ol>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"Czym-s\u0105-narz\u0119dzia-deweloperskie-przegl\u0105darki?\">Czym s\u0105 narz\u0119dzia deweloperskie przegl\u0105darki?<\/h2>\n\n\n\n<p>Narz\u0119dzia deweloperskie (<em>DevTools<\/em>) to zestaw funkcji wbudowanych w przegl\u0105darki internetowe, kt\u00f3re pozwalaj\u0105 programistom i projektantom analizowa\u0107 oraz debugowa\u0107 strony internetowe. Narz\u0119dzia przegl\u0105darek nie s\u0105 ustandaryzowane, wi\u0119c ich implementacje mog\u0105 si\u0119 r\u00f3\u017cni\u0107. Przegl\u0105darki oparte na silniku Chromium (takie jak Chrome, Edge, Opera, Arc czy Brave) cz\u0119sto maj\u0105 bardzo zbli\u017cone implementacje narz\u0119dzi deweloperskich, jednak w przegl\u0105darkach takich jak Firefox czy Safari b\u0119d\u0105 one si\u0119 znacznie r\u00f3\u017cni\u0107. Dost\u0119pne s\u0105 te\u017c przegl\u0105darki skupiaj\u0105ce si\u0119 na narz\u0119dziach deweloperskich i w ca\u0142o\u015bci dedykowane programistom, takie jak przegl\u0105darka Polypane.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1130\" height=\"834\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_intro.png\" alt=\"Chrome DevTools\" class=\"wp-image-34411\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_intro.png 1130w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_intro-300x221.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_intro-768x567.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_intro-495x365.png 495w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jakie-funkcje-oferuj\u0105-narz\u0119dzia-deweloperskie?\">Jakie funkcje oferuj\u0105 narz\u0119dzia deweloperskie?&nbsp;<\/h2>\n\n\n\n<p>Do g\u0142\u00f3wnych funkcji narz\u0119dzi deweloperskich nale\u017c\u0105:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inspektor element\u00f3w<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>G\u0142\u00f3wny widok narz\u0119dzi deweloperskich, zak\u0142adka <em>Elements<\/em>, pozwala na analizowanie i modyfikowanie struktury HTML strony oraz podgl\u0105d i edycj\u0119 styl\u00f3w CSS. Narz\u0119dzie <em>Inspector<\/em> mo\u017cna uruchomi\u0107 przy otwartych narz\u0119dziach deweloperskich skr\u00f3tem klawiszowym Cmd + Shift + C lub Ctrl + Shift + C lub klikaj\u0105c na jego ikon\u0119.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Konsola JavaScript<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Console<\/em> pokazuje konsol\u0119 JavaScript, kt\u00f3ra umo\u017cliwia wykonywanie kodu JavaScript oraz wy\u015bwietla b\u0142\u0119dy i logi w kodzie JavaScript strony.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Debugger JavaScript<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Sources \/ Debugger<\/em> pozwala na dost\u0119p do debuggera JavaScript, kt\u00f3ry umo\u017cliwia zatrzymywanie wykonywania kodu w okre\u015blonych miejscach (breakpointach) i analizowanie jego dzia\u0142ania krok po kroku.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monitorowanie sieci (zak\u0142adka Network)<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Network<\/em> pokazuje szczeg\u00f3\u0142y \u017c\u0105da\u0144 i odpowiedzi HTTP i pomaga okre\u015bli\u0107 problemy z wydajno\u015bci\u0105 \u0142adowania strony (np. brakuj\u0105ce pliki, d\u0142ugi czas odpowiedzi serwera czy brak kompresji gzip zasob\u00f3w).&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monitorowanie wydajno\u015bci (zak\u0142adka Performance)<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Performance<\/em> umo\u017cliwia analiz\u0119 czasu \u0142adowania strony, renderowania element\u00f3w oraz dzia\u0142ania skrypt\u00f3w, a tak\u017ce wykrywanie nieoczekiwanych zmian uk\u0142adu (<em>layout shifts<\/em>) i zasob\u00f3w blokuj\u0105cych renderowanie (<em>render-blocking resources<\/em>).&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monitorowanie wykorzystywanej pami\u0119ci (zak\u0142adka Memory)<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Memory<\/em> pozwala na analiz\u0119 wykorzystywania pami\u0119ci przez stron\u0119 i pomaga zlokalizowa\u0107 wycieki pami\u0119ci (<em>memory leaks<\/em>).&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Podgl\u0105d zasob\u00f3w (zak\u0142adka Application)<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Zak\u0142adka <em>Application<\/em> pozwala na dost\u0119p do danych zapisanych lokalnie przez stron\u0119, m.in. w cookies, session storage i local storage czy IndexedDB.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Podgl\u0105d responsywno\u015bci<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Widok podgl\u0105du responsywno\u015bci umo\u017cliwia sprawdzenie wygl\u0105du strony na r\u00f3\u017cnych rozdzielczo\u015bciach ekranu, symuluj\u0105c urz\u0105dzenia mobilne, tablety i komputery.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Audyt dost\u0119pno\u015bci, wydajno\u015bci i SEO strony<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Narz\u0119dzia deweloperskie przegl\u0105darki Chrome pozwalaj\u0105 na przeprowadzenie audytu strony przy u\u017cyciu narz\u0119dzia Lighthouse. To narz\u0119dzie sprawdza dost\u0119pno\u015b\u0107 strony pod k\u0105tem os\u00f3b z niepe\u0142nosprawno\u015bciami, a tak\u017ce analizuje i sugeruje poprawki zwi\u0105zane z SEO, wydajno\u015bci\u0105 i u\u017cyteczno\u015bci\u0105.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-otworzy\u0107-narz\u0119dzia-deweloperskie?-\">Jak otworzy\u0107 narz\u0119dzia deweloperskie?&nbsp;<\/h2>\n\n\n\n<p>Narz\u0119dzia deweloperskie mo\u017cna otworzy\u0107 skr\u00f3tem F12 lub klikaj\u0105c prawym klawiszem myszki w dowolnym miejscu na stronie internetowej i wybieraj\u0105c \u201e<em>Inspect<\/em>\u201d z menu kontekstowego. W przegl\u0105darce Safari narz\u0119dzia deweloperskie s\u0105 domy\u015blnie ukryte dla u\u017cytkownika i musz\u0105 by\u0107 w\u0142\u0105czone w ustawieniach zaawansowanych.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-korzysta\u0107-z-Command-Menu-w-Chrome-DevTools?-\">Jak korzysta\u0107 z <em>Command Menu<\/em> w Chrome DevTools?&nbsp;<\/h2>\n\n\n\n<p><em>Command Menu<\/em> pozwala na szybki dost\u0119p do funkcjonalno\u015bci i ustawie\u0144 narz\u0119dzi deweloperskich w przegl\u0105darce Google Chrome. <em>Command Menu<\/em> jest dost\u0119pne pod skr\u00f3tem klawiszowym Cmd+Shift+P lub Ctrl+Shift+P. Aby zobaczy\u0107 wszystkie mo\u017cliwo\u015bci <em>Command Menu<\/em>, nale\u017cy usun\u0105\u0107 z wiersza polecenia znak wi\u0119kszo\u015bci (&gt;) odpowiedzialny za uruchamianie komend i wpisa\u0107 znak zapytania (?), kt\u00f3ry wy\u015bwietla pomoc.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"254\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_command_menu.png\" alt=\"Chrome DevTools\" class=\"wp-image-34421\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_command_menu.png 557w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_command_menu-300x137.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_command_menu-495x226.png 495w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-korzysta\u0107-z-Chrome-DevTools-do-debugowania?-\">Jak korzysta\u0107 z Chrome DevTools do debugowania?&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jak u\u017cywa\u0107 konsoli do sprawdzania b\u0142\u0119d\u00f3w w JavaScript?&nbsp;<\/h3>\n\n\n\n<p>B\u0142\u0119dy wy\u015bwietlane w konsoli pokazuj\u0105 miejsce w kodzie, gdzie wyst\u0105pi\u0142 wyj\u0105tek. Aby przeanalizowa\u0107 szczeg\u00f3\u0142y b\u0142\u0119du wy\u015bwietlanego w konsoli, nale\u017cy klikn\u0105\u0107 w odno\u015bnik, kt\u00f3ry otworzy panel <em>Sources <\/em>z miejscem wywo\u0142ania b\u0142\u0119du. Wa\u017cnym elementem analizy b\u0142\u0119du jest <em>stack trace<\/em>, czyli ci\u0105g funkcji prowadz\u0105cych do b\u0142\u0119du. Dzi\u0119ki temu mo\u017cna prze\u015bledzi\u0107 dzia\u0142anie programu przed wyst\u0105pieniem b\u0142\u0119du.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jak analizowa\u0107 elementy HTML i regu\u0142y CSS w Chrome DevTools?&nbsp;<\/h3>\n\n\n\n<p>Narz\u0119dzia zawarte w panelu <em>Elements <\/em>pozwalaj\u0105 na analizowanie i modyfikowanie struktury HTML strony oraz podgl\u0105d i edycj\u0119 styl\u00f3w CSS. Narz\u0119dzie <em>Inspector<\/em> mo\u017cna uruchomi\u0107 skr\u00f3tem klawiszowym Cmd + Shift + C lub Ctrl + Shift + C lub klikaj\u0105c na jego ikon\u0119.&nbsp;<\/p>\n\n\n\n<p>Aby zrozumie\u0107, w jaki spos\u00f3b element otrzyma\u0142 dan\u0105 regu\u0142\u0119, nale\u017cy go zaznaczy\u0107 i w prawej cz\u0119\u015bci panelu <em>Elements <\/em>otworzy\u0107 zak\u0142adk\u0119 <em>Computed<\/em>. Po najechaniu myszk\u0105 na wybran\u0105 regu\u0142\u0119, wy\u015bwietli si\u0119 ikonka strza\u0142ki, kt\u00f3ra otwiera fragment arkuszu styl\u00f3w odpowiedzialny za nadanie elementowi danej regu\u0142y.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Debugowanie znikaj\u0105cych element\u00f3w&nbsp;<\/h3>\n\n\n\n<p>Zdarza si\u0119, \u017ce u\u017cywana biblioteka zawiera komponent, w przypadku kt\u00f3rego dost\u0119p do danego elementu przy pr\u00f3bie debugowania albo stylowania jest utrudniony \u2013 na przyk\u0142ad w przypadku tooltip\u00f3w czy innych element\u00f3w widocznych warunkowo.&nbsp;<\/p>\n\n\n\n<p>Dobrym przyk\u0142adem jest popularna biblioteka React Select, w kt\u00f3rej opcje mog\u0105 mie\u0107 skomplikowan\u0105 budow\u0119, a s\u0105 ukryte przy utracie stanu <em>focused<\/em>. Aby mie\u0107 do nich dost\u0119p przy debugowaniu, nale\u017cy ustawi\u0107 narz\u0119dzia deweloperskie tak, aby nie zabiera\u0142y stronie stanu focused. W tym celu nale\u017cy otworzy\u0107 <em>Command Menu<\/em> (Cmd+Shift+P lub Ctrl+Shift+P) i wpisa\u0107 \u201e<em>Show Rendering<\/em>\u201d. W li\u015bcie opcji narz\u0119dzia <em>Rendering <\/em>nale\u017cy zaznaczy\u0107 \u201e<em>Emulate a focused page<\/em>\u201d.&nbsp;<\/p>\n\n\n\n<p>Innym rozwi\u0105zaniem mo\u017ce by\u0107 te\u017c u\u017cywanie debuggera. Kiedy panel <em>Sources <\/em>\/ <em>Debugger <\/em>jest otworzony, naciskaj\u0105c klawisz F8 mo\u017cna w dowolnym momencie zatrzyma\u0107 wykonywanie kodu i uruchomi\u0107 debugger. Przy zapauzowanym stanie strony mo\u017cna wtedy u\u017cy\u0107 narz\u0119dzia Inspector i zbada\u0107 w\u0142a\u015bciwy element.&nbsp;<\/p>\n\n\n\n<p>Warto te\u017c wiedzie\u0107 o mo\u017cliwo\u015bci ustawiania breakpoint\u00f3w przy zmianach w strukturze DOM. W widoku <em>Elements <\/em>nale\u017cy wybra\u0107 w\u0142a\u015bciwy element HTML i otworzy\u0107 prawym klawiszem myszki menu kontekstowe. Opcja \u201e<em>Break on<\/em>\u201d pozwala na utworzenie trzech rodzaj\u00f3w breakpoint\u00f3w:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>subtree modifications<\/em> \u2013 pauzuje kod przy modyfikacji struktury DOM danego elementu (ale nie atrybut\u00f3w),&nbsp;<\/li>\n\n\n\n<li><em>attribute modifications<\/em> \u2013 pauzuje kod przy modyfikacji atrybut\u00f3w HTML danego elementu,&nbsp;<\/li>\n\n\n\n<li><em>node removal<\/em> \u2013 pauzuje kod przy usuni\u0119ciu danego elementu z drzewa DOM.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Korzystanie z widoku warstw 3D w panelu <em>Layers<\/em>&nbsp;<\/h3>\n\n\n\n<p>Dosy\u0107 ciekaw\u0105 funkcj\u0105 narz\u0119dzi deweloperskich Google Chrome jest widok warstw 3D. Aby go uruchomi\u0107, nale\u017cy otworzy\u0107 <em>Command Menu<\/em> (Cmd + Shift + P lub Ctrl + Shift + P) i wpisa\u0107 \u201e<em>Show Layers<\/em>\u201d, a nast\u0119pnie wybra\u0107 ikon\u0119 oznaczaj\u0105c\u0105 \u201e<em>Rotate mode<\/em>\u201d. Tym sposobem mo\u017cna debugowa\u0107 kolejno\u015b\u0107 nak\u0142adania si\u0119 element\u00f3w na stosie wed\u0142ug parametru z-index, debugowa\u0107 zagnie\u017cd\u017cenie element\u00f3w w drzewie DOM czy znale\u017a\u0107 elementy DOM wykraczaj\u0105ce poza okno.&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"756\" height=\"445\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_layers_view.png\" alt=\"Chrome DevTools\" class=\"wp-image-34424\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_layers_view.png 756w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_layers_view-300x177.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_layers_view-495x291.png 495w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Jak-monitorowa\u0107-zasoby-w-zak\u0142adce-Network?-\">Jak monitorowa\u0107 zasoby w zak\u0142adce <em>Network<\/em>?&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jak analizowa\u0107 zapytania sieciowe w narz\u0119dziach deweloperskich?&nbsp;<\/h3>\n\n\n\n<p>Domy\u015blnie w zak\u0142adce <em>Network <\/em>zobaczymy nazw\u0119, typ i rozmiar zasobu, status i czas odpowiedzi oraz miejsce w kodzie inicjuj\u0105ce zapytanie. Nazwa zasobu oznacza, \u017ce przyk\u0142adowo dla obrazu pobieranego z <a href=\"https:\/\/example.com\/images\/image.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/example.com\/images\/image.jpg<\/a>, zobaczymy samo \u201eimage.jpg\u201d. Jak zatem zobaczy\u0107 ca\u0142\u0105 \u015bcie\u017ck\u0119 pobieranego zasobu albo metod\u0119 zapytania? Klikaj\u0105c prawym klawiszem myszki na nag\u0142\u00f3wek tabeli, mo\u017cemy doda\u0107 lub usun\u0105\u0107 potrzebne nam kolumny.&nbsp;<\/p>\n\n\n\n<p>Dodatkowo mo\u017cemy te\u017c korzysta\u0107 z filtr\u00f3w widoku. Opr\u00f3cz domy\u015blnych filtr\u00f3w pole tekstowe pozwala na filtrowanie po w\u0142asnych kryteriach, takich jak status (status-code), typ MIME (mime-type), czy metoda zapytania (method). W tym celu nale\u017cy wpisa\u0107 zapytanie w pole tekstowe, kt\u00f3re automatycznie powinno zasugerowa\u0107 odpowiedni\u0105 sk\u0142adni\u0119, na przyk\u0142ad:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>po statusie 404 Not Found: status-code:404&nbsp;<\/li>\n\n\n\n<li>po danych w formacie JSON: mime-type:application\/json&nbsp;<\/li>\n\n\n\n<li>po metodzie POST: method:POST&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Jak sprawdzi\u0107 czas \u0142adowania strony w zak\u0142adce <em>Network<\/em>?&nbsp;<\/h3>\n\n\n\n<p>Kolumna \u201e<em>Time<\/em>\u201d wy\u015bwietla czas potrzebny na za\u0142adowanie poszczeg\u00f3lnych zasob\u00f3w. Dla bardziej szczeg\u00f3\u0142owego widoku w Google Chrome mo\u017cna jednak te\u017c doda\u0107 kolumn\u0119 \u201e<em>Waterfall<\/em>\u201d, kt\u00f3ra w graficzny spos\u00f3b pozwala na przeanalizowanie \u0142adowania strony. Po najechaniu myszk\u0105 na dany element w kolumnie \u201e<em>Waterfall<\/em>\u201d otrzymamy szczeg\u00f3\u0142owe informacje o jego czasie \u0142adowania.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lokalne podmienianie zapyta\u0144 i zasob\u00f3w&nbsp;<\/h3>\n\n\n\n<p>Narz\u0119dzia deweloperskie Chrome pozwalaj\u0105 na lokalne nadpisywanie zapyta\u0144 i pobieranych zasob\u00f3w, co pozwala na prototypowanie zmian, zanim zostan\u0105 one zaimplementowane na backendzie. Aby nadpisa\u0107 dane zapytanie, nale\u017cy klikn\u0105\u0107 na nie prawym klawiszem myszki w panelu<em> Network<\/em> i wybra\u0107 z menu kontekstowego \u201e<em>Override headers<\/em>\u201d lub \u201e<em>Override content<\/em>\u201d. Wprowadzone zmiany b\u0119d\u0105 zapisywane w wybranym folderze i domy\u015blnie \u0142adowane przy wykonywaniu zapytania.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Testowanie-responsywno\u015bci-stron-internetowych-\">Testowanie responsywno\u015bci stron internetowych&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jak u\u017cywa\u0107 Chrome DevTools do testowania responsywno\u015bci?&nbsp;<\/h3>\n\n\n\n<p>Aby otworzy\u0107 panel pozwalaj\u0105cy na testowanie responsywno\u015bci strony, nale\u017cy wybra\u0107 ikonk\u0119 w lewym g\u00f3rnym rogu narz\u0119dzi deweloperskich oznaczaj\u0105c\u0105 \u201e<em>Toggle device toolbar<\/em>\u201d lub u\u017cy\u0107 skr\u00f3tu klawiszowego Cmd + Shift + M lub Ctrl + Shift + M. Z menu opcji mo\u017cna wybra\u0107 domy\u015blne wymiary ustalone na podstawie najpopularniejszych urz\u0105dze\u0144 lub zdefiniowa\u0107 w\u0142asne. Z menu dodatkowych opcji okre\u015blonego ikonk\u0105 z trzema kropkami, mo\u017cna w\u0142\u0105czy\u0107 te\u017c menu okre\u015blaj\u0105ce DPR (<em>device-pixel ratio<\/em>).&nbsp;<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1296\" height=\"828\" src=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-1296x828.png\" alt=\"Chrome DevTools\" class=\"wp-image-34427\" title=\"\" srcset=\"https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-1296x828.png 1296w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-300x192.png 300w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-768x491.png 768w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-495x316.png 495w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example-1320x844.png 1320w, https:\/\/nearshore-it.eu\/wp-content\/uploads\/2025\/01\/nearshore_2025.01.08_graphic_devtools_example.png 1358w\" sizes=\"auto, (max-width: 1296px) 100vw, 1296px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Menu okre\u015blaj\u0105ce throttling pozwala na przetestowanie strony pod k\u0105tem urz\u0105dze\u0144 mobilnych:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>mid-tier mobile<\/em> \u2013 symuluje CPU spowolnione czterokrotnie i pr\u0119dko\u015b\u0107 po\u0142\u0105czenia wolnej sieci 4G,&nbsp;<\/li>\n\n\n\n<li><em>low-end mobile<\/em> \u2013 symuluje CPU spowolnione sze\u015bciokrotnie i pr\u0119dko\u015b\u0107 po\u0142\u0105czenia sieci 3G,&nbsp;<\/li>\n\n\n\n<li><em>offline<\/em> \u2013 symuluje brak po\u0142\u0105czenia internetowego.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Opcje throttlingu CPU i po\u0142\u0105czenia s\u0105 te\u017c dost\u0119pne niezale\u017cnie odpowiednio w panelach <em>Performance<\/em> i <em>Network<\/em>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak wprowadza\u0107 zmiany w kodzie CSS dla r\u00f3\u017cnych rozmiar\u00f3w ekran\u00f3w?&nbsp;<\/h2>\n\n\n\n<p>Przy korzystaniu z <em>media queries<\/em>, w panelu pozwalaj\u0105cym na testowanie responsywno\u015bci strony, warto w\u0142\u0105czy\u0107 menu pozwalaj\u0105ce na szybkie prze\u0142\u0105czanie si\u0119 mi\u0119dzy szeroko\u015bciami ekranu na podstawie<em> <\/em>zadeklarowanych w kodzie breakpoint\u00f3w. W tym celu z menu dodatkowych opcji, okre\u015blonego ikon\u0105 z trzema kropkami, nale\u017cy wybra\u0107 \u201e<em>Show media queries<\/em>\u201d. Aby wprowadzi\u0107 zmiany dla szeroko\u015bci, kt\u00f3ra nie zosta\u0142a jeszcze zadeklarowana w kodzie, nale\u017cy doda\u0107 odpowiedni\u0105 regu\u0142\u0119 w arkuszu styl\u00f3w w panelu <em>Sources<\/em>. Nowa szeroko\u015b\u0107 zostanie dodana do widoku breakpoint\u00f3w i pozwoli na \u0142atwiejsze prototypowanie styl\u00f3w.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\n\n\n\n<p>W pierwszej cz\u0119\u015bci artyku\u0142u skupi\u0142am si\u0119 na zaprezentowaniu mo\u017cliwo\u015bci narz\u0119dzi deweloperskich przegl\u0105darek.<br>Druga cz\u0119\u015b\u0107 b\u0119dzie po\u015bwi\u0119cona praktycznym wskaz\u00f3wkom w zakresie <a href=\"https:\/\/nearshore-it.eu\/pl\/artykuly\/testowanie-dostepnosci-stron-internetowych\/\">testowania<br>dost\u0119pno\u015bci aplikacji<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dowiedz si\u0119, jak z narz\u0119dziami deweloperskimi Chrome DevTools programi\u015bci mog\u0105 analizowa\u0107 kod, sprawdza\u0107 style CSS oraz przeprowadza\u0107 audyty wydajno\u015bci stron.<\/p>\n","protected":false},"author":199,"featured_media":34414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":75,"footnotes":""},"categories":[1],"tags":[],"offering":[522],"class_list":["post-34410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artykuly","offering-tech-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/comments?post=34410"}],"version-history":[{"count":7,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34410\/revisions"}],"predecessor-version":[{"id":34594,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/posts\/34410\/revisions\/34594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media\/34414"}],"wp:attachment":[{"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/media?parent=34410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/categories?post=34410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/tags?post=34410"},{"taxonomy":"offering","embeddable":true,"href":"https:\/\/nearshore-it.eu\/pl\/wp-json\/wp\/v2\/offering?post=34410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}