{"id":17224,"date":"2021-07-09T12:57:16","date_gmt":"2021-07-09T10:57:16","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17224"},"modified":"2021-07-14T10:27:23","modified_gmt":"2021-07-14T08:27:23","slug":"react-developer-profiler-im-firefox-browser-fuer-performance-messungen","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17224","title":{"rendered":"React Developer Profiler im Firefox Browser f\u00fcr  Performance Messungen"},"content":{"rendered":"<p>Wie kann die Performance einer React App. ermittelt werden? Dazu gibt es das &#8222;<a href=\"https:\/\/addons.mozilla.org\/de\/firefox\/addon\/react-devtools\/\" rel=\"noopener\" target=\"_blank\">React Developer Tools<\/a>&#8220; von React. Wenn das im Browser installiert ist:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-20.50.23.png\" alt=\"\" width=\"1516\" height=\"964\" class=\"aligncenter size-full wp-image-17225\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-20.50.23.png 1516w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-20.50.23-300x191.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-20.50.23-1024x651.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-07-um-20.50.23-768x488.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Es gib dann zwei neue Tabs am Ende: Components <!--more--><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21.png\" alt=\"\" width=\"3230\" height=\"1866\" class=\"aligncenter size-full wp-image-17226\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21.png 3230w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21-300x173.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21-1024x592.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21-768x444.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21-1536x887.png 1536w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.21-2048x1183.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>und Profiler. Auf den Profiler Tab gibt es links einen Aufzeichnen Button (Blauer Punkt). Eine kurzte Zeit die Anwendung testen und dann auf Stop dr\u00fccken. Schon steht das Ergebnis als <strong>Flamegraph<\/strong> oder <strong>Ranked<\/strong> Graph zu Verf\u00fcgung.<!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03.png\" alt=\"\" width=\"3250\" height=\"1392\" class=\"aligncenter size-full wp-image-17227\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03.png 3250w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03-300x128.png 300w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03-1024x439.png 1024w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03-768x329.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03-1536x658.png 1536w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/07\/wenzlaff.de-2021-07-09-um-12.44.03-2048x877.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wie kann die Performance einer React App. ermittelt werden? Dazu gibt es das &#8222;React Developer Tools&#8220; von React. Wenn das im Browser installiert ist: Es gib dann zwei neue Tabs am Ende: Components<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,3137,4960],"tags":[1460,998,4953,4462,256],"class_list":["post-17224","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-react","tag-browser","tag-geschwindigkeit","tag-js","tag-react","tag-tool"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17224"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17224\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17224"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}