{"id":13495761,"url":"https://github.com/better-tcy/dom-to-code","last_synced_at":"2025-07-14T19:45:49.158Z","repository":{"id":61838976,"uuid":"554884211","full_name":"better-tcy/dom-to-code","owner":"better-tcy","description":"This is a tool that can locate lines of code through dom","archived":false,"fork":false,"pushed_at":"2023-01-03T02:20:45.000Z","size":2796,"stargazers_count":170,"open_issues_count":5,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T08:47:29.579Z","etag":null,"topics":["code","dom","inspector","react","vite","vite-plugin","vue","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/better-tcy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["better-tcy"]}},"created_at":"2022-10-20T15:05:27.000Z","updated_at":"2025-01-05T07:54:13.000Z","dependencies_parsed_at":"2023-02-01T05:00:48.325Z","dependency_job_id":null,"html_url":"https://github.com/better-tcy/dom-to-code","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/better-tcy/dom-to-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Fdom-to-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Fdom-to-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Fdom-to-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Fdom-to-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/better-tcy","download_url":"https://codeload.github.com/better-tcy/dom-to-code/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/better-tcy%2Fdom-to-code/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265336619,"owners_count":23749194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","dom","inspector","react","vite","vite-plugin","vue","webpack","webpack-plugin"],"created_at":"2024-07-31T19:01:37.962Z","updated_at":"2025-07-14T19:45:49.141Z","avatar_url":"https://github.com/better-tcy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/better-tcy"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://dom-to-code.netlify.app/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/better-tcy/dom-to-code/master/packages/doc/.vuepress/public/images/logo-bg.png\" width=\"50%\"\u003e\n  \u003c/a\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003ch1\u003eDOM TO CODE\u003c/h1\u003e\n    \u003cp\u003e简体中文 | \u003ca href=\"./README_en.md\"\u003eEnglish\u003c/a\u003e\u003c/p\u003e\n    \u003cp\u003e开发效率神器，点击 dom 直接跳到编辑器对应代码。\u003c/p\u003e\n    \u003cp\u003e支持 vite/webpack + vue2/vue3/react + vscode/webstorm \u003c/p\u003e\n  \u003c/div\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/dom-to-code\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/dom-to-code.svg\" alt=\"npm package\"\u003e\u003c/a\u003e\n    \u003ca href=\"#badge\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/better-tcy/dom-to-code\" alt=\"language\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://img.badgesize.io/https:/unpkg.com/dom-to-code/dist/?label=gzip%20size\u0026compression=gzip\"\u003e\u003cimg src=\"https://img.badgesize.io/https:/unpkg.com/dom-to-code/dist/?label=gzip%20size\u0026compression=gzip\" alt=\"gzip\"\u003e\u003c/a\u003e\n    \u003ca href=\"#badge\"\u003e\u003cimg src=\"https://img.shields.io/librariesio/github/better-tcy/dom-to-code\" alt=\"librariesio\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/better-tcy/dom-to-code/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/better-tcy/dom-to-code\" alt=\"LICENSE\"\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/better-tcy/dom-to-code?style=social\" alt=\"stars\"\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## ✨ 介绍\n\n接手一个项目开发网页时要修改某部分，要么靠搜索，要么靠记忆找到对应代码，过程极为浪费时间。\n\n在项目里用了 dom-to-code 插件后，对准想要修改的 dom 部分 ctrl + 按下鼠标滚轮，就会在编辑器打开对应的 dom 元素源码。\n\n(使用 mac 触摸板的用户可以ctrl + 触摸板右键)\n\n支持 vite/webpack + vue2/vue3/react\n\n支持 vscode/webstorm\n\n别人搜索你直接跳，别人加班你摸鱼。\n\n\u003cimg src=\"https://raw.githubusercontent.com/better-tcy/dom-to-code/master/packages/doc/.vuepress/public/images/dom-to-code-example.gif\"\u003e\n\n## 📦 安装\n\n```bash\nnpm i dom-to-code\n```\n\n## 🔨 使用\n\n#### 配置选项\n\n```ts\ninterface Options {\n  /**\n   * 插件模式，默认是 vue\n   */\n  mode: 'vue' | 'react'\n\n  /**\n   * 引入的文件规则，vue 默认是 jsx、tsx、vue 文件，react 默认是 jsx、tsx 文件\n   */\n  include?: string | RegExp | string[] | RegExp[] | null\n\n  /**\n   * 排除的文件规则，默认是 node_modules 文件\n   */\n  exclude?: string | RegExp | string[] | RegExp[] | null\n}\n\n```\n\n#### 第一步\n\n首先在项目入口文件（比如 `index` 文件或 `main` 文件）中引入插件初始化\n\n```ts\nimport { initDomToCode } from 'dom-to-code'\n\n// 初始化 dom-to-code\n// initDomToCode()\n\n// 推荐：只在非生产环境初始化\nprocess.env.NODE_ENV !== 'production' \u0026\u0026 initDomToCode()\n```\n\n#### 第二步\n\n配置打包器，`dom-to-code` 支持 `vite` 和 `webpack` 打包器，以下是 `vite` 、`vue-cli`、`webpack` 里的示例(推荐只在非生产环境配置)\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue3 from '@vitejs/plugin-vue'\nimport { domToCodePlugin } from 'dom-to-code/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue3(),\n    process.env.NODE_ENV !== 'production'\n      ? domToCodePlugin({\n          mode: 'vue',\n        })\n      : undefined,\n  ].filter((f) =\u003e !!f)\n})\n```\n\nExample: [`playgrounds/vite-vue3`](./playgrounds/vite-vue3/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nconst { domToCodePlugin } = require('dom-to-code/webpack')\nmodule.exports = {\n  /* ... */\n  plugins: [\n    domToCodePlugin({\n      mode: 'vue'\n    })\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nconst { domToCodePlugin, domToCodeDevServerV4, domToCodeDevServerV5 } = require('dom-to-code/webpack')\n\nmodule.exports = {\n  devServer: {\n    // 如果你的 package.json 里的 @vue/cli-service 版本 \u003c= 4.x.x，则使用 domToCodeDevServerV4\n    // ...domToCodeDevServerV4,\n\n    // 如果你的 package.json 里的 @vue/cli-service 版本 \u003e= 5.x.x，则使用 domToCodeDevServerV5\n    ...domToCodeDevServerV5\n  },\n  configureWebpack: {\n    plugins: [\n      domToCodePlugin({\n        mode: 'vue'\n      })\n    ]\n  }\n  // 如果你使用的是chainWebpack\n  // chainWebpack: (config) =\u003e {\n  //   config\n  //     .plugin('domToCodePlugin')\n  //     .use(domToCodePlugin())\n  // }\n}\n```\n\nExample: [`playgrounds/webpack5-vue2`](./playgrounds/webpack5-vue2/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCreate-react-app + react-app-rewired\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// config-overrides.js\nconst { domToCodePlugin, domToCodeDevServerV4, domToCodeDevServerV5 } = require('dom-to-code/webpack')\n\nmodule.exports = {\n  webpack(config) {\n    config.plugins.push(domToCodePlugin({\n      mode: 'react',\n    }))\n    return config\n  },\n  devServer(configFunction) {\n    return function (proxy, allowedHost) {\n      const config = configFunction(proxy, allowedHost)\n\n      // 如果你的 package.json 里的 react-scripts 版本 \u003c= 4.x.x，则使用 domToCodeDevServerV4\n      // Object.assign(config, domToCodeDevServerV4)\n\n      // 如果你的 package.json 里的 react-scripts 版本 \u003e= 5.x.x，则使用 domToCodeDevServerV5\n      Object.assign(config, domToCodeDevServerV5)\n\n      return config\n    }\n  },\n}\n```\n\nExample: [`playgrounds/webpack5-react`](./playgrounds/webpack5-react/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n## 📚 文档\n\n查看 [文档指南 📒](https://dom-to-code.netlify.app/)(即将上线...)\n\n## 💡 注意\n\n如果无法跳转编辑器，请确保你的编辑器已经添加到环境变量，比如 vscode，添加成功后在命令终端输入\n\n```bash\ncode -v\n```\n\n可以看到 vscode 版本信息意味着成功。\n\n## 🤖️ Contributing\n\nLearn about contribution [here](https://github.com/better-tcy/dom-to-code/blob/master/CONTRIBUTING.md).\n\nThis project exists thanks to all the people who contribute:\n\n\u003ca href=\"https://github.com/better-tcy/dom-to-code/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=better-tcy/dom-to-code\" /\u003e\n\u003c/a\u003e\n\n## 📄 License\n\n[MIT](https://github.com/better-tcy/dom-to-code/blob/master/LICENSE) License © 2022-PRESENT [tuocangyu](https://github.com/better-tcy)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetter-tcy%2Fdom-to-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetter-tcy%2Fdom-to-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetter-tcy%2Fdom-to-code/lists"}