{"id":471655,"date":"2025-08-22T15:01:46","date_gmt":"2025-08-22T15:01:46","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=471655"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=471655","title":{"rendered":"<span>\u0417\u0430\u0447\u0435\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 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<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/282\/425\/71c\/28242571c0e20f24c0112a65c1917a92.png\" width=\"2438\" height=\"1369\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/282\/425\/71c\/28242571c0e20f24c0112a65c1917a92.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/282\/425\/71c\/28242571c0e20f24c0112a65c1917a92.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0430\u043d\u044f \u0422\u0440\u0438\u0448\u043a\u0438\u043d, \u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u0432 <a href=\"https:\/\/kts.tech\/\" rel=\"noopener noreferrer nofollow\">KTS<\/a>.<\/p>\n<p>\u0412 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/885062\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043f\u043e\u043b\u044c\u0437\u0443 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432. \u0422\u043e\u0433\u0434\u0430 \u044f <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/885062\/#DevTools\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u0442\u0435\u043c\u0443 DevTools<\/a> \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0442\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0448\u0443 \u043f\u0430\u043d\u0435\u043b\u044c DevTools, \u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443. \u0417\u0430\u043e\u0434\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u044f \u0434\u0430\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0443\u043b\u0437\u0430\u043c\u0438 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%20%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D1%82%D1%8C%20DevTools\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5%20%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8,%20%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%BD%D1%83%D0%B6%D0%BD%D1%8B%20%D0%BC%D0%B5%D0%BD%D0%B5%D0%B4%D0%B6%D0%B5%D1%80%D1%83\" rel=\"noopener noreferrer nofollow\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Elements\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D1%82%D0%B0%D0%BA%D0%BE%D0%B5%20HTML%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#CSS:%20%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9%20%D0%B2%D0%B8%D0%B4%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#DOM:%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B\" rel=\"noopener noreferrer nofollow\">DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Elements\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Console\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Console\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Network\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%BE%20Network\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 \u043f\u043e Network<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%8E%D1%82%20iframe,%20WebView%20%D0%B8%20%D0%B7%D0%B0%D1%87%D0%B5%D0%BC%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20Eruda\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 iframe, WebView \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Eruda<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#iframe\" rel=\"noopener noreferrer nofollow\">iframe<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#WebView\" rel=\"noopener noreferrer nofollow\">WebView<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Eruda\" rel=\"noopener noreferrer nofollow\">Eruda<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p><a class=\"anchor\" name=\"%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u043b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 DevTools \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442. \u042d\u0442\u043e \u0443\u043f\u0443\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>DevTools \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u044b \u0431\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445: \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0431\u0430\u0433\u0438, \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u044f\u0441\u044c \u0432 \u043a\u043e\u0434. \u0413\u043e\u0432\u043e\u0440\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0435\u0435, \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0446\u0435\u043b\u0435\u0439:<\/p>\n<ol>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0430\u0433\u043e\u0432.<\/strong> \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u043f\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0431\u0430\u0433: \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0438 \u0442\u043e\u0447\u043d\u044b\u0439 \u0431\u0430\u0433\u0440\u0435\u043f\u043e\u0440\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. <\/strong>\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0444\u0438\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043b\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0435, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. <\/strong>DevTools \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u043d\u0435\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u0438 \u043a\u0430\u043a \u043e\u043d\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. <\/strong>\u0412\u043b\u0430\u0434\u0435\u044f DevTools, \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0432 \u0434\u0443\u0445\u0435 \u00ab\u0410 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f?\u00bb, \u00ab\u0410 \u043a\u0430\u043a\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430?\u00bb \u0438 \u00ab\u0410 \u0447\u0442\u043e \u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0430?\u00bb, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong><\/p>\n<p>DevTools <strong>\u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c<\/strong> \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u044b. \u042d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0433\u0438\u043f\u043e\u0442\u0435\u0437 \u0438 \u0441\u0431\u043e\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n<ul>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Elements<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Console<\/strong> \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Network<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%B0%D0%BA%20%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D1%82%D1%8C%20DevTools\" id=\"\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools\"><\/a><\/p>\n<p>DevTools \u0435\u0441\u0442\u044c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (\u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u0438\u0445 \u043d\u0435\u0442). \u041e\u043d\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448:<\/p>\n<ul>\n<li>\n<p><strong>F12<\/strong> \u0438\u043b\u0438 <strong>Ctrl + Shift + I<\/strong> (Windows);<\/p>\n<\/li>\n<li>\n<p><strong>Cmd + Option + I<\/strong> (Mac).<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f DevTools \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0431\u043e\u043a\u0443 \u0438\u043b\u0438 \u0441\u043d\u0438\u0437\u0443 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/267\/d3a\/398\/267d3a3986b87dd0beb0b974ea417e83.png\" alt=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 DevTools \u0432 Chrome\" title=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 DevTools \u0432 Chrome\" width=\"1224\" height=\"734\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/267\/d3a\/398\/267d3a3986b87dd0beb0b974ea417e83.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/267\/d3a\/398\/267d3a3986b87dd0beb0b974ea417e83.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 DevTools \u0432 Chrome<\/figcaption><\/div>\n<\/figure>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5%20%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8,%20%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%BD%D1%83%D0%B6%D0%BD%D1%8B%20%D0%BC%D0%B5%D0%BD%D0%B5%D0%B4%D0%B6%D0%B5%D1%80%D1%83\" id=\"\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443\"><\/a><\/p>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements<\/h3>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Elements\" id=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements\"><\/a><\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Elements \u0432 DevTools \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0431\u0430\u0433\u0438 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/042\/60b\/74a\/04260b74a664d68e7d15ef213c24ede8.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 HTML \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 HTML \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430\" width=\"1224\" height=\"734\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/042\/60b\/74a\/04260b74a664d68e7d15ef213c24ede8.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/042\/60b\/74a\/04260b74a664d68e7d15ef213c24ede8.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 HTML \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438<\/h4>\n<p><a class=\"anchor\" name=\"#%D0%A7%D1%82%D0%BE%20%D1%82%D0%B0%D0%BA%D0%BE%D0%B5%20HTML%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%B8\" id=\"#\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438\"><\/a><\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0438 \u043d\u0430 \u044d\u0442\u0438\u0445 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u0445. <strong>HTML <\/strong>(HyperText Markup Language) \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u043a\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 <strong>\u0442\u0435\u0433\u043e\u0432<\/strong>, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p><code>&lt;h1&gt; <\/code>\u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p><code>&lt;p&gt;<\/code> \u2014 \u0430\u0431\u0437\u0430\u0446;<\/p>\n<\/li>\n<li>\n<p><code>&lt;a&gt;<\/code> \u2014 \u0441\u0441\u044b\u043b\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>&lt;button&gt;<\/code> \u2014 \u043a\u043d\u043e\u043f\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>&lt;img&gt;<\/code> \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><code>&lt;div&gt;<\/code> \u2014 \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0430\u0431\u0437\u0430\u0446\u0435\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0442.\u0434.);<\/p>\n<\/li>\n<li>\n<p><code>&lt;span&gt;<\/code> \u2014 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 (\u0441\u043b\u043e\u0432, \u0444\u0440\u0430\u0437 \u0438 \u0442\u0434);<\/p>\n<\/li>\n<li>\n<p><code>&lt;script&gt;<\/code> \u2014 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 JavaScript-\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0448\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043e \u0442\u0435\u0433\u0430\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0442 HTML Academy (\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u0440\u0435\u043a\u043b\u0430\u043c\u0430), \u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/companies\/macloud\/articles\/555400\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u0438\u0435 \u0442\u0435\u0433\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0443\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0439\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0422\u0435\u0433\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c <strong>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/strong> \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0441\u0441\u044b\u043b\u043a\u0443 \u0438\u043b\u0438 \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e. \u0412\u043e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><code>class<\/code> \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><code>id<\/code> \u2014 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440;<\/p>\n<\/li>\n<li>\n<p><code>href<\/code> \u2014 \u0441\u0441\u044b\u043b\u043a\u0430 (\u0434\u043b\u044f <code>&lt;a&gt;<\/code>);<\/p>\n<\/li>\n<li>\n<p><code>src<\/code> \u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a (\u0434\u043b\u044f <code>&lt;img&gt;<\/code>, <code>&lt;script&gt;<\/code>).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/18b\/046\/579\/18b046579c496ed9920a4f4538aed4cc.png\" width=\"1224\" height=\"370\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/18b\/046\/579\/18b046579c496ed9920a4f4538aed4cc.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/18b\/046\/579\/18b046579c496ed9920a4f4538aed4cc.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 HTML-\u0444\u0430\u0439\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;button class=\"cta\" id=\"beautify\"&gt;\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e&lt;\/button&gt;<\/code><\/pre>\n<p>\u0427\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442:<\/p>\n<ul>\n<li>\n<p><code>&lt;button&gt;<\/code> \u2014 <strong>\u0442\u0438\u043f \u0442\u0435\u0433\u0430<\/strong>, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>class=\"cta\"<\/code> \u2014 <strong>\u043a\u043b\u0430\u0441\u0441<\/strong>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 (CSS) \u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430);<\/p>\n<\/li>\n<li>\n<p><code>id=\"beautify\"<\/code> \u2014 <strong>\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/strong> \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438\u043b\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><code>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e<\/code> \u2014 <strong>\u0442\u0435\u043a\u0441\u0442<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0438\u0434\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p><code>&lt;\/button&gt;<\/code> \u2014 <strong>\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433<\/strong>, \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u043d\u0430\u044f, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b HTML \u0438 \u0442\u0435\u0433\u0438, \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Elements. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f.<\/p>\n<h4>CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p><a class=\"anchor\" name=\"CSS:%20%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9%20%D0%B2%D0%B8%D0%B4%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" id=\"CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\"><\/a><\/p>\n<p><strong>CSS <\/strong>\u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435: \u0446\u0432\u0435\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0448\u0440\u0438\u0444\u0442\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432. \u042d\u0442\u0430 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a Cascading Style Sheets \u2014 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 DevTools, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Elements \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Styles \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044b \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0435 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434: \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0440\u0430\u043c\u043a\u0438. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043a\u0430\u043a \u0435\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0441 \u043c\u0430\u043a\u0435\u0442\u043e\u043c.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c69\/399\/0e6\/c693990e6edb45c8557777e64b1fa46e.png\" width=\"1224\" height=\"370\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c69\/399\/0e6\/c693990e6edb45c8557777e64b1fa46e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c69\/399\/0e6\/c693990e6edb45c8557777e64b1fa46e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<pre><code class=\"javascript\">#beautify {   color: white;                  \/\/ \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0431\u0435\u043b\u044b\u0439   background-color: hotpink;     \/\/ \u0444\u043e\u043d \u2014 \u044f\u0440\u043a\u043e-\u0440\u043e\u0437\u043e\u0432\u044b\u0439   font-size: 18px;               \/\/ \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u2014 18 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439   border: none;                  \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e   border-radius: 6px;            \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0435 \u0443\u0433\u043b\u044b   padding: 10px 16px;            \/\/ \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438   cursor: pointer;               \/\/ \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u2014 \u043a\u0443\u0440\u0441\u043e\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0443\u043a\u0438 } <\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442, \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Styles, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0443 \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u043b\u044f \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Elements \u0438 \u043f\u0430\u043d\u0435\u043b\u044c Styles, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0434\u043b\u044f \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434.<\/p>\n<h4>DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h4>\n<p><a class=\"anchor\" name=\"DOM:%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B\" id=\"DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\"><\/a><\/p>\n<p><strong>DOM <\/strong>(Document Object Model) \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437 HTML. \u0415\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0434\u0435\u0440\u0435\u0432\u043e, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u043d\u043e\u043f\u043a\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0431\u043b\u043e\u043a) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 DevTools \u0438 \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u0435\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0432\u0438\u0434\u0435\u043d \u0438\u043b\u0438 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043e\u0438\u0441\u043a \u043f\u043e Ctrl+F \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Elements, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043b\u0438 id.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/19c\/c6f\/319\/19cc6f3191722a6243afff5f54c0011c.png\" width=\"1226\" height=\"734\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/19c\/c6f\/319\/19cc6f3191722a6243afff5f54c0011c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/19c\/c6f\/319\/19cc6f3191722a6243afff5f54c0011c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements<\/h4>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Elements\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements\"><\/a><\/p>\n<p>\u0417\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u0435 \u043d\u0430\u0432\u044b\u043a \u0441\u0440\u0430\u0437\u0443, \u0447\u0442\u043e\u0431\u044b DevTools \u0441\u0442\u0430\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u044c\u044e.<\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442<a href=\"https:\/\/kts.tech\/projects?directionTag=special\" rel=\"noopener noreferrer nofollow\"> <\/a><a href=\"http:\/\/kts.tech\" rel=\"noopener noreferrer nofollow\">kts.tech<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u00abAI-\u041f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u043d\u0430 \u041f\u041c\u042d\u0424\u00bb \u0447\u0435\u0440\u0435\u0437 Ctrl + F.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 <code>#111317<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0446\u0432\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 <code>#fcb3b3<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/97c\/355\/c04\/97c355c04e56f9fd561279af926fb7a6.png\" width=\"1690\" height=\"718\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/97c\/355\/c04\/97c355c04e56f9fd561279af926fb7a6.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/97c\/355\/c04\/97c355c04e56f9fd561279af926fb7a6.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/h3>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Console\" id=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console\"><\/a><\/p>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 <strong>Console<\/strong> \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u044b. \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0427\u0430\u0441\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430 \u0447\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043e\u0448\u0438\u0431\u043a\u0430 \u2014 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f. Console \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0437\u0430 \u043f\u0430\u0440\u0443 \u043c\u0438\u043d\u0443\u0442: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u043e\u0448\u0438\u0431\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u043e\u043c\u0435\u043d. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u043d \u0432\u0430\u0448 \u0434\u043e\u043c\u0435\u043d \u0438\u043b\u0438 \u043f\u0443\u0442\u044c, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435. \u0415\u0441\u043b\u0438 \u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0434\u043e\u043c\u0435\u043d\u043e\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"http:\/\/vk.com\" rel=\"noopener noreferrer nofollow\">vk.com<\/a>, <a href=\"http:\/\/sentry.io\" rel=\"noopener noreferrer nofollow\">sentry.io<\/a> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 API), \u0431\u0430\u0433 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430 \u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u0435.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3f0\/c98\/449\/3f0c984495a226a149d023c36b9c6436.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0435\u043d\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0435\u043d\" width=\"1224\" height=\"392\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/3f0\/c98\/449\/3f0c984495a226a149d023c36b9c6436.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3f0\/c98\/449\/3f0c984495a226a149d023c36b9c6436.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0435\u043d<\/figcaption><\/div>\n<\/figure>\n<p>Console \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5ff\/58f\/14c\/5ff58f14c1975e8d8a84c65524249705.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043b\u043e\u0433\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043b\u043e\u0433\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443\" width=\"2230\" height=\"388\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/5ff\/58f\/14c\/5ff58f14c1975e8d8a84c65524249705.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5ff\/58f\/14c\/5ff58f14c1975e8d8a84c65524249705.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043b\u043e\u0433\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 <code>localStorage<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0442\u0435\u043c\u0430) \u0438\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0435\u0440\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fa2\/905\/aea\/fa2905aea38485e887e62b2302b354fc.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b localStorage \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432 \u043e\u0442\u0432\u0435\u0442\u0435\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b localStorage \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432 \u043e\u0442\u0432\u0435\u0442\u0435\" width=\"2244\" height=\"252\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/fa2\/905\/aea\/fa2905aea38485e887e62b2302b354fc.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fa2\/905\/aea\/fa2905aea38485e887e62b2302b354fc.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b localStorage \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432 \u043e\u0442\u0432\u0435\u0442\u0435<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:<\/strong> \u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0415\u0441\u043b\u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438. \u041d\u043e\u0432\u0438\u0447\u043a\u0430\u043c \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Console \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0432 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>console.log<\/code> \u0438\u043b\u0438 <code>localStorage<\/code>), \u0430 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console<\/h4>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Console\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console\"><\/a><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Console, \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 1<\/strong><\/p>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%201\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 1\"><\/a><\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442<a href=\"https:\/\/kts.tech\/projects?directionTag=special\" rel=\"noopener noreferrer nofollow\"> <\/a><a href=\"http:\/\/kts.tech\" rel=\"noopener noreferrer nofollow\">kts.tech<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Console.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430 \u0447\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d \u0432 \u043e\u0448\u0438\u0431\u043a\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 2<\/strong><\/p>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%202\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 2\"><\/a><\/p>\n<ol>\n<li>\n<p>\u0412 \u0442\u043e\u0439 \u0436\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Console \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<\/li>\n<\/ol>\n<p><code>console.log(\"Hello, PM!\")<\/code><\/p>\n<ol start=\"2\">\n<li>\n<p>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0440\u0435\u0434\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043b\u043e\u0433\u043e\u0432.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 3<\/strong><\/p>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%203\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 3\"><\/a><\/p>\n<ol>\n<li>\n<p>\u0412\u0441\u0435 \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<\/li>\n<\/ol>\n<p><code>localStorage<\/code><\/p>\n<ol start=\"2\">\n<li>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 localStorage \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0438 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0439\u0442\u0435, \u0435\u0441\u0442\u044c \u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<\/h3>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Network\" id=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network\"><\/a><\/p>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 <strong>Network<\/strong> \u0432 DevTools \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u043a\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430 \u0438\u043b\u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 DevTools \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <strong>Network<\/strong>. \u041f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043b\u0443\u0447\u0448\u0435 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u0430\u0436\u0430\u0432 \u0437\u043d\u0430\u0447\u043e\u043a \u0441 \u043f\u0435\u0440\u0435\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044b\u043c \u043a\u0440\u0443\u0433\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430, \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 Network \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0440\u0435\u0434\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440 <strong>XHR<\/strong> \u2014 \u043e\u043d \u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fb6\/27c\/ace\/fb627cacea72095dc7dee28ac0740bf2.png\" alt=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c XHR\" title=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c XHR\" width=\"3418\" height=\"1794\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/fb6\/27c\/ace\/fb627cacea72095dc7dee28ac0740bf2.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fb6\/27c\/ace\/fb627cacea72095dc7dee28ac0740bf2.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c XHR<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f. \u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <strong>Headers<\/strong> \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f (GET \u0438\u043b\u0438 POST), \u043a\u0430\u043a\u043e\u0439 \u0430\u0434\u0440\u0435\u0441, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0430 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <strong>Response<\/strong> \u2014 \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b \u0441\u0435\u0440\u0432\u0435\u0440. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0432\u0438\u0434\u0435\u043d \u043a\u043e\u0434 \u043e\u0442\u0432\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e: 200 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e, 400 \u0438\u043b\u0438 404 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0430 500 \u2014 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2d7\/a1e\/2e1\/2d7a1e2e1ffa2158836ae8ba5ab1ef0d.png\" alt=\"\u0417\u0430\u043f\u0440\u043e\u0441 \u0432 Network \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 Headers. \u0412\u0438\u0434\u043d\u044b \u043c\u0435\u0442\u043e\u0434, URL \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\" title=\"\u0417\u0430\u043f\u0440\u043e\u0441 \u0432 Network \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 Headers. \u0412\u0438\u0434\u043d\u044b \u043c\u0435\u0442\u043e\u0434, URL \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\" width=\"3418\" height=\"1794\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/2d7\/a1e\/2e1\/2d7a1e2e1ffa2158836ae8ba5ab1ef0d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2d7\/a1e\/2e1\/2d7a1e2e1ffa2158836ae8ba5ab1ef0d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0417\u0430\u043f\u0440\u043e\u0441 \u0432 Network \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c\u0438 Headers. \u0412\u0438\u0434\u043d\u044b \u043c\u0435\u0442\u043e\u0434, URL \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3e5\/a3d\/0f3\/3e5a3d0f326110917fd15e7e06b6abb3.png\" alt=\"\u0422\u043e\u0442 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c Response. \u041f\u043e\u043a\u0430\u0437\u0430\u043d JSON \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430\" title=\"\u0422\u043e\u0442 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c Response. \u041f\u043e\u043a\u0430\u0437\u0430\u043d JSON \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430\" width=\"3418\" height=\"1794\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/3e5\/a3d\/0f3\/3e5a3d0f326110917fd15e7e06b6abb3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3e5\/a3d\/0f3\/3e5a3d0f326110917fd15e7e06b6abb3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0422\u043e\u0442 \u0436\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c Response. \u041f\u043e\u043a\u0430\u0437\u0430\u043d JSON \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0436\u0430\u043b\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u0434\u00bb \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c Network, \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441. \u0415\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441. \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u0435\u0441\u0442\u044c, \u043d\u043e \u0441 \u043a\u043e\u0434\u043e\u043c 500, \u0437\u043d\u0430\u0447\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0415\u0441\u043b\u0438 \u043a\u043e\u0434 200, \u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Response \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u043b \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b7\/939\/819\/1b7939819c0cacea38af23beb3ec1367.png\" alt=\"\u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u0445 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c 200, \u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443.\" title=\"\u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u0445 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c 200, \u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443.\" width=\"2272\" height=\"926\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/1b7\/939\/819\/1b7939819c0cacea38af23beb3ec1367.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1b7\/939\/819\/1b7939819c0cacea38af23beb3ec1367.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\u0445 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c 200, \u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443.<\/figcaption><\/div>\n<\/figure>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 \u043f\u043e Network<\/h4>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%BE%20Network\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 \u043f\u043e Network\"><\/a><\/p>\n<p>\u0412\u043d\u043e\u0432\u044c \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u043c \u0437\u043d\u0430\u043d\u0438\u044f.<\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442<a href=\"https:\/\/kts.tech\/projects?directionTag=special\" rel=\"noopener noreferrer nofollow\"> <\/a><a href=\"http:\/\/kts.tech\" rel=\"noopener noreferrer nofollow\">kts.tech<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 DevTools \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <strong>Network<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u0434\u0430\u043b \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <strong>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u00ab\u0421\u043c\u0435\u0448\u0410\u043f\u043f\u00bb \u043a 20-\u043b\u0435\u0442\u0438\u044e \u0421\u043c\u0435\u0448\u0430\u0440\u0438\u043a\u043e\u0432<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<h2>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 iframe, WebView \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Eruda<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%B0%D0%BA%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%8E%D1%82%20iframe,%20WebView%20%D0%B8%20%D0%B7%D0%B0%D1%87%D0%B5%D0%BC%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20Eruda\" id=\"\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 iframe, WebView \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Eruda\"><\/a><\/p>\n<h3>iframe<\/h3>\n<p><a class=\"anchor\" name=\"iframe\" id=\"iframe\"><\/a><\/p>\n<p><strong>iframe<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0430\u0439\u0442. \u042d\u0442\u043e \u043e\u043a\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0448 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0430\u043c, \u0430 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 iframe \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0440\u043e\u043d\u0442\u0430. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c DevTools. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u0441\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (Elements);<\/p>\n<\/li>\n<li>\n<p>\u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438 (Console);<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 (Network).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e5c\/28e\/ef2\/e5c28eef2c29cd819fa407e568c9ddab.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0435\u0433\u043e\u043c&lt;iframe&gt; \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0435\u0433\u043e\u043c&lt;iframe&gt; \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\" width=\"2074\" height=\"1658\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e5c\/28e\/ef2\/e5c28eef2c29cd819fa407e568c9ddab.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e5c\/28e\/ef2\/e5c28eef2c29cd819fa407e568c9ddab.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0435\u0433\u043e\u043c<code>&lt;iframe&gt;<\/code> \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/figcaption><\/div>\n<\/figure>\n<h3>WebView<\/h3>\n<p><a class=\"anchor\" name=\"WebView\" id=\"WebView\"><\/a><\/p>\n<p><strong>WebView<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0445\u043e\u0442\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 iframe, \u044d\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0440\u043e\u043d\u0442\u0430 \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 WebView, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438 \u0432 Console;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0443\u0445\u043e\u0434\u044f\u0442 \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 Network.<\/p>\n<\/li>\n<\/ol>\n<h3>Eruda<\/h3>\n<p><a class=\"anchor\" name=\"Eruda\" id=\"Eruda\"><\/a><\/p>\n<p><a href=\"https:\/\/github.com\/liriliri\/eruda\" rel=\"noopener noreferrer nofollow\"><strong>Eruda<\/strong><\/a> \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u043e \u0432 iframe \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 WebView.<\/p>\n<p>\u041f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Eruda \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438 \u043f\u043e \u0441\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c. \u0421 \u0435\u0435 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd5\/eac\/6f3\/bd5eac6f3adbaf77712db22e5272f225.png\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 Eruda \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\" title=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 Eruda \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\" width=\"340\" height=\"732\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/bd5\/eac\/6f3\/bd5eac6f3adbaf77712db22e5272f225.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd5\/eac\/6f3\/bd5eac6f3adbaf77712db22e5272f225.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 Eruda \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p><a class=\"anchor\" name=\"%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<p>DevTools \u2014 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043d\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0447\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435.<\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0431\u0430\u0433\u0438 \u0438 \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u0438\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u00ab\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u00bb. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u043d\u0435 \u0434\u043e\u0433\u0430\u0434\u043e\u043a.<\/p>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0438 Elements, Console \u0438 Networ<strong>k<\/strong> \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0433\u0434\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438 \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0412\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c DevTools \u0432 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u043a\u043b\u0438\u043a\u043e\u0432 \u0438 \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442 \u043d\u0430\u0439\u0442\u0438 \u0442\u043e, \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u0437\u0430\u043d\u044f\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0434\u043d\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u043a\u0438.<\/p>\n<p>\u0427\u0435\u043c \u0447\u0430\u0449\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 DevTools, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u0435\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0441\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u0438 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0434\u043b\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0432 \u043d\u0430\u0448\u0435\u043c \u0431\u043b\u043e\u0433\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/885062\/\" rel=\"noopener noreferrer nofollow\">\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u043e QA<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/854750\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0434\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u043f\u0440\u0438 \u0434\u0435\u043f\u043b\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/752316\/\" rel=\"noopener noreferrer nofollow\">\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0439\u0442\u0438 \u0441 \u0443\u043c\u0430: \u043a\u0430\u043a \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043d\u0438 \u043f\u0440\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043d\u0438 \u043f\u0440\u043e \u043b\u044e\u0434\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/724516\/\" rel=\"noopener noreferrer nofollow\">6 \u043e\u0448\u0438\u0431\u043e\u043a, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u044b-\u0434\u0436\u0443\u043d\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0436\u0443\u043d\u0430\u043c\u0438<\/a><\/p>\n<\/li>\n<\/ul>\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\/939854\/\"> https:\/\/habr.com\/ru\/articles\/939854\/<\/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<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0430\u043d\u044f \u0422\u0440\u0438\u0448\u043a\u0438\u043d, \u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u0432 <a href=\"https:\/\/kts.tech\/\" rel=\"noopener noreferrer nofollow\">KTS<\/a>.<\/p>\n<p>\u0412 \u0441\u0432\u043e\u0435\u0439 <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/885062\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u043f\u043e\u043b\u044c\u0437\u0443 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432. \u0422\u043e\u0433\u0434\u0430 \u044f <a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/885062\/#DevTools\" rel=\"noopener noreferrer nofollow\">\u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u0442\u0435\u043c\u0443 DevTools<\/a> \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0442\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e. \u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0448\u0443 \u043f\u0430\u043d\u0435\u043b\u044c DevTools, \u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443. \u0417\u0430\u043e\u0434\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u044f \u0434\u0430\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0443\u043b\u0437\u0430\u043c\u0438 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%20%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D1%82%D1%8C%20DevTools\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5%20%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8,%20%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%BD%D1%83%D0%B6%D0%BD%D1%8B%20%D0%BC%D0%B5%D0%BD%D0%B5%D0%B4%D0%B6%D0%B5%D1%80%D1%83\" rel=\"noopener noreferrer nofollow\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Elements\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D1%82%D0%B0%D0%BA%D0%BE%D0%B5%20HTML%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#CSS:%20%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9%20%D0%B2%D0%B8%D0%B4%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#DOM:%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B\" rel=\"noopener noreferrer nofollow\">DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Elements\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Console\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Console\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Network\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%BE%20Network\" rel=\"noopener noreferrer nofollow\">\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 \u043f\u043e Network<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%8E%D1%82%20iframe,%20WebView%20%D0%B8%20%D0%B7%D0%B0%D1%87%D0%B5%D0%BC%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20Eruda\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 iframe, WebView \u0438 \u0437\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Eruda<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#iframe\" rel=\"noopener noreferrer nofollow\">iframe<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#WebView\" rel=\"noopener noreferrer nofollow\">WebView<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Eruda\" rel=\"noopener noreferrer nofollow\">Eruda<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p><a class=\"anchor\" name=\"%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435\">\u043d\u0438\u0435&#187;><\/a><\/p>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0447\u0438\u0442\u0430\u043b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0441\u0447\u0438\u0442\u0430\u0435\u0442 DevTools \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442. \u042d\u0442\u043e \u0443\u043f\u0443\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>DevTools \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u044b \u0431\u0435\u0437 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445: \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0431\u0430\u0433\u0438, \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b \u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u044f\u0441\u044c \u0432 \u043a\u043e\u0434. \u0413\u043e\u0432\u043e\u0440\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0435\u0435, \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0446\u0435\u043b\u0435\u0439:<\/p>\n<ol>\n<li>\n<p><strong>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u0430\u0433\u043e\u0432.<\/strong> \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u043f\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0431\u0430\u0433: \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0438 \u0442\u043e\u0447\u043d\u044b\u0439 \u0431\u0430\u0433\u0440\u0435\u043f\u043e\u0440\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. <\/strong>\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0444\u0438\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043b\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0435, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u043a \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. <\/strong>DevTools \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u043d\u0435\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u0438 \u043a\u0430\u043a \u043e\u043d\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0423\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. <\/strong>\u0412\u043b\u0430\u0434\u0435\u044f DevTools, \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0432 \u0434\u0443\u0445\u0435 \u00ab\u0410 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f?\u00bb, \u00ab\u0410 \u043a\u0430\u043a\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430?\u00bb \u0438 \u00ab\u0410 \u0447\u0442\u043e \u0437\u0430 \u043e\u0448\u0438\u0431\u043a\u0430?\u00bb, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong><\/p>\n<p>DevTools <strong>\u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c<\/strong> \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0431\u0430\u0437\u044b. \u042d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0433\u0438\u043f\u043e\u0442\u0435\u0437 \u0438 \u0441\u0431\u043e\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0435\u0435.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n<ul>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Elements<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430;<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Console<\/strong> \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 Network<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%B0%D0%BA%20%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D1%82%D1%8C%20DevTools\" id=\"\u041a\u0430\u043a \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools\">DevTools&#187;><\/a><\/p>\n<p>DevTools \u0435\u0441\u0442\u044c \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (\u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u0438\u0445 \u043d\u0435\u0442). \u041e\u043d\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448:<\/p>\n<ul>\n<li>\n<p><strong>F12<\/strong> \u0438\u043b\u0438 <strong>Ctrl + Shift + I<\/strong> (Windows);<\/p>\n<\/li>\n<li>\n<p><strong>Cmd + Option + I<\/strong> (Mac).<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f DevTools \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0431\u043e\u043a\u0443 \u0438\u043b\u0438 \u0441\u043d\u0438\u0437\u0443 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 DevTools \u0432 Chrome<\/figcaption><\/div>\n<\/figure>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5%20%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8,%20%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%BD%D1%83%D0%B6%D0%BD%D1%8B%20%D0%BC%D0%B5%D0%BD%D0%B5%D0%B4%D0%B6%D0%B5%D1%80%D1%83\" id=\"\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443\">\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443&#187;><\/a><\/p>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements<\/h3>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Elements\" id=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements\">ments&#187;><\/a><\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0430 Elements \u0432 DevTools \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0431\u0430\u0433\u0438 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Elements \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0431\u043b\u043e\u043a\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 HTML \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430<\/figcaption><\/div>\n<\/figure>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438<\/h4>\n<p><a class=\"anchor\" name=\"#%D0%A7%D1%82%D0%BE%20%D1%82%D0%B0%D0%BA%D0%BE%D0%B5%20HTML%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%B8\" id=\"#\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HTML \u0438 \u0442\u0435\u0433\u0438\">\u0438 \u0442\u0435\u0433\u0438&#187;><\/a><\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0438 \u043d\u0430 \u044d\u0442\u0438\u0445 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u0445. <strong>HTML <\/strong>(HyperText Markup Language) \u2014 \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u043a\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 <strong>\u0442\u0435\u0433\u043e\u0432<\/strong>, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p><code>&lt;h1&gt; <\/code>\u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p><code>&lt;p&gt;<\/code> \u2014 \u0430\u0431\u0437\u0430\u0446;<\/p>\n<\/li>\n<li>\n<p><code>&lt;a&gt;<\/code> \u2014 \u0441\u0441\u044b\u043b\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>&lt;button&gt;<\/code> \u2014 \u043a\u043d\u043e\u043f\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>&lt;img&gt;<\/code> \u2014 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p><code>&lt;div&gt;<\/code> \u2014 \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 (\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0430\u0431\u0437\u0430\u0446\u0435\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0442.\u0434.);<\/p>\n<\/li>\n<li>\n<p><code>&lt;span&gt;<\/code> \u2014 \u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 (\u0441\u043b\u043e\u0432, \u0444\u0440\u0430\u0437 \u0438 \u0442\u0434);<\/p>\n<\/li>\n<li>\n<p><code>&lt;script&gt;<\/code> \u2014 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 JavaScript-\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0448\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043e \u0442\u0435\u0433\u0430\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u0414\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0442 HTML Academy (\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u0440\u0435\u043a\u043b\u0430\u043c\u0430), \u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/companies\/macloud\/articles\/555400\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0425\u0430\u0431\u0440\u0435<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u0438\u0435 \u0442\u0435\u0433\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0441\u0443\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0439\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0422\u0435\u0433\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c <strong>\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/strong> \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0441\u0441\u044b\u043b\u043a\u0443 \u0438\u043b\u0438 \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e. \u0412\u043e\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n<ul>\n<li>\n<p><code>class<\/code> \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p><code>id<\/code> \u2014 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440;<\/p>\n<\/li>\n<li>\n<p><code>href<\/code> \u2014 \u0441\u0441\u044b\u043b\u043a\u0430 (\u0434\u043b\u044f <code>&lt;a&gt;<\/code>);<\/p>\n<\/li>\n<li>\n<p><code>src<\/code> \u2014 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a (\u0434\u043b\u044f <code>&lt;img&gt;<\/code>, <code>&lt;script&gt;<\/code>).<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 HTML-\u0444\u0430\u0439\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0438\u0434\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;button class=\"cta\" id=\"beautify\"&gt;\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e&lt;\/button&gt;<\/code><\/pre>\n<p>\u0427\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442:<\/p>\n<ul>\n<li>\n<p><code>&lt;button&gt;<\/code> \u2014 <strong>\u0442\u0438\u043f \u0442\u0435\u0433\u0430<\/strong>, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430;<\/p>\n<\/li>\n<li>\n<p><code>class=\"cta\"<\/code> \u2014 <strong>\u043a\u043b\u0430\u0441\u0441<\/strong>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439 (CSS) \u0438 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430);<\/p>\n<\/li>\n<li>\n<p><code>id=\"beautify\"<\/code> \u2014 <strong>\u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/strong> \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438\u043b\u0438 \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p><code>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e<\/code> \u2014 <strong>\u0442\u0435\u043a\u0441\u0442<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0438\u0434\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p><code>&lt;\/button&gt;<\/code> \u2014 <strong>\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433<\/strong>, \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u043d\u0430\u044f, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b HTML \u0438 \u0442\u0435\u0433\u0438, \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Elements. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043b\u0438 \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f.<\/p>\n<h4>CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p><a class=\"anchor\" name=\"CSS:%20%D0%B2%D0%BD%D0%B5%D1%88%D0%BD%D0%B8%D0%B9%20%D0%B2%D0%B8%D0%B4%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2\" id=\"CSS: \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\">\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432&#187;<\/a><\/p>\n<p><strong>CSS <\/strong>\u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435: \u0446\u0432\u0435\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0448\u0440\u0438\u0444\u0442\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432. \u042d\u0442\u0430 \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a Cascading Style Sheets \u2014 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 DevTools, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Elements \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Styles \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044b \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0432\u043b\u0438\u044f\u044e\u0449\u0438\u0435 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434: \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0440\u0430\u043c\u043a\u0438. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043a\u0430\u043a \u0435\u0433\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0441\u043e\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0441 \u043c\u0430\u043a\u0435\u0442\u043e\u043c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<pre><code class=\"javascript\">#beautify {   color: white;                  \/\/ \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u2014 \u0431\u0435\u043b\u044b\u0439   background-color: hotpink;     \/\/ \u0444\u043e\u043d \u2014 \u044f\u0440\u043a\u043e-\u0440\u043e\u0437\u043e\u0432\u044b\u0439   font-size: 18px;               \/\/ \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u2014 18 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439   border: none;                  \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e   border-radius: 6px;            \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0435 \u0443\u0433\u043b\u044b   padding: 10px 16px;            \/\/ \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438   cursor: pointer;               \/\/ \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u2014 \u043a\u0443\u0440\u0441\u043e\u0440 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0443\u043a\u0438 } <\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442, \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Styles, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0443 \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u043b\u044f \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439.<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439: \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Elements \u0438 \u043f\u0430\u043d\u0435\u043b\u044c Styles, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0434\u043b\u044f \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434.<\/p>\n<h4>DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h4>\n<p><a class=\"anchor\" name=\"DOM:%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B\" id=\"DOM: \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\">\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b&#187;<\/a><\/p>\n<p><strong>DOM <\/strong>(Document Object Model) \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437 HTML. \u0415\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0434\u0435\u0440\u0435\u0432\u043e, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u043d\u043e\u043f\u043a\u0430, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0431\u043b\u043e\u043a) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 DevTools \u0438 \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u0435\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0432\u0438\u0434\u0435\u043d \u0438\u043b\u0438 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u043e\u0438\u0441\u043a \u043f\u043e Ctrl+F \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 Elements, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043b\u0438 id.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements<\/h4>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Elements\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Elements\">\u043e Elements&#187;<\/a><\/p>\n<p>\u0417\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u0435 \u043d\u0430\u0432\u044b\u043a \u0441\u0440\u0430\u0437\u0443, \u0447\u0442\u043e\u0431\u044b DevTools \u0441\u0442\u0430\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u044c\u044e.<\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442<a href=\"https:\/\/kts.tech\/projects?directionTag=special\" rel=\"noopener noreferrer nofollow\"> <\/a><a href=\"http:\/\/kts.tech\" rel=\"noopener noreferrer nofollow\">kts.tech<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u00abAI-\u041f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u043d\u0430 \u041f\u041c\u042d\u0424\u00bb \u0447\u0435\u0440\u0435\u0437 Ctrl + F.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 <code>#111317<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0446\u0432\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043d\u0430 <code>#fcb3b3<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><\/figure>\n<h3>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<\/h3>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%20Console\" id=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console\">nsole&#187;><\/a><\/p>\n<p>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 <strong>Console<\/strong> \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u044b. \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0427\u0430\u0441\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430 \u0447\u044c\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043e\u0448\u0438\u0431\u043a\u0430 \u2014 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f. Console \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0437\u0430 \u043f\u0430\u0440\u0443 \u043c\u0438\u043d\u0443\u0442: \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u043e\u0448\u0438\u0431\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u043e\u043c\u0435\u043d. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u043d \u0432\u0430\u0448 \u0434\u043e\u043c\u0435\u043d \u0438\u043b\u0438 \u043f\u0443\u0442\u044c, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435. \u0415\u0441\u043b\u0438 \u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0434\u043e\u043c\u0435\u043d\u043e\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"http:\/\/vk.com\" rel=\"noopener noreferrer nofollow\">vk.com<\/a>, <a href=\"http:\/\/sentry.io\" rel=\"noopener noreferrer nofollow\">sentry.io<\/a> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 API), \u0431\u0430\u0433 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430 \u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u0435.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0435\u043d<\/figcaption><\/div>\n<\/figure>\n<p>Console \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438 \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043b\u043e\u0433\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0443<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 <code>localStorage<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u0442\u0435\u043c\u0430) \u0438\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u0435\u0440\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Console \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0432\u0432\u043e\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b localStorage \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432 \u043e\u0442\u0432\u0435\u0442\u0435<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:<\/strong> \u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b \u043f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0415\u0441\u043b\u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043b\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438. \u041d\u043e\u0432\u0438\u0447\u043a\u0430\u043c \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Console \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u043e\u0432 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>console.log<\/code> \u0438\u043b\u0438 <code>localStorage<\/code>), \u0430 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console<\/h4>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BF%D0%BE%20Console\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u043f\u043e Console\">\u043e Console&#187;><\/a><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Console, \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 1<\/strong><\/p>\n<p><a class=\"anchor\" name=\"%D0%A3%D0%BF%D1%80%D0%B0%D0%B6%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5%201\" id=\"\u0423\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u0435 1\">\u043d\u0438\u0435 1&#8243;><\/a><\/p>\n<ol>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0430\u0439\u0442<a href=\"https:\/\/kts.tech\/projects?directionTag=special\" rel=\"noopener noreferrer nofollow\"> <\/a><a href=\"http:\/\/kts.tech\" rel=\"noopener noreferrer nofollow\">kts.tech<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Console.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u0435\u0441\u0442\u044c \u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-471655","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/471655","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=471655"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/471655\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=471655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=471655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=471655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}