{"id":481082,"date":"2026-05-26T11:16:53","date_gmt":"2026-05-26T11:16:53","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=481082"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=481082","title":{"rendered":"\u041a\u0430\u043a \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u00ab\u043a\u043b\u0438\u043a \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u2192 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 VS Code\u00bb \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440"},"content":{"rendered":"
\n
<\/figure>\n

\u041d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e. \u0417\u0430\u0448\u0451\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430, \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0413\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0445\u043b\u0435\u0431\u043d\u044b\u0435 \u043a\u0440\u043e\u0448\u043a\u0438 \u0432 \u0448\u0430\u043f\u043a\u0435 \u043b\u0435\u0436\u0430\u0442?\u00bb. \u041f\u0440\u043e\u0435\u043a\u0442 \u2014 \u043e\u043a\u043e\u043b\u043e 150 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u0441\u0451 \u0438\u043c\u0435\u043d\u0443\u0435\u0442\u0441\u044f \u043f\u043e-\u0441\u0432\u043e\u0435\u043c\u0443, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u0430\u044f. \u042f \u043d\u0430\u0447\u0430\u043b \u0442\u044b\u043a\u0430\u0442\u044c \u0432 React DevTools, \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u00abBreadcrumb\u00bb \u0432 \u0444\u0430\u0439\u043b\u0430\u0445\u2026 \u0412 \u043e\u0431\u0449\u0435\u043c, \u043c\u0438\u043d\u0443\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u044f\u0442\u044c \u043d\u0430\u0448\u0451\u043b. \u042d\u0442\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u043b\u043e.<\/p>\n

\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f vite-plugin-debug-meta<\/code> \u2014 \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0436\u0430\u0442\u044c Ctrl + Shift<\/code>, \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u2014 \u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n

npm install -D vite-plugin-debug-meta<\/code>
<\/a><\/div><\/pre>\n\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0447\u0430\u0441 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n
\u0415\u0441\u043b\u0438 \u0447\u0435\u0441\u0442\u043d\u043e, \u044f \u0431\u044b\u043b \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0443\u0436\u0435 \u0441\u0442\u043e \u0440\u0430\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438. \u041f\u043e\u0440\u044b\u043b\u0441\u044f \u0432 npm \u2014 \u0435\u0441\u0442\u044c react-dev-inspector<\/code>, \u0435\u0441\u0442\u044c vite-plugin-react-inspector<\/code>\u2026 \u0421\u043c\u043e\u0442\u0440\u0438\u0448\u044c \u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0442\u0430\u043c \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439, \u0438\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 babel-preset, \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 React. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u043e \u0431\u0435\u0437 \u043f\u043b\u044f\u0441\u043e\u043a.<\/p>\n
\u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0451. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440. \u0412\u043e\u0442 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e.<\/p>\n\n
\u0421\u0435\u043a\u0440\u0435\u0442, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u0430\u043c \u043d\u0435 \u0437\u043d\u0430\u043b \u0433\u043e\u0434<\/h3>\n
\u041f\u0435\u0440\u0432\u043e\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u2014 \u0443 Vite \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0435\u0441\u0442\u044c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \/__open-in-editor<\/code>. \u0427\u0435\u0441\u0442\u043d\u043e, \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Vite \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u043b \u043e \u0435\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Vue DevTools \u0438 \u043a\u043e\u0435-\u0447\u0442\u043e \u0435\u0449\u0451 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u043d\u043e \u043d\u0438\u0433\u0434\u0435 \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0430\u0444\u0438\u0448\u0438\u0440\u0443\u044e\u0442.<\/p>\n
\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n
\/__open-in-editor?file=src\/components\/Header.tsx:42:1<\/code>
<\/a><\/div><\/pre>\n
Vite \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 npm run dev<\/code> \u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u043a\u0435\u0442 launch-editor<\/code> (\u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u042d\u0432\u0430\u043d \u042e) \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u041e\u043d \u0441\u0430\u043c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0433\u0430\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u0443\u044e IDE, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u2014 \u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e LAUNCH_EDITOR<\/code>.<\/p>\n
\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0432\u0430\u0448\u0435\u0433\u043e Vite-\u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n
fetch('\/__open-in-editor?file=src\/App.tsx:1:1')<\/code>
<\/a><\/div><\/pre>\n
\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, VS Code (\u0438\u043b\u0438 \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0442\u0430\u043c) \u0443\u0436\u0435 \u043e\u0442\u043a\u0440\u044b\u043b\u0441\u044f. \u042d\u0442\u043e \u043c\u0430\u0433\u0438\u044f, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0439 \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u043e\u0432, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n\n
\u0427\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0438 \u043a\u0430\u043a<\/h3>\n
\u0418\u0434\u0435\u044f \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445:<\/p>\n
    \n
  1. \n
    \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 Babel \u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 .tsx<\/code>\/.jsx<\/code> \u0444\u0430\u0439\u043b\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 JSX-\u0442\u0435\u0433\u0443 \u0434\u0432\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430: data-debug-file<\/code> (\u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 + \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438) \u0438 data-debug-component<\/code> (\u0438\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430). \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 dev-\u0440\u0435\u0436\u0438\u043c\u0435, \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442.<\/p>\n<\/li>\n
  2. \n
    \u0412 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0435\u0442 Ctrl + Shift<\/code>. \u041f\u043e\u043a\u0430 \u0437\u0430\u0436\u0430\u0442\u044b \u2014 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0436\u0438\u043c \u0438\u043d\u0441\u043f\u0435\u043a\u0446\u0438\u0438: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u0440\u0430\u043c\u043a\u043e\u0439, \u043d\u0430\u0434 \u043d\u0438\u043c\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0439\u0434\u0436\u0438\u043a \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438. \u041a\u043b\u0438\u043a\u0430\u0435\u0442\u0435 \u2014 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<\/p>\n<\/li>\n<\/ol>\n
    <\/figure>\n\n
    \u0427\u0430\u0441\u0442\u044c 1. \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f JSX<\/h3>\n
    \u042d\u0442\u043e Vite-\u043f\u043b\u0430\u0433\u0438\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0445\u0443\u043a transform<\/code>. \u0414\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430 JSX \u0431\u0435\u0440\u0451\u043c \u0442\u0440\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0438\u0437 Babel-\u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b: @babel\/parser<\/code>, @babel\/traverse<\/code>, @babel\/generator<\/code>.<\/p>\n
    transform(code: string, id: string) {  \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b, \u0431\u0435\u0437 node_modules  if (!\/\\.(tsx|jsx)$\/.test(id) || id.includes(\"node_modules\")) return null;  const relativePath = path.relative(process.cwd(), id).replace(\/\\\\\/g, \"\/\");  const componentName = path.basename(id).replace(\/\\.(tsx|jsx)$\/, \"\");  const ast = parser.parse(code, {    sourceType: \"module\",    plugins: [\"typescript\", \"jsx\", \"decorators-legacy\"],  });  traverse(ast, {    JSXOpeningElement(nodePath: any) {      const nameNode = nodePath.node.name;      \/\/ \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u2014 \u0443 \u043d\u0438\u0445 \u043d\u0435\u0442 DOM-\u0443\u0437\u043b\u0430, \u0442\u0443\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043d\u0435 \u0441\u0443\u0451\u0448\u044c      const isFragment =        (nameNode.type === \"JSXIdentifier\" && nameNode.name === \"Fragment\") ||        (nameNode.type === \"JSXMemberExpression\" &&          nameNode.object.name === \"React\" &&          nameNode.property.name === \"Fragment\");      if (isFragment) return;      const line = nodePath.node.loc?.start.line ?? 1;      const debugFile = `${relativePath}#${line}`;      \/\/ \u041d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0443\u0431\u043b\u0438, \u0435\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c      const hasAttr = nodePath.node.attributes.some(        (attr: any) => attr.type === \"JSXAttribute\" && attr.name.name === \"data-debug-file\"      );      if (hasAttr) return;      const makeAttr = (name: string, value: string) => ({        type: \"JSXAttribute\" as const,        name: { type: \"JSXIdentifier\" as const, name },        value: {          type: \"JSXExpressionContainer\" as const,          expression: { type: \"StringLiteral\" as const, value }        }      });      const attrs = [makeAttr(\"data-debug-file\", debugFile), makeAttr(\"data-debug-component\", componentName)];      \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c spread-\u043f\u0440\u043e\u043f\u0441\u044b (...props), \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0414\u041e \u043d\u0438\u0445,      \/\/ \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c\u0438 data-*       const spreadIndex = nodePath.node.attributes.findIndex(        (attr: any) => attr.type === \"JSXSpreadAttribute\"      );      if (spreadIndex !== -1) {        nodePath.node.attributes.splice(spreadIndex, 0, ...attrs);      } else {        nodePath.node.attributes.push(...attrs);      }    }  });  const result = generate(ast, { sourceMaps: true, sourceFileName: id }, code);  return { code: result.code, map: result.map };}<\/code>
    <\/a><\/div><\/pre>\n
    \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044c \u0441\u043e spread-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438: \u0435\u0441\u043b\u0438 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c {...props}<\/code>, \u0430 \u0433\u0434\u0435-\u0442\u043e \u0432\u044b\u0448\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u0432 props<\/code> \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 data-debug-file<\/code>, \u0442\u043e \u043d\u0430\u0448 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043d. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e spread-\u0430 \u2014 \u0442\u043e\u0433\u0434\u0430 \u044f\u0432\u043d\u044b\u0439 {...props}<\/code> \u0432\u044b\u0438\u0433\u0440\u0430\u0435\u0442, \u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n\n
    \u0427\u0430\u0441\u0442\u044c 2. \u0418\u043d\u044a\u0435\u043a\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439<\/h3>\n
    \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a transformIndexHtml<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433\u0438 \u0432 <head><\/code> \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
    apply: \"serve\", \/\/ \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u0441\u0431\u043e\u0440\u043a\u0443 \u0432\u043e\u043e\u0431\u0449\u0435transformIndexHtml() {  return [    {      tag: \"script\",      attrs: { type: \"text\/javascript\" },      children: inspectorScript,      injectTo: \"head\",    },    {      tag: \"style\",      children: `        \/* \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043d\u0441\u043f\u0435\u043a\u0446\u0438\u0438 disabled-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043a\u043b\u0438\u043a\u0438 *\/        .debug-inspect-mode [disabled],        .debug-inspect-mode :disabled,        .debug-inspect-mode .disabled {          pointer-events: none !important;        }        \/* \u041f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0430\u043c\u044b\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c *\/        .debug-inspect-mode [data-debug-file]:hover:not(:has([data-debug-file]:hover)) {          outline: 2px solid #10B981 !important;          outline-offset: -2px !important;          cursor: crosshair !important;        }      `.trim(),      injectTo: \"head\",    }  ];}<\/code>
    <\/a><\/div><\/pre>\n
    \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 :not(:has([data-debug-file]:hover))<\/code> \u2014 \u044d\u0442\u043e \u00ab\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0442\u0435\u043c \u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c\u00bb. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0447\u0438\u0442\u0435\u0440\u0441\u043a\u0438, \u0437\u0430\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0438\u0441\u0442\u043e \u0438 \u0431\u0435\u0437 JS. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0443 :has()<\/code> \u0443\u0436\u0435 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u0430\u044f \u0434\u043b\u044f dev-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n
    \u0427\u0430\u0441\u0442\u044c 3. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u00ab\u044f \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0430 \u0445\u043e\u0447\u0443 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\u00bb<\/h3>\n
    \u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u0431\u044b\u043b\u043e \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.<\/p>\n
    \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u043d\u0430 DashboardPage.tsx<\/code> \u0441\u0442\u043e\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 <SaveButton \/><\/code>. \u0412\u044b \u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0435 \u043f\u043e \u043d\u0435\u0439 \u0441 Ctrl + Shift<\/code>. DOM-\u0430\u0442\u0440\u0438\u0431\u0443\u0442 data-debug-file<\/code> \u0443\u043a\u0430\u0436\u0435\u0442 \u043d\u0430 SaveButton.tsx<\/code> \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <button><\/code> \u0432 JSX. \u041d\u043e \u0432\u044b-\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 DashboardPage.tsx<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443!<\/p>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0447\u0438\u0442\u0430\u0442\u044c React Fiber<\/strong>. React \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 DOM-\u0443\u0437\u043b\u0430\u0445, \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0432\u0438\u0434\u0430 __reactFiber$xxxx<\/code>. \u041f\u0440\u043e\u0439\u0434\u044f \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 Fiber \u0432\u0432\u0435\u0440\u0445 (curr.return<\/code>), \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u0442\u0435\u043a: SaveButton \u2192 DashboardPage \u2192 App \u2192 ...<\/code><\/p>\n
    \/\/ \u0418\u0449\u0435\u043c Fiber, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044f\u0441\u044c \u0432\u044b\u0448\u0435 \u043f\u043e DOMvar fiber = null;var currentEl = e.target;while (currentEl && !fiber) {  var keys = Object.keys(currentEl);  for (var i = 0; i < keys.length; i++) {    if (keys[i].startsWith(\"__reactFiber$\") || keys[i].startsWith(\"__reactInternalInstance$\")) {      fiber = currentEl[keys[i]];      break;    }  }  if (!fiber) currentEl = currentEl.parentElement;}\/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432var trace = [];var curr = fiber;while (curr) {  if (curr._debugSource) {    var src = curr._debugSource;    var fileName = src.fileName.replace(\/\\\\\/g, \"\/\");    if (!fileName.includes(\"node_modules\")) {      var srcIndex = fileName.indexOf(\"\/src\/\");      var relativePath = srcIndex !== -1 ? fileName.slice(srcIndex + 1) : fileName;      var compName = curr.type?.displayName || curr.type?.name || \"Unknown\";      trace.push({ relativePath, line: src.lineNumber, component: compName });    }  }  curr = curr.return;}<\/code>
    <\/a><\/div><\/pre>\n
    \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u043a\u0430: \u0431\u0435\u0440\u0451\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0435\u043a\u0430 (\u0441\u0430\u043c\u044b\u0439 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439) \u0438 \u0438\u0434\u0451\u043c \u0432\u0432\u0435\u0440\u0445. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u0432\u043e\u0442 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0422\u0443\u0434\u0430 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.<\/p>\n
    \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u2014 \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u0432\u0441\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443:<\/p>\n
    \ud83d\udd0d Debug Inspect:\ud83d\udc49 <SaveButton> at src\/components\/SaveButton.tsx:12   <DashboardPage> at src\/pages\/DashboardPage.tsx:47   <Router> at src\/App.tsx:23<\/code>
    <\/a><\/div><\/pre>\n\n
    \u0427\u0430\u0441\u0442\u044c 4. \u0411\u0435\u0439\u0434\u0436 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438<\/h3>\n
    \u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u0436\u0430\u0442\u044b Ctrl + Shift<\/code> \u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u0435\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u0442\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u0448\u044c. \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u0431\u0435\u0439\u0434\u0436\u0438\u043a:<\/p>\n
    function updateBadge(el) {  if (!el) { badge.style.display = \"none\"; return; }  var rect = el.getBoundingClientRect();  var compName = el.getAttribute(\"data-debug-component\") || \"\";  var size = Math.round(rect.width) + \" \u00d7 \" + Math.round(rect.height);  badge.textContent = compName ? compName + \" | \" + size : size;  var top = rect.top - 24;  badge.style.top = (top < 0 ? rect.top + 4 : top) + \"px\";  badge.style.left = Math.max(rect.left, 4) + \"px\";  badge.style.display = \"block\";}<\/code>
    <\/a><\/div><\/pre>\n
    \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a: HeaderNav | 1280 \u00d7 64<\/code>. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d \u0437\u0435\u043b\u0451\u043d\u044b\u043c outline. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u043e\u0432 \u0431\u0435\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f DevTools.<\/p>\n
    <\/figure>\n\n
    \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h3>\n
    npm install -D vite-plugin-debug-meta<\/code>
    <\/a><\/div><\/pre>\n
    \/\/ vite.config.tsimport { defineConfig } from \"vite\";import react from \"@vitejs\/plugin-react\";import { debugMetaPlugin } from \"vite-plugin-debug-meta\";export default defineConfig({  plugins: [    react(),    debugMetaPlugin({      editor: \"code\" \/\/ \"webstorm\", \"cursor\", \"rider\", \"zed\" \u0438 \u0442.\u0434.    })  ]});<\/code>
    <\/a><\/div><\/pre>\n
    \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 editor<\/code> \u043d\u0443\u0436\u0435\u043d, \u0435\u0441\u043b\u0438 Vite \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448\u0443 IDE \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e LAUNCH_EDITOR<\/code> \u2014 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 .env.local<\/code>, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433.<\/p>\n\n
    \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043d\u044f\u043b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435<\/h3>\n
    _debugSource<\/strong><\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 React \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 development.<\/strong> \u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c Vite + React \u044d\u0442\u043e \u0442\u0430\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u0434\u0435-\u0442\u043e \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 NODE_ENV=production<\/code>, Fiber \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435.<\/p>\n
    \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0434\u043e \u044f\u0432\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c.<\/strong> \u0415\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c data-debug-file<\/code> \u043a <React.Fragment><\/code> \u0438\u043b\u0438 <>...<\/><\/code>, React \u0431\u0440\u043e\u0441\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443: \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b. \u041f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0430 \u044d\u0442\u043e \u043c\u0438\u043d\u0443\u0442 \u0434\u0432\u0430\u0434\u0446\u0430\u0442\u044c.<\/p>\n
    \u0421\u043e spread-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u043d\u0430\u0434\u043e \u0431\u044b\u0442\u044c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u043c.<\/strong> \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 {...props}<\/code> \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u0442\u043e-\u0442\u043e \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 data-debug-file<\/code> \u2014 \u043d\u0430\u0448 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0440\u0435\u0434\u043a\u0438\u0439 \u043a\u0435\u0439\u0441, \u043d\u043e \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n\n
    \u0418\u0442\u043e\u0433\u043e<\/h3>\n
    \u041f\u043b\u0430\u0433\u0438\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 dev-\u0440\u0435\u0436\u0438\u043c\u0435 (apply: \"serve\"<\/code>), \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0442\u0440\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 Babel \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 AST, \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432 Vite.<\/p>\n
    \u041a\u043e\u0434 \u043e\u0442\u043a\u0440\u044b\u0442 \u043d\u0430 GitHub \u043f\u043e\u0434 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 MIT \u2014 sozercaniekosmosa\/vite-plugin-debug-meta<\/a>. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043f\u043e\u0445\u043e\u0436\u0430\u044f \u0431\u043e\u043b\u044c \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c React-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u2014 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n<\/div>\n
    \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1039568\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    \u041d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0451 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e. \u0417\u0430\u0448\u0451\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430, \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0413\u0434\u0435 \u0443 \u043d\u0430\u0441 \u0445\u043b\u0435\u0431\u043d\u044b\u0435 \u043a\u0440\u043e\u0448\u043a\u0438 \u0432 \u0448\u0430\u043f\u043a\u0435 \u043b\u0435\u0436\u0430\u0442?\u00bb. \u041f\u0440\u043e\u0435\u043a\u0442 \u2014 \u043e\u043a\u043e\u043b\u043e 150 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u0441\u0451 \u0438\u043c\u0435\u043d\u0443\u0435\u0442\u0441\u044f \u043f\u043e-\u0441\u0432\u043e\u0435\u043c\u0443, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u0430\u044f. \u042f \u043d\u0430\u0447\u0430\u043b \u0442\u044b\u043a\u0430\u0442\u044c \u0432 React DevTools, \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u00abBreadcrumb\u00bb \u0432 \u0444\u0430\u0439\u043b\u0430\u0445\u2026 \u0412 \u043e\u0431\u0449\u0435\u043c, \u043c\u0438\u043d\u0443\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u044f\u0442\u044c \u043d\u0430\u0448\u0451\u043b. \u042d\u0442\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0440\u0430\u0437 \u0440\u0430\u0437\u0434\u0440\u0430\u0436\u0430\u043b\u043e.\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f vite-plugin-debug-meta \u2014 \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0436\u0430\u0442\u044c Ctrl + Shift, \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u2014 \u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435.npm install -D vite-plugin-debug-meta\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0447\u0430\u0441 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0415\u0441\u043b\u0438 \u0447\u0435\u0441\u0442\u043d\u043e, \u044f \u0431\u044b\u043b \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0443\u0436\u0435 \u0441\u0442\u043e \u0440\u0430\u0437 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438. \u041f\u043e\u0440\u044b\u043b\u0441\u044f \u0432 npm \u2014 \u0435\u0441\u0442\u044c react-dev-inspector, \u0435\u0441\u0442\u044c vite-plugin-react-inspector\u2026 \u0421\u043c\u043e\u0442\u0440\u0438\u0448\u044c \u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u0442\u0430\u043c \u0442\u044f\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0432\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439, \u0438\u043b\u0438 \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 babel-preset, \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 React. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u043e \u0431\u0435\u0437 \u043f\u043b\u044f\u0441\u043e\u043a.\u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0451. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440. \u0412\u043e\u0442 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e.\u0421\u0435\u043a\u0440\u0435\u0442, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u0430\u043c \u043d\u0435 \u0437\u043d\u0430\u043b \u0433\u043e\u0434\u041f\u0435\u0440\u0432\u043e\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u2014 \u0443 Vite \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0435\u0441\u0442\u044c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \/__open-in-editor. \u0427\u0435\u0441\u0442\u043d\u043e, \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Vite \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u043b \u043e \u0435\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0438. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Vue DevTools \u0438 \u043a\u043e\u0435-\u0447\u0442\u043e \u0435\u0449\u0451 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c, \u043d\u043e \u043d\u0438\u0433\u0434\u0435 \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0430\u0444\u0438\u0448\u0438\u0440\u0443\u044e\u0442.\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e:\/__open-in-editor?file=src\/components\/Header.tsx:42:1Vite \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 npm run dev \u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u043a\u0435\u0442 launch-editor (\u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u042d\u0432\u0430\u043d \u042e) \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043d\u0430 \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u041e\u043d \u0441\u0430\u043c \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0433\u0430\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u0443\u044e IDE, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u2014 \u0447\u0438\u0442\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e LAUNCH_EDITOR.\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0432\u0430\u0448\u0435\u0433\u043e Vite-\u043f\u0440\u043e\u0435\u043a\u0442\u0430:fetch(‘\/__open-in-editor?file=src\/App.tsx:1:1’)\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, VS Code (\u0438\u043b\u0438 \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0442\u0430\u043c) \u0443\u0436\u0435 \u043e\u0442\u043a\u0440\u044b\u043b\u0441\u044f. \u042d\u0442\u043e \u043c\u0430\u0433\u0438\u044f, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u043d\u0435\u0439 \u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442\u043e\u0432, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.\u0427\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0438 \u043a\u0430\u043a\u0418\u0434\u0435\u044f \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445:\u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 Babel \u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 .tsx\/.jsx \u0444\u0430\u0439\u043b\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 JSX-\u0442\u0435\u0433\u0443 \u0434\u0432\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430: data-debug-file (\u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 + \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438) \u0438 data-debug-component (\u0438\u043c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430). \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 dev-\u0440\u0435\u0436\u0438\u043c\u0435, \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442.\u0412 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0435\u0442 Ctrl + Shift. \u041f\u043e\u043a\u0430 \u0437\u0430\u0436\u0430\u0442\u044b \u2014 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0436\u0438\u043c \u0438\u043d\u0441\u043f\u0435\u043a\u0446\u0438\u0438: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u0435\u043b\u0451\u043d\u043e\u0439 \u0440\u0430\u043c\u043a\u043e\u0439, \u043d\u0430\u0434 \u043d\u0438\u043c\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0439\u0434\u0436\u0438\u043a \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438. \u041a\u043b\u0438\u043a\u0430\u0435\u0442\u0435 \u2014 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.\u0427\u0430\u0441\u0442\u044c 1. \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f JSX\u042d\u0442\u043e Vite-\u043f\u043b\u0430\u0433\u0438\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0445\u0443\u043a transform. \u0414\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430 JSX \u0431\u0435\u0440\u0451\u043c \u0442\u0440\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u0438\u0437 Babel-\u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b: @babel\/parser, @babel\/traverse, @babel\/generator.transform(code: string, id: string) {  \/\/ \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b, \u0431\u0435\u0437 node_modules  if (!\/\\.(tsx|jsx)$\/.test(id) || id.includes(«node_modules»)) return null;  const relativePath = path.relative(process.cwd(), id).replace(\/\\\\\/g, «\/»);  const componentName = path.basename(id).replace(\/\\.(tsx|jsx)$\/, «»);  const ast = parser.parse(code, {    sourceType: «module»,    plugins: [«typescript», «jsx», «decorators-legacy»],  });  traverse(ast, {    JSXOpeningElement(nodePath: any) {      const nameNode = nodePath.node.name;      \/\/ \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u2014 \u0443 \u043d\u0438\u0445 \u043d\u0435\u0442 DOM-\u0443\u0437\u043b\u0430, \u0442\u0443\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043d\u0435 \u0441\u0443\u0451\u0448\u044c      const isFragment =        (nameNode.type === «JSXIdentifier» && nameNode.name === «Fragment») ||        (nameNode.type === «JSXMemberExpression» &&          nameNode.object.name === «React» &&          nameNode.property.name === «Fragment»);      if (isFragment) return;      const line = nodePath.node.loc?.start.line ?? 1;      const debugFile = `${relativePath}#${line}`;      \/\/ \u041d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0443\u0431\u043b\u0438, \u0435\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c      const hasAttr = nodePath.node.attributes.some(        (attr: any) => attr.type === «JSXAttribute» && attr.name.name === «data-debug-file»      );      if (hasAttr) return;      const makeAttr = (name: string, value: string) => ({        type: «JSXAttribute» as const,        name: { type: «JSXIdentifier» as const, name },        value: {          type: «JSXExpressionContainer» as const,          expression: { type: «StringLiteral» as const, value }        }      });      const attrs = [makeAttr(«data-debug-file», debugFile), makeAttr(«data-debug-component», componentName)];      \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c spread-\u043f\u0440\u043e\u043f\u0441\u044b (…props), \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0414\u041e \u043d\u0438\u0445,      \/\/ \u0438\u043d\u0430\u0447\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c\u0438 data-*       const spreadIndex = nodePath.node.attributes.findIndex(        (attr: any) => attr.type === «JSXSpreadAttribute»      );      if (spreadIndex !== -1) {        nodePath.node.attributes.splice(spreadIndex, 0, …attrs);      } else {        nodePath.node.attributes.push(…attrs);      }    }  });  const result = generate(ast, { sourceMaps: true, sourceFileName: id }, code);  return { code: result.code, map: result.map };}\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044c \u0441\u043e spread-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438: \u0435\u0441\u043b\u0438 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c {…props}, \u0430 \u0433\u0434\u0435-\u0442\u043e \u0432\u044b\u0448\u0435 \u043f\u043e \u043a\u043e\u0434\u0443 \u0432 props \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 data-debug-file, \u0442\u043e \u043d\u0430\u0448 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u043d. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e spread-\u0430 \u2014 \u0442\u043e\u0433\u0434\u0430 \u044f\u0432\u043d\u044b\u0439 {…props} \u0432\u044b\u0438\u0433\u0440\u0430\u0435\u0442, \u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.\u0427\u0430\u0441\u0442\u044c 2. \u0418\u043d\u044a\u0435\u043a\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439\u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a transformIndexHtml, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433\u0438 \u0432 <head> \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:apply: «serve», \/\/ \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d-\u0441\u0431\u043e\u0440\u043a\u0443 \u0432\u043e\u043e\u0431\u0449\u0435transformIndexHtml() {  return [    {      tag: «script»,      attrs: { type: «text\/javascript» },      children: inspectorScript,      injectTo: «head»,    },    {      tag: «style»,      children: `        \/* \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043d\u0441\u043f\u0435\u043a\u0446\u0438\u0438 disabled-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043a\u043b\u0438\u043a\u0438 *\/        .debug-inspect-mode [disabled],        .debug-inspect-mode :disabled,        .debug-inspect-mode .disabled {          pointer-events: none !important;        }        \/* \u041f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0430\u043c\u044b\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c *\/        .debug-inspect-mode [data-debug-file]:hover:not(:has([data-debug-file]:hover)) {          outline: 2px solid #10B981 !important;          outline-offset: -2px !important;          cursor: crosshair !important;        }      `.trim(),      injectTo: «head»,    }  ];}\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 :not(:has([data-debug-file]:hover)) \u2014 \u044d\u0442\u043e \u00ab\u0432\u044b\u0431\u0435\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0442\u0435\u043c \u0436\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c \u043f\u043e\u0434 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c\u00bb. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0447\u0438\u0442\u0435\u0440\u0441\u043a\u0438, \u0437\u0430\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0438\u0441\u0442\u043e \u0438 \u0431\u0435\u0437 JS. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0443 :has() \u0443\u0436\u0435 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u0430\u044f \u0434\u043b\u044f dev-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.\u0427\u0430\u0441\u0442\u044c 3. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u00ab\u044f \u043a\u043b\u0438\u043a\u043d\u0443\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0430 \u0445\u043e\u0447\u0443 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\u00bb\u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u0431\u044b\u043b\u043e \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u0432\u0430\u0441 \u043d\u0430 DashboardPage.tsx \u0441\u0442\u043e\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 <SaveButton \/>. \u0412\u044b \u043a\u043b\u0438\u043a\u0430\u0435\u0442\u0435 \u043f\u043e \u043d\u0435\u0439 \u0441 Ctrl + Shift. DOM-\u0430\u0442\u0440\u0438\u0431\u0443\u0442 data-debug-file \u0443\u043a\u0430\u0436\u0435\u0442 \u043d\u0430 SaveButton.tsx \u2014 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <button> \u0432 JSX. \u041d\u043e \u0432\u044b-\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 DashboardPage.tsx, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443!\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0447\u0438\u0442\u0430\u0442\u044c React Fiber. React \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u044f\u043c\u043e \u0432 DOM-\u0443\u0437\u043b\u0430\u0445, \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0432\u0438\u0434\u0430 __reactFiber$xxxx. \u041f\u0440\u043e\u0439\u0434\u044f \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 Fiber \u0432\u0432\u0435\u0440\u0445 (curr.return), \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u0442\u0435\u043a: SaveButton \u2192 DashboardPage \u2192 App \u2192 …\/\/ \u0418\u0449\u0435\u043c Fiber, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044f\u0441\u044c \u0432\u044b\u0448\u0435 \u043f\u043e DOMvar fiber = null;var currentEl = e.target;while (currentEl && !fiber) {  var keys = Object.keys(currentEl);  for (var i = 0; i < keys.length; i++) {    if (keys[i].startsWith(«__reactFiber$») || keys[i].startsWith(«__reactInternalInstance$»)) {      fiber = currentEl[keys[i]];      break;    }  }  if (!fiber) currentEl = currentEl.parentElement;}\/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0435\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432var trace = [];var curr = fiber;while (curr) {  if (curr._debugSource) {    var src = curr._debugSource;    var fileName = src.fileName.replace(\/\\\\\/g, «\/»);    if (!fileName.includes(«node_modules»)) {      var srcIndex = fileName.indexOf(«\/src\/»);      var relativePath = srcIndex !== -1 ? fileName.slice(srcIndex + 1) : fileName;      var compName = curr.type?.displayName || curr.type?.name || «Unknown»;      trace.push({ relativePath, line: src.lineNumber, component: compName });    }  }  curr = curr.return;}\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u044d\u0432\u0440\u0438\u0441\u0442\u0438\u043a\u0430: \u0431\u0435\u0440\u0451\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0435\u043a\u0430 (\u0441\u0430\u043c\u044b\u0439 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439) \u0438 \u0438\u0434\u0451\u043c \u0432\u0432\u0435\u0440\u0445. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u0432\u043e\u0442 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0422\u0443\u0434\u0430 \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440.\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u0442\u0435\u043a \u2014 \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0445\u043e\u0447\u0435\u0448\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u0432\u0441\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443:\ud83d\udd0d Debug Inspect:\ud83d\udc49 <SaveButton> at src\/components\/SaveButton.tsx:12   <DashboardPage> at src\/pages\/DashboardPage.tsx:47   <Router> at src\/App.tsx:23\u0427\u0430\u0441\u0442\u044c 4. \u0411\u0435\u0439\u0434\u0436 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438\u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u0436\u0430\u0442\u044b Ctrl + Shift \u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u0435\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u0442\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u0448\u044c. \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0439 \u0431\u0435\u0439\u0434\u0436\u0438\u043a:function updateBadge(el) {  if (!el) { badge.style.display = «none»; return; }  var rect = el.getBoundingClientRect();  var compName = el.getAttribute(«data-debug-component») || «»;  var size = Math.round(rect.width) + » \u00d7 » + Math.round(rect.height);  badge.textContent = compName ? compName + » | » + size : size;  var top = rect.top — 24;  badge.style.top = (top < 0 ? rect.top + 4 : top) + «px»;  badge.style.left = Math.max(rect.left, 4) + «px»;  badge.style.display = «block»;}\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a: HeaderNav | 1280 \u00d7 64. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d \u0437\u0435\u043b\u0451\u043d\u044b\u043c outline. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u043e\u0432 \u0431\u0435\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f DevTools.\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435npm install -D vite-plugin-debug-meta\/\/ vite.config.tsimport { defineConfig } from «vite»;import react from «@vitejs\/plugin-react»;import { debugMetaPlugin } from «vite-plugin-debug-meta»;export default defineConfig({  plugins: [    react(),    debugMetaPlugin({      editor: «code» \/\/ «webstorm», «cursor», «rider», «zed» \u0438 \u0442.\u0434.    })  ]});\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 editor \u043d\u0443\u0436\u0435\u043d, \u0435\u0441\u043b\u0438 Vite \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432\u0430\u0448\u0443 IDE \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e LAUNCH_EDITOR \u2014 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 .env.local, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433.\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043d\u044f\u043b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435_debugSource \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 React \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 development. \u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c Vite + React \u044d\u0442\u043e \u0442\u0430\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u0434\u0435-\u0442\u043e \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 NODE_ENV=production, Fiber \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-481082","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481082","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=481082"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481082\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=481082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=481082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=481082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}