{"id":367370,"date":"2024-05-21T03:19:43","date_gmt":"2024-05-21T03:19:43","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=367370"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=367370","title":{"rendered":"<span>11 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439 Chrome DevTools<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!<\/p>\n<p>\u0412\u0441\u0435 \u043c\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Chrome DevTools, \u043d\u043e \u0442\u0430\u043c \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0447\u0435\u0439, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043b\u0438. \u0412 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0441\u0430\u043c.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u044d\u0442\u0438 \u0444\u0438\u0447\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0438\u0445 \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u0444\u0438\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u043c \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0432 \u0432\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u041f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/508\/ba7\/741\/508ba7741aca42d396c188a5da33b3b1.jpg\" alt=\"\u042f \u0441\u043a\u0430\u0437\u0430\u043b \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c!\" title=\"\u042f \u0441\u043a\u0430\u0437\u0430\u043b \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c!\" width=\"399\" height=\"399\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/508\/ba7\/741\/508ba7741aca42d396c188a5da33b3b1.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u042f \u0441\u043a\u0430\u0437\u0430\u043b \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c!<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Chrome DevTools<\/h3>\n<p>\u0412 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0435\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0447\u0443\u0442\u043e\u0447\u043a\u0443 \u043b\u0443\u0447\u0448\u0435 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>Chrome DevTools \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e, \u0432\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<h4>1. Accessibility \u0432 Inspect Element<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 Inspect Element, \u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0438 \u0434\u0435\u0431\u0430\u0433\u0435 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>\u0412\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043b\u0438, \u0447\u0442\u043e \u043a\u0440\u043e\u043c\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e width\/height\/margin\/padding\/font-styles, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b Accessibility(\u044f \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0434\u0435\u043b), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044f:<\/p>\n<ul>\n<li>\n<p><strong>Contrast<\/strong> \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0430(\u044d\u0442\u043e \u043a\u0441\u0442\u0430\u0442\u0438 <a href=\"https:\/\/webaim.org\/projects\/million\/update#wcag:~:text=Low%20contrast%20text%0985.3%25%0986.1%25\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u043e\u043c\u0435\u0440 1<\/a> \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435), \u0443 Google \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u0443\u0447\u0430\u043b\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u043a\u0430\u043a \u0435\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c &#8212; <a href=\"https:\/\/developers.google.com\/codelabs\/devtools-cvd?hl=ru#0\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>. \u0412 \u044d\u0442\u043e\u0439 \u0436\u0435 \u043e\u0431\u0443\u0447\u0430\u043b\u043a\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0435 &#8212; 3.0 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0435 &#8212; 4.5.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/07f\/cbe\/ff8\/07fcbeff897ea62c51bb8916a36246ad.png\" alt=\"Accessibility Contrast \u0432 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435\" title=\"Accessibility Contrast \u0432 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435\" width=\"304\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/07f\/cbe\/ff8\/07fcbeff897ea62c51bb8916a36246ad.png\"\/><\/p>\n<div><figcaption>Accessibility Contrast \u0432 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u0437\u0430\u0439\u0442\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Devtools \u2014> Experiments \u2014> Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ration and AA\/AAA guidelines, \u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0432 %.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0e5\/969\/ff5\/0e5969ff55235dca94a6c53d1ab883df.png\" alt=\"Accessibility Contrast \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445\" title=\"Accessibility Contrast \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445\" width=\"304\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e5\/969\/ff5\/0e5969ff55235dca94a6c53d1ab883df.png\"\/><\/p>\n<div><figcaption>Accessibility Contrast \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Name<\/strong> \u2014 \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0438\u043c\u044f (\u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u0442\u0435\u0433\u0435, aria-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c), \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u043a\u0442\u043e\u0440.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/46d\/c2e\/c08\/46dc2ec086c45db08ac2671a2292429b.png\" alt=\"Accessibility Name\" title=\"Accessibility Name\" width=\"304\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/46d\/c2e\/c08\/46dc2ec086c45db08ac2671a2292429b.png\"\/><\/p>\n<div><figcaption>Accessibility Name<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Role<\/strong> \u2014 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\" rel=\"noopener noreferrer nofollow\">ARIA \u0440\u043e\u043b\u044c<\/a> \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0442\u0435\u0433\u0430.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0d7\/439\/9a4\/0d74399a4c2b556314eb142d66dd921c.png\" alt=\"Accessibility Role\" title=\"Accessibility Role\" width=\"304\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d7\/439\/9a4\/0d74399a4c2b556314eb142d66dd921c.png\"\/><\/p>\n<div><figcaption>Accessibility Role<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Keyboard-focusable<\/strong> \u2014 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/823\/0a7\/add\/8230a7addb6fefaaea115a92173aecfe.png\" alt=\"Accessibility Keyboard-focusable\" title=\"Accessibility Keyboard-focusable\" width=\"304\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/823\/0a7\/add\/8230a7addb6fefaaea115a92173aecfe.png\"\/><\/p>\n<div><figcaption>Accessibility Keyboard-focusable<\/figcaption><\/div>\n<\/figure>\n<h4>2. Accessibility Tree<\/h4>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u0430\u0431\u044b \u0441\u043f\u0440\u0430\u0432\u0430, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0442\u0430\u0431 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Accessibility.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/26b\/bdb\/959\/26bbdb9596b4379685b07afc3467d40d.png\" alt=\"Accessibility Tab\" title=\"Accessibility Tab\" width=\"1919\" height=\"461\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/26b\/bdb\/959\/26bbdb9596b4379685b07afc3467d40d.png\"\/><\/p>\n<div><figcaption>Accessibility Tab<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0447\u0442\u043e \u043c\u044b \u0442\u0443\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u044f \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0435\u0433\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0432 Accessibility Tree, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0436\u043d\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438: aria-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, Role, contents.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4b6\/3a2\/31a\/4b63a231a86951628c0c88cb40f400c0.png\" alt=\"Accessibility Tree\" title=\"Accessibility Tree\" width=\"1919\" height=\"461\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4b6\/3a2\/31a\/4b63a231a86951628c0c88cb40f400c0.png\"\/><\/p>\n<div><figcaption>Accessibility Tree<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Accessibility Tree<\/strong> \u2014 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0438\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448 DOM \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u0430, \u0447\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0436\u0438\u0437\u043d\u044c \u043f\u0440\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<br \/>\u041a\u0430\u043a \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c:  \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u2014> \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u2014> \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u043a\u0430 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443: \u0432 \u043d\u0430\u0448\u0435\u043c DOM \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u043c\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1ce\/69a\/d4b\/1ce69ad4bc8e3c7bbc6ffaf6cbfca869.png\" alt=\"Accessibility Tree\" title=\"Accessibility Tree\" width=\"1919\" height=\"461\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ce\/69a\/d4b\/1ce69ad4bc8e3c7bbc6ffaf6cbfca869.png\"\/><\/p>\n<div><figcaption>Accessibility Tree<\/figcaption><\/div>\n<\/figure>\n<h4>3. \u0418\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0437\u0440\u0435\u043d\u0438\u0435\u043c<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Emulate vision deficiencies (DevTools \u2014> Show Rendering \u2014> Emulate vision deficiencies), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u044b\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0438\u0434\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0437\u0440\u0435\u043d\u0438\u0435\u043c \u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><strong>Blurred Vision<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0447\u0435\u0442\u043a\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>Reduced Contrast<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0439 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Protanopia (no red)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Deuteranopia (no green)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Tritanopia (no blue)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0441\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Achromatopsia (no color)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043a\u0440\u043e\u043c\u0435 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de3\/555\/b0a\/de3555b0aac8f1bbf0e2ef3606336461.gif\" alt=\"Emulations\" title=\"Emulations\" width=\"1920\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de3\/555\/b0a\/de3555b0aac8f1bbf0e2ef3606336461.gif\"\/><\/p>\n<div><figcaption>Emulations<\/figcaption><\/div>\n<\/figure>\n<h4>4. Lighthouse accessibility audit<\/h4>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0444\u0438\u0448\u043a\u0430 \u043f\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u2014 \u0430\u0443\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse. \u0412 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0442\u0430\u0431 \u0431\u0430\u0440\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Lighthouse \u2014> <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/HEAD\/docs\/user-flows.md\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Mode<\/a> \u2014> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Device \u2014> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u0445 \u0442\u043e\u043b\u044c\u043a\u043e Accessibility \u2014> \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Analyze page load<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/12d\/2fe\/021\/12d2fe021ca08b2bcee28debf607f215.png\" alt=\"Lighthouse accessibility audit\" title=\"Lighthouse accessibility audit\" width=\"1919\" height=\"479\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/12d\/2fe\/021\/12d2fe021ca08b2bcee28debf607f215.png\"\/><\/p>\n<div><figcaption>Lighthouse accessibility audit<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c score in [0-100], \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>N.B. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0430\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c, \u0447\u0442\u043e \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435 100, \u043f\u0440\u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/accessibility\/scoring?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b1b\/700\/3b3\/b1b7003b3abbaeb72ea88d5190110421.png\" alt=\"Lighthouse accessibility audit result\" title=\"Lighthouse accessibility audit result\" width=\"1919\" height=\"479\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b1b\/700\/3b3\/b1b7003b3abbaeb72ea88d5190110421.png\"\/><\/p>\n<div><figcaption>Lighthouse accessibility audit result<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0432 Chrome \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c: <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/accessibility\/reference?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>, <a href=\"https:\/\/web.dev\/articles\/the-accessibility-tree\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a1<\/a>, <a href=\"https:\/\/developer.chrome.com\/blog\/full-accessibility-tree?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a2<\/a>.<\/p>\n<h3>\u0410\u043d\u0430\u043b\u0438\u0437 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/performance\" rel=\"noopener noreferrer nofollow\">Perfomance<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/memory-problems\/heap-snapshots\" rel=\"noopener noreferrer nofollow\">Memory<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" rel=\"noopener noreferrer nofollow\">Lighthouse<\/a>, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u0434\u0432\u0430 \u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445:<\/p>\n<h4>5. Coverage JS + CSS \u043a\u043e\u0434\u0430<\/h4>\n<p>\u0423 Chrome DevTools \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u2014 Coverage. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0430 \u043a\u0430\u043a\u043e\u0439 \u043d\u0435\u0442.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Coverage \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: DevTools \u2014> cmd(ctrl) + shift + p \u2014> Show Coverage (Drawer) \u2014> \u0436\u043c\u044f\u043a\u0430\u0435\u043c \u043d\u0430 record button(\u0443 \u043a\u043e\u0433\u043e-\u0442\u043e Capture overview). <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9b9\/65f\/bb9\/9b965fbb96e5bde7d02f724d8c3e1f33.gif\" alt=\"Coverage process\" title=\"Coverage process\" width=\"1920\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9b9\/65f\/bb9\/9b965fbb96e5bde7d02f724d8c3e1f33.gif\"\/><\/p>\n<div><figcaption>Coverage process<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u0447\u0435\u0442 \u043e \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0438 \u0432\u0438\u0434\u0438\u043c \u0441\u043a\u043e\u043b\u044c\u043a\u043e (Unused Bytes) \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u0430\u0439\u043b\u0435 (URL) \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e JS \u0438 CSS (Type) \u043a\u043e\u0434\u0430.<br \/>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438\/\u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f(\u0437\u0435\u043b\u0435\u043d\u044b\u043c \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435). \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0448\u044c\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fdd\/74a\/454\/fdd74a454a80a9606a89922285db2696.png\" alt=\"Coverage result\" title=\"Coverage result\" width=\"3024\" height=\"942\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fdd\/74a\/454\/fdd74a454a80a9606a89922285db2696.png\"\/><\/p>\n<div><figcaption>Coverage result<\/figcaption><\/div>\n<\/figure>\n<h4>6. CSS overview<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0444\u0438\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0442\u0447\u0435\u0442 \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 CSS \u043a\u043e\u0434\u0443. \u0422\u0430\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043b\u044f <code>background\/color\/border-color<\/code>, \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c\u044e, \u043a\u0430\u043a\u0438\u0435 <code>font-size\/line-height<\/code> \u0438 <code>@media<\/code> \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c CSS overview \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: DevTools \u2014> cmd(ctrl) + shift + p \u2014> Show CSS overview (Panel) \u2014> \u0436\u043c\u044f\u043a\u0430\u0435\u043c \u043d\u0430 click record button. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f79\/621\/e7e\/f79621e7e5c7e12078c4206f871ce854.gif\" alt=\"CSS overview process\" title=\"CSS overview process\" width=\"1920\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f79\/621\/e7e\/f79621e7e5c7e12078c4206f871ce854.gif\"\/><\/p>\n<div><figcaption>CSS overview process<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0442\u0447\u0435\u0442(\u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u043d\u0435\u0435):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/671\/726\/087\/671726087fdf37403d03c99c794786d9.png\" alt=\"CSS overview result\" title=\"CSS overview result\" width=\"3024\" height=\"1416\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/671\/726\/087\/671726087fdf37403d03c99c794786d9.png\"\/><\/p>\n<div><figcaption>CSS overview result<\/figcaption><\/div>\n<\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/h3>\n<p>\u0422\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c \u043f\u0440\u043e 3, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c (\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/console\/api\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>):<\/p>\n<h4>7. \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h4>\n<p><code>document.designMode = \"on\"<\/code> \u2014 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438. <\/p>\n<p>\u0411\u0435\u0437\u0443\u043c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\/\u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u0435\u0440\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0435\u043c\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0435\u043c\u0441\u044f!<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a (\u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0447\u0442\u043e\u0431\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u043e\u0441\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b46\/575\/7b2\/b465757b22a8401d24e89b002b32dbf4.gif\" alt=\"\u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f\/\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\" title=\"\u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f\/\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\" width=\"3024\" height=\"1722\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b46\/575\/7b2\/b465757b22a8401d24e89b002b32dbf4.gif\"\/><\/p>\n<div><figcaption>\u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f\/\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h4>8. \u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u0437 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438<\/h4>\n<p><code>$0, $1, $2, $3, $4<\/code> \u2014 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435. <code>$0<\/code> \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, <code>$1<\/code> \u2014 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0442.\u0434.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ad0\/e2e\/5e3\/ad0e2e5e32c7f3961d39fd74bbddb872.png\" alt=\"body - $0\" title=\"body - $0\" width=\"1259\" height=\"479\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ad0\/e2e\/5e3\/ad0e2e5e32c7f3961d39fd74bbddb872.png\"\/><\/p>\n<div><figcaption>body &#8212; $0<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4ce\/5c7\/aa9\/4ce5c7aa97662d0af255b9a4abcec873.png\" alt=\"\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e $0\" title=\"\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e $0\" width=\"1916\" height=\"479\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4ce\/5c7\/aa9\/4ce5c7aa97662d0af255b9a4abcec873.png\"\/><\/p>\n<div><figcaption>\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e $0<\/figcaption><\/div>\n<\/figure>\n<h4>9. \u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/console\/live-expressions\" rel=\"noopener noreferrer nofollow\">Live Expression<\/a> \u2014 \u0433\u043b\u0430\u0437\u0438\u043a \u0441\u0432\u0435\u0440\u0445\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c JavaScript \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437 \u0432 250ms \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0438\u043d\u043e\u0433\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ece\/3ba\/182\/ece3ba18290e6cc86d83bb7297dc2211.gif\" alt=\"Live Expression Example\" title=\"Live Expression Example\" width=\"3024\" height=\"1722\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ece\/3ba\/182\/ece3ba18290e6cc86d83bb7297dc2211.gif\"\/><\/p>\n<div><figcaption>Live Expression Example<\/figcaption><\/div>\n<\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<\/h3>\n<h4>10. \u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u043b\u044e\u0431\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u041f\u041a\u041c \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 Headers, Payload \u0432 \u0432\u0438\u0434\u0435 <code>cURL\/PowerShell\/fetch\/Node.js fetch<\/code>. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0432 Postman, \u0438 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cdb\/0fd\/c10\/cdb0fdc10fd5369b2521eca4d3e64e75.png\" alt=\"Copy cURL\" title=\"Copy cURL\" width=\"3024\" height=\"1162\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cdb\/0fd\/c10\/cdb0fdc10fd5369b2521eca4d3e64e75.png\"\/><\/p>\n<div><figcaption>Copy cURL<\/figcaption><\/div>\n<\/figure>\n<h4>11. \u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0444\u0438\u0447\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u043b\u0430\u0431\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 (fast 3g\/slow 3g\/offline), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0de\/ac1\/4bc\/0deac14bc0a02e9a08b47fd103c3b73f.png\" alt=\"Change internet connection\" title=\"Change internet connection\" width=\"3024\" height=\"1162\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0de\/ac1\/4bc\/0deac14bc0a02e9a08b47fd103c3b73f.png\"\/><\/p>\n<div><figcaption>Change internet connection<\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u0442\u043e\u0433\u043e<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aa8\/451\/d8e\/aa8451d8ea4827bc4f777c733bfc4e9c.PNG\" alt=\"DevTools - \u0421\u043b\u0443\u0433\u0430 \u041d\u0430\u0440\u043e\u0434\u0430\" title=\"DevTools - \u0421\u043b\u0443\u0433\u0430 \u041d\u0430\u0440\u043e\u0434\u0430\" width=\"1763\" height=\"1203\"\/><\/p>\n<div><figcaption>DevTools &#8212; \u0421\u043b\u0443\u0433\u0430 \u041d\u0430\u0440\u043e\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0432 Chrome DevTools \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0444\u0438\u0447\u0438, \u0432\u0430\u043c \u0432 <a href=\"https:\/\/developer.chrome.com\/docs\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>, \u0443\u0434\u0430\u0447\u0438!<\/p>\n<hr\/>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443\u00a0\u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c\u00a0<a href=\"https:\/\/t.me\/frontendforthesoul\" rel=\"noopener noreferrer nofollow\"><strong>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u041a\u0430\u043d\u0430\u043b<\/strong><\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u00a0\u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e\u00a0\u0444\u0440\u043e\u043d\u0442\u0435, \u0434\u0435\u043b\u044e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u043a\u043d\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/791554\/\"> https:\/\/habr.com\/ru\/articles\/791554\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!<\/p>\n<p>\u0412\u0441\u0435 \u043c\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Chrome DevTools, \u043d\u043e \u0442\u0430\u043c \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0447\u0435\u0439, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043b\u0438. \u0412 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0441\u0430\u043c.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u044d\u0442\u0438 \u0444\u0438\u0447\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0438\u0445 \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u0444\u0438\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u043c \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0432 \u0432\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u041f\u043e\u0433\u043d\u0430\u043b\u0438!<\/p>\n<figure class=\"\">\n<div><figcaption>\u042f \u0441\u043a\u0430\u0437\u0430\u043b \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u043c!<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Chrome DevTools<\/h3>\n<p>\u0412 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0435\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0447\u0443\u0442\u043e\u0447\u043a\u0443 \u043b\u0443\u0447\u0448\u0435 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>Chrome DevTools \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e, \u0432\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<h4>1. Accessibility \u0432 Inspect Element<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 Inspect Element, \u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0438 \u0434\u0435\u0431\u0430\u0433\u0435 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. <\/p>\n<p>\u0412\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043b\u0438, \u0447\u0442\u043e \u043a\u0440\u043e\u043c\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e width\/height\/margin\/padding\/font-styles, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b Accessibility(\u044f \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430 \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u0434\u0435\u043b), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u043b\u044f:<\/p>\n<ul>\n<li>\n<p><strong>Contrast<\/strong> \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0430(\u044d\u0442\u043e \u043a\u0441\u0442\u0430\u0442\u0438 <a href=\"https:\/\/webaim.org\/projects\/million\/update#wcag:~:text=Low%20contrast%20text%0985.3%25%0986.1%25\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u043e\u043c\u0435\u0440 1<\/a> \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435), \u0443 Google \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u0443\u0447\u0430\u043b\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u043a\u0430\u043a \u0435\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c &#8212; <a href=\"https:\/\/developers.google.com\/codelabs\/devtools-cvd?hl=ru#0\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>. \u0412 \u044d\u0442\u043e\u0439 \u0436\u0435 \u043e\u0431\u0443\u0447\u0430\u043b\u043a\u0435 \u043e\u043d\u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0435 &#8212; 3.0 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0435 &#8212; 4.5.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\">\n<div><figcaption>Accessibility Contrast \u0432 \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u0437\u0430\u0439\u0442\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Devtools \u2014> Experiments \u2014> Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ration and AA\/AAA guidelines, \u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0432 %.<\/p>\n<figure class=\"\">\n<div><figcaption>Accessibility Contrast \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Name<\/strong> \u2014 \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0438\u043c\u044f (\u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u0442\u0435\u0433\u0435, aria-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c), \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u043a\u0442\u043e\u0440.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\">\n<div><figcaption>Accessibility Name<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Role<\/strong> \u2014 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\" rel=\"noopener noreferrer nofollow\">ARIA \u0440\u043e\u043b\u044c<\/a> \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0442\u0435\u0433\u0430.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\">\n<div><figcaption>Accessibility Role<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Keyboard-focusable<\/strong> \u2014 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\">\n<div><figcaption>Accessibility Keyboard-focusable<\/figcaption><\/div>\n<\/figure>\n<h4>2. Accessibility Tree<\/h4>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u0430\u0431\u044b \u0441\u043f\u0440\u0430\u0432\u0430, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0442\u0430\u0431 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Accessibility.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Accessibility Tab<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0447\u0442\u043e \u043c\u044b \u0442\u0443\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0412\u044b\u0431\u0438\u0440\u0430\u044f \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0435\u0433\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0432 Accessibility Tree, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0436\u043d\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438: aria-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, Role, contents.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Accessibility Tree<\/figcaption><\/div>\n<\/figure>\n<ul>\n<li>\n<p><strong>Accessibility Tree<\/strong> \u2014 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0438\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e \u0441\u0443\u0442\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0448 DOM \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u0430, \u0447\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0436\u0438\u0437\u043d\u044c \u043f\u0440\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438.<br \/>\u041a\u0430\u043a \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c:  \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u2014> \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u2014> \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u043a\u0430 \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443: \u0432 \u043d\u0430\u0448\u0435\u043c DOM \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u043c\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Accessibility Tree<\/figcaption><\/div>\n<\/figure>\n<h4>3. \u0418\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0437\u0440\u0435\u043d\u0438\u0435\u043c<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Emulate vision deficiencies (DevTools \u2014> Show Rendering \u2014> Emulate vision deficiencies), \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u044b\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0438\u0434\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0437\u0440\u0435\u043d\u0438\u0435\u043c \u0438 \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><strong>Blurred Vision<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0447\u0435\u0442\u043a\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>Reduced Contrast<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0439 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Protanopia (no red)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Deuteranopia (no green)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Tritanopia (no blue)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0441\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>Achromatopsia (no color)<\/strong> \u2014 \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043a\u0440\u043e\u043c\u0435 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>Emulations<\/figcaption><\/div>\n<\/figure>\n<h4>4. Lighthouse accessibility audit<\/h4>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0444\u0438\u0448\u043a\u0430 \u043f\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u2014 \u0430\u0443\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Lighthouse. \u0412 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0442\u0430\u0431 \u0431\u0430\u0440\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Lighthouse \u2014> <a href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\/blob\/HEAD\/docs\/user-flows.md\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Mode<\/a> \u2014> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Device \u2014> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0432 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u0445 \u0442\u043e\u043b\u044c\u043a\u043e Accessibility \u2014> \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Analyze page load<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Lighthouse accessibility audit<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c score in [0-100], \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>N.B. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0430\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c, \u0447\u0442\u043e \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0435 100, \u043f\u0440\u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/accessibility\/scoring?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Lighthouse accessibility audit result<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0440\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0432 Chrome \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c: <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/accessibility\/reference?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a<\/a>, <a href=\"https:\/\/web.dev\/articles\/the-accessibility-tree\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a1<\/a>, <a href=\"https:\/\/developer.chrome.com\/blog\/full-accessibility-tree?hl=en\" rel=\"noopener noreferrer nofollow\">\u0442\u044b\u043a2<\/a>.<\/p>\n<h3>\u0410\u043d\u0430\u043b\u0438\u0437 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432: <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/performance\" rel=\"noopener noreferrer nofollow\">Perfomance<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/memory-problems\/heap-snapshots\" rel=\"noopener noreferrer nofollow\">Memory<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\" rel=\"noopener noreferrer nofollow\">Lighthouse<\/a>, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u0434\u0432\u0430 \u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445:<\/p>\n<h4>5. Coverage JS + CSS \u043a\u043e\u0434\u0430<\/h4>\n<p>\u0423 Chrome DevTools \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u2014 Coverage. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0430 \u043a\u0430\u043a\u043e\u0439 \u043d\u0435\u0442.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Coverage \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: DevTools \u2014> cmd(ctrl) + shift + p \u2014> Show Coverage (Drawer) \u2014> \u0436\u043c\u044f\u043a\u0430\u0435\u043c \u043d\u0430 record button(\u0443 \u043a\u043e\u0433\u043e-\u0442\u043e Capture overview). <\/p>\n<figure class=\"full-width\">\n<div><figcaption>Coverage process<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u0447\u0435\u0442 \u043e \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0438 \u0432\u0438\u0434\u0438\u043c \u0441\u043a\u043e\u043b\u044c\u043a\u043e (Unused Bytes) \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u0430\u0439\u043b\u0435 (URL) \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e JS \u0438 CSS (Type) \u043a\u043e\u0434\u0430.<br \/>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438\/\u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f(\u0437\u0435\u043b\u0435\u043d\u044b\u043c \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435). \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0448\u044c\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Coverage result<\/figcaption><\/div>\n<\/figure>\n<h4>6. CSS overview<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0444\u0438\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0442\u0447\u0435\u0442 \u043f\u043e \u0432\u0430\u0448\u0435\u043c\u0443 CSS \u043a\u043e\u0434\u0443. \u0422\u0430\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043b\u044f <code>background\/color\/border-color<\/code>, \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u044c\u044e, \u043a\u0430\u043a\u0438\u0435 <code>font-size\/line-height<\/code> \u0438 <code>@media<\/code> \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c CSS overview \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: DevTools \u2014> cmd(ctrl) + shift + p \u2014> Show CSS overview (Panel) \u2014> \u0436\u043c\u044f\u043a\u0430\u0435\u043c \u043d\u0430 click record button. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>CSS overview process<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0442\u0447\u0435\u0442(\u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u0440\u0430\u043d\u0435\u0435):<\/p>\n<figure class=\"full-width\">\n<div><figcaption>CSS overview result<\/figcaption><\/div>\n<\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/h3>\n<p>\u0422\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043b\u0438\u0448\u044c \u043f\u0440\u043e 3, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c (\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/console\/api\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>):<\/p>\n<h4>7. \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h4>\n<p><code>document.designMode = \"on\"<\/code> \u2014 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438. <\/p>\n<p>\u0411\u0435\u0437\u0443\u043c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\/\u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u0435\u0440\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0435\u043c\u0443 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0435\u043c\u0441\u044f!<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a (\u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0447\u0442\u043e\u0431\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u043e\u0441\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e).<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043f\u043e\u043b\u044f\/\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h4>8. \u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u0437 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438<\/h4>\n<p><code>$0, $1, $2, $3, $4<\/code> \u2014 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435. <code>$0<\/code> \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, <code>$1<\/code> \u2014 \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0442.\u0434.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>body &#8212; $0<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e $0<\/figcaption><\/div>\n<\/figure>\n<h4>9. \u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/console\/live-expressions\" rel=\"noopener noreferrer nofollow\">Live Expression<\/a> \u2014 \u0433\u043b\u0430\u0437\u0438\u043a \u0441\u0432\u0435\u0440\u0445\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c JavaScript \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437 \u0432 250ms \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0438\u043d\u043e\u0433\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Live Expression Example<\/figcaption><\/div>\n<\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<\/h3>\n<h4>10. \u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u043b\u044e\u0431\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u041f\u041a\u041c \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 Headers, Payload \u0432 \u0432\u0438\u0434\u0435 <code>cURL\/PowerShell\/fetch\/Node.js fetch<\/code>. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0432 Postman, \u0438 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Copy cURL<\/figcaption><\/div>\n<\/figure>\n<h4>11. \u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430<\/h4>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0444\u0438\u0447\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u043b\u0430\u0431\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 (fast 3g\/slow 3g\/offline), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Change internet connection<\/figcaption><\/div>\n<\/figure>\n<h3>\u0418\u0442\u043e\u0433\u043e<\/h3>\n<figure class=\"full-width\">\n<div><figcaption>DevTools &#8212; \u0421\u043b\u0443\u0433\u0430 \u041d\u0430\u0440\u043e\u0434\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0432 Chrome DevTools \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u0438\u0447\u0435\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0444\u0438\u0447\u0438, \u0432\u0430\u043c \u0432 <a href=\"https:\/\/developer.chrome.com\/docs\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>, \u0443\u0434\u0430\u0447\u0438!<\/p>\n<hr\/>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439, \u0442\u043e \u0443\u00a0\u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c\u00a0<a href=\"https:\/\/t.me\/frontendforthesoul\" rel=\"noopener noreferrer nofollow\"><strong>\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u041a\u0430\u043d\u0430\u043b<\/strong><\/a>, \u0433\u0434\u0435 \u044f \u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u00a0\u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043e\u00a0\u0444\u0440\u043e\u043d\u0442\u0435, \u0434\u0435\u043b\u044e\u0441\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u043a\u043d\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0430\u0432\u0442\u043e\u0440\u043e\u0432.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/791554\/\"> https:\/\/habr.com\/ru\/articles\/791554\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-367370","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/367370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=367370"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/367370\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=367370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=367370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}