szp1206 / code-inspector

Click on the DOM element on the page, and it can automatically open the IDE and position the cursor to the source code location of the DOM.

code-inspector

English Doc | 中文文档 | Read Docs for More

---

📖 Introduction

Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element.

💻 Try it out online

• vue online demo
• react online demo
• preact online demo
• solid online demo

🚀 Install

npm i webpack-code-inspector-plugin -D
# or
yarn add webpack-code-inspector-plugin -D
# or
pnpm add webpack-code-inspector-plugin -D

🌈 Usage

Please check here for complete access and usage information: code-inspector-plugin configuration

🎨 Support

The following are which compilers, web frameworks and editors we supported now:

• The following bundlers are currently supported:
  ✅ webpack(3.x/4.x/5.x)
  ✅ vite
  ✅ rspack
• The following Web frameworks are currently supported:
  ✅ vue2
  ✅ vue3
  ✅ react
  ✅ preact
  ✅ solid
• The following code editors are currently supported:
  VSCode | Visual Studio Code - Insiders | WebStorm | Atom | HBuilderX | PhpStorm | PyCharm | IntelliJ IDEA

📧 Communication and Feedback

For any usage issues, please leave a message below my Twitter post or submit an issue on Github.

For Chinese users, you can you can join the QQ group 769748484 add the author's WeiXin account zhoulx1688888 for consultation and feedback: