code-inspector-plugin 0.16.0 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +344 -344
- package/dist/index.js +1 -1
- package/dist/index.mjs +238 -207
- package/package.json +5 -5
- package/types/index.d.ts +15 -15
package/README.md
CHANGED
|
@@ -1,344 +1,344 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
<img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width="160px" style="margin-bottom: 12px;" />
|
|
3
|
-
|
|
4
|
-
<p align="center">
|
|
5
|
-
<h2>code-inspector</h2>
|
|
6
|
-
<a href="https://inspector.fe-dev.cn">中文文档</a> | <a href="https://inspector.fe-dev.cn/en">Documentation</a>
|
|
7
|
-
</p>
|
|
8
|
-
|
|
9
|
-
[](https://www.npmjs.com/package/code-inspector-plugin)
|
|
10
|
-
[
|
|
24
|
-
|
|
25
|
-
## 💻 Try it out online
|
|
26
|
-
|
|
27
|
-
- [vue online demo](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
|
|
28
|
-
- [react online demo](https://stackblitz.com/edit/vitejs-vite-svtwrr?file=vite.config.ts)
|
|
29
|
-
- [preact online demo](https://stackblitz.com/edit/vitejs-vite-iyawbf?file=vite.config.ts)
|
|
30
|
-
- [solid online demo](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts)
|
|
31
|
-
- [qwik online demo](https://stackblitz.com/edit/vitejs-vite-antzds?file=vite.config.ts)
|
|
32
|
-
- [svelte online demo](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts)
|
|
33
|
-
- [astro online demo](https://stackblitz.com/edit/withastro-astro-f5xq1t?file=astro.config.mjs)
|
|
34
|
-
|
|
35
|
-
## 🎨 Support
|
|
36
|
-
|
|
37
|
-
The following are which compilers, web frameworks and editors we supported now:
|
|
38
|
-
|
|
39
|
-
- The following bundlers are currently supported:<br />
|
|
40
|
-
✅ webpack<br />
|
|
41
|
-
✅ vite<br />
|
|
42
|
-
✅ rspack / rsbuild<br />
|
|
43
|
-
✅ farm<br />
|
|
44
|
-
✅ esbuild<br />
|
|
45
|
-
✅ nextjs / nuxt / umijs eg.<br />
|
|
46
|
-
- The following Web frameworks are currently supported:<br />
|
|
47
|
-
✅ vue2<br />
|
|
48
|
-
✅ vue3<br />
|
|
49
|
-
✅ react<br />
|
|
50
|
-
✅ preact<br />
|
|
51
|
-
✅ solid<br />
|
|
52
|
-
✅ qwik<br />
|
|
53
|
-
✅ svelte<br />
|
|
54
|
-
✅ astro
|
|
55
|
-
- The following code editors are currently supported:<br />
|
|
56
|
-
[VSCode](https://code.visualstudio.com/) | [Visual Studio Code - Insiders](https://code.visualstudio.com/insiders/) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/)
|
|
57
|
-
|
|
58
|
-
## 🚀 Install
|
|
59
|
-
|
|
60
|
-
```perl
|
|
61
|
-
npm i code-inspector-plugin -D
|
|
62
|
-
# or
|
|
63
|
-
yarn add code-inspector-plugin -D
|
|
64
|
-
# or
|
|
65
|
-
pnpm add code-inspector-plugin -D
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## 🌈 Usage
|
|
69
|
-
|
|
70
|
-
Please check here for more usage information: [code-inspector-plugin configuration](https://en.inspector.fe-dev.cn/guide/start.html#configuration)
|
|
71
|
-
|
|
72
|
-
- 1.Configuring Build Tools
|
|
73
|
-
|
|
74
|
-
<details>
|
|
75
|
-
<summary>Click to expand configuration about: <b>webpack</b></summary>
|
|
76
|
-
|
|
77
|
-
```js
|
|
78
|
-
// webpack.config.js
|
|
79
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
80
|
-
|
|
81
|
-
module.exports = () => ({
|
|
82
|
-
plugins: [
|
|
83
|
-
codeInspectorPlugin({
|
|
84
|
-
bundler: 'webpack',
|
|
85
|
-
}),
|
|
86
|
-
],
|
|
87
|
-
});
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
</details>
|
|
91
|
-
|
|
92
|
-
<details>
|
|
93
|
-
<summary>Click to expand configuration about: <b>vite</b></summary>
|
|
94
|
-
|
|
95
|
-
```js
|
|
96
|
-
// vite.config.js
|
|
97
|
-
import { defineConfig } from 'vite';
|
|
98
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
99
|
-
|
|
100
|
-
export default defineConfig({
|
|
101
|
-
plugins: [
|
|
102
|
-
codeInspectorPlugin({
|
|
103
|
-
bundler: 'vite',
|
|
104
|
-
}),
|
|
105
|
-
],
|
|
106
|
-
});
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
</details>
|
|
110
|
-
|
|
111
|
-
<details>
|
|
112
|
-
<summary>Click to expand configuration about: <b>rspack</b></summary>
|
|
113
|
-
|
|
114
|
-
```js
|
|
115
|
-
// rspack.config.js
|
|
116
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
117
|
-
|
|
118
|
-
module.exports = {
|
|
119
|
-
// other config...
|
|
120
|
-
plugins: [
|
|
121
|
-
codeInspectorPlugin({
|
|
122
|
-
bundler: 'rspack',
|
|
123
|
-
}),
|
|
124
|
-
// other plugins...
|
|
125
|
-
],
|
|
126
|
-
};
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
</details>
|
|
130
|
-
|
|
131
|
-
<details>
|
|
132
|
-
<summary>Click to expand configuration about: <b>rsbuild</b></summary>
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
// rsbuild.config.js
|
|
136
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
137
|
-
|
|
138
|
-
module.exports = {
|
|
139
|
-
// other config...
|
|
140
|
-
tools: {
|
|
141
|
-
rspack: {
|
|
142
|
-
plugins: [
|
|
143
|
-
codeInspectorPlugin({
|
|
144
|
-
bundler: 'rspack',
|
|
145
|
-
}),
|
|
146
|
-
],
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
};
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
</details>
|
|
153
|
-
|
|
154
|
-
<details>
|
|
155
|
-
<summary>Click to expand configuration about: <b>esbuild</b></summary>
|
|
156
|
-
|
|
157
|
-
```js
|
|
158
|
-
// esbuild.config.js
|
|
159
|
-
const esbuild = require('esbuild');
|
|
160
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
161
|
-
|
|
162
|
-
esbuild.build({
|
|
163
|
-
// other configs...
|
|
164
|
-
// [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false
|
|
165
|
-
plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
|
|
166
|
-
});
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
</details>
|
|
170
|
-
|
|
171
|
-
<details>
|
|
172
|
-
<summary>Click to expand configuration about: <b>farm</b></summary>
|
|
173
|
-
|
|
174
|
-
```js
|
|
175
|
-
// farm.config.js
|
|
176
|
-
import { defineConfig } from '@farmfe/core';
|
|
177
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
178
|
-
|
|
179
|
-
export default defineConfig({
|
|
180
|
-
vitePlugins: [
|
|
181
|
-
codeInspectorPlugin({
|
|
182
|
-
bundler: 'vite',
|
|
183
|
-
}),
|
|
184
|
-
// ...other code
|
|
185
|
-
],
|
|
186
|
-
});
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
</details>
|
|
190
|
-
|
|
191
|
-
<details>
|
|
192
|
-
<summary>Click to expand configuration about: <b>vue-cli</b></summary>
|
|
193
|
-
|
|
194
|
-
```js
|
|
195
|
-
// vue.config.js
|
|
196
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
197
|
-
|
|
198
|
-
module.exports = {
|
|
199
|
-
// ...other code
|
|
200
|
-
chainWebpack: (config) => {
|
|
201
|
-
config.plugin('code-inspector-plugin').use(
|
|
202
|
-
codeInspectorPlugin({
|
|
203
|
-
bundler: 'webpack',
|
|
204
|
-
})
|
|
205
|
-
);
|
|
206
|
-
},
|
|
207
|
-
};
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
</details>
|
|
211
|
-
|
|
212
|
-
<details>
|
|
213
|
-
<summary>Click to expand configuration about: <b>nuxt</b></summary>
|
|
214
|
-
|
|
215
|
-
For nuxt3.x :
|
|
216
|
-
|
|
217
|
-
```js
|
|
218
|
-
// nuxt.config.js
|
|
219
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
220
|
-
|
|
221
|
-
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
222
|
-
export default defineNuxtConfig({
|
|
223
|
-
vite: {
|
|
224
|
-
plugins: [codeInspectorPlugin({ bundler: 'vite' })],
|
|
225
|
-
},
|
|
226
|
-
});
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
For nuxt2.x :
|
|
230
|
-
|
|
231
|
-
```js
|
|
232
|
-
// nuxt.config.js
|
|
233
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
234
|
-
|
|
235
|
-
export default {
|
|
236
|
-
build: {
|
|
237
|
-
extend(config) {
|
|
238
|
-
config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
|
|
239
|
-
return config;
|
|
240
|
-
},
|
|
241
|
-
},
|
|
242
|
-
};
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
</details>
|
|
246
|
-
|
|
247
|
-
<details>
|
|
248
|
-
<summary>Click to expand configuration about: <b>next.js</b></summary>
|
|
249
|
-
|
|
250
|
-
```js
|
|
251
|
-
// next.config.js
|
|
252
|
-
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
253
|
-
|
|
254
|
-
const nextConfig = {
|
|
255
|
-
webpack: (config, { dev, isServer }) => {
|
|
256
|
-
config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
|
|
257
|
-
return config;
|
|
258
|
-
},
|
|
259
|
-
};
|
|
260
|
-
|
|
261
|
-
module.exports = nextConfig;
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
</details>
|
|
265
|
-
|
|
266
|
-
<details>
|
|
267
|
-
<summary>Click to expand configuration about: <b>umi.js</b></summary>
|
|
268
|
-
|
|
269
|
-
```js
|
|
270
|
-
// umi.config.js or umirc.js
|
|
271
|
-
import { defineConfig } from '@umijs/max';
|
|
272
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
273
|
-
|
|
274
|
-
export default defineConfig({
|
|
275
|
-
chainWebpack(memo) {
|
|
276
|
-
memo.plugin('code-inspector-plugin').use(
|
|
277
|
-
codeInspectorPlugin({
|
|
278
|
-
bundler: 'webpack',
|
|
279
|
-
})
|
|
280
|
-
);
|
|
281
|
-
},
|
|
282
|
-
// other config
|
|
283
|
-
});
|
|
284
|
-
```
|
|
285
|
-
|
|
286
|
-
</details>
|
|
287
|
-
|
|
288
|
-
<details>
|
|
289
|
-
<summary>Click to expand configuration about: <b>astro</b></summary>
|
|
290
|
-
|
|
291
|
-
```js
|
|
292
|
-
// astro.config.mjs
|
|
293
|
-
import { defineConfig } from 'astro/config';
|
|
294
|
-
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
295
|
-
|
|
296
|
-
export default defineConfig({
|
|
297
|
-
vite: {
|
|
298
|
-
plugins: [codeInspectorPlugin({ bundler: 'vite' })],
|
|
299
|
-
},
|
|
300
|
-
});
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
</details>
|
|
304
|
-
|
|
305
|
-
- 2.Configuring VSCode Command Line Tool
|
|
306
|
-
|
|
307
|
-
> **Tip:** Skip for Windows or other IDEs <br />
|
|
308
|
-
> This step is only required for Mac with vscode as IDE. Skip this step if your computer is Windows or if you use another IDE.
|
|
309
|
-
|
|
310
|
-
In VSCode, press `command + shift + p`, search for and click `Shell Command: Install 'code' command in PATH`:
|
|
311
|
-
|
|
312
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/vscode-command-line.png" width="400px" />
|
|
313
|
-
|
|
314
|
-
If you see the dialog box below, the configuration was successful:
|
|
315
|
-
|
|
316
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/command-line-success.png" width="300px" />
|
|
317
|
-
|
|
318
|
-
- 3.Enjoy using it
|
|
319
|
-
|
|
320
|
-
When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are `Option + Shift`; for Windows, it's `Alt + Shift`, and the browser console will output related combination key prompts)
|
|
321
|
-
|
|
322
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/console-success.png" width="700px" />
|
|
323
|
-
|
|
324
|
-
## 👨💻 Contributors
|
|
325
|
-
|
|
326
|
-
Special thanks to the contributors of this project:<br />
|
|
327
|
-
|
|
328
|
-
<img src="https://contrib.rocks/image?repo=zh-lx/code-inspector" height="40" />
|
|
329
|
-
|
|
330
|
-
## 📧 Communication and Feedback
|
|
331
|
-
|
|
332
|
-
For any usage issues, please leave a message below my [Twitter](https://twitter.com/zhulxing312147) post or [submit an issue](https://github.com/zh-lx/code-inspector/issues) on Github.
|
|
333
|
-
|
|
334
|
-
For Chinese users, you can join the QQ group `769748484` or add the author's WeiXin account `zhoulx1688888` for consultation and feedback:
|
|
335
|
-
|
|
336
|
-
<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
|
|
337
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/qq-group.png" width="200" height="272" />
|
|
338
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-group.jpg" width="200" height="272" />
|
|
339
|
-
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-qrcode.jpg" width="200" height="272" />
|
|
340
|
-
</div>
|
|
341
|
-
|
|
342
|
-
## 💖 Sponsor
|
|
343
|
-
|
|
344
|
-
Sponsoring this project can help the author create better. If you are willing, thanks for sponsoring me through [here](https://inspector.fe-dev.cn/en/more/sponsor.html).
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://github.com/zh-lx/code-inspector/assets/73059627/842c3e88-dca7-4743-854c-d61093d3d34f" width="160px" style="margin-bottom: 12px;" />
|
|
3
|
+
|
|
4
|
+
<p align="center">
|
|
5
|
+
<h2>code-inspector</h2>
|
|
6
|
+
<a href="https://inspector.fe-dev.cn">中文文档</a> | <a href="https://inspector.fe-dev.cn/en">Documentation</a>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
[](https://www.npmjs.com/package/code-inspector-plugin)
|
|
10
|
+
[](https://github.com/zh-lx/code-inspector)
|
|
11
|
+
[](https://npmcharts.netlify.app/compare/code-inspector-plugin?minimal=true)
|
|
12
|
+
[](https://opensource.org/licenses/MIT)
|
|
13
|
+
[](https://github.com/zh-lx/code-inspector)
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<hr />
|
|
18
|
+
|
|
19
|
+
## 📖 Introduction
|
|
20
|
+
|
|
21
|
+
Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 💻 Try it out online
|
|
26
|
+
|
|
27
|
+
- [vue online demo](https://stackblitz.com/edit/vitejs-vite-4pseos?file=vite.config.ts)
|
|
28
|
+
- [react online demo](https://stackblitz.com/edit/vitejs-vite-svtwrr?file=vite.config.ts)
|
|
29
|
+
- [preact online demo](https://stackblitz.com/edit/vitejs-vite-iyawbf?file=vite.config.ts)
|
|
30
|
+
- [solid online demo](https://stackblitz.com/edit/solidjs-templates-6u76jn?file=vite.config.ts)
|
|
31
|
+
- [qwik online demo](https://stackblitz.com/edit/vitejs-vite-antzds?file=vite.config.ts)
|
|
32
|
+
- [svelte online demo](https://stackblitz.com/edit/vitejs-vite-zoncqr?file=vite.config.ts)
|
|
33
|
+
- [astro online demo](https://stackblitz.com/edit/withastro-astro-f5xq1t?file=astro.config.mjs)
|
|
34
|
+
|
|
35
|
+
## 🎨 Support
|
|
36
|
+
|
|
37
|
+
The following are which compilers, web frameworks and editors we supported now:
|
|
38
|
+
|
|
39
|
+
- The following bundlers are currently supported:<br />
|
|
40
|
+
✅ webpack<br />
|
|
41
|
+
✅ vite<br />
|
|
42
|
+
✅ rspack / rsbuild<br />
|
|
43
|
+
✅ farm<br />
|
|
44
|
+
✅ esbuild<br />
|
|
45
|
+
✅ nextjs / nuxt / umijs eg.<br />
|
|
46
|
+
- The following Web frameworks are currently supported:<br />
|
|
47
|
+
✅ vue2<br />
|
|
48
|
+
✅ vue3<br />
|
|
49
|
+
✅ react<br />
|
|
50
|
+
✅ preact<br />
|
|
51
|
+
✅ solid<br />
|
|
52
|
+
✅ qwik<br />
|
|
53
|
+
✅ svelte<br />
|
|
54
|
+
✅ astro
|
|
55
|
+
- The following code editors are currently supported:<br />
|
|
56
|
+
[VSCode](https://code.visualstudio.com/) | [Visual Studio Code - Insiders](https://code.visualstudio.com/insiders/) | [WebStorm](https://www.jetbrains.com/webstorm/) | [Atom](https://atom.io/) | [HBuilderX](https://www.dcloud.io/hbuilderx.html) | [PhpStorm](https://www.jetbrains.com/phpstorm/) | [PyCharm](https://www.jetbrains.com/pycharm/) | [IntelliJ IDEA](https://www.jetbrains.com/idea/)
|
|
57
|
+
|
|
58
|
+
## 🚀 Install
|
|
59
|
+
|
|
60
|
+
```perl
|
|
61
|
+
npm i code-inspector-plugin -D
|
|
62
|
+
# or
|
|
63
|
+
yarn add code-inspector-plugin -D
|
|
64
|
+
# or
|
|
65
|
+
pnpm add code-inspector-plugin -D
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## 🌈 Usage
|
|
69
|
+
|
|
70
|
+
Please check here for more usage information: [code-inspector-plugin configuration](https://en.inspector.fe-dev.cn/guide/start.html#configuration)
|
|
71
|
+
|
|
72
|
+
- 1.Configuring Build Tools
|
|
73
|
+
|
|
74
|
+
<details>
|
|
75
|
+
<summary>Click to expand configuration about: <b>webpack</b></summary>
|
|
76
|
+
|
|
77
|
+
```js
|
|
78
|
+
// webpack.config.js
|
|
79
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
80
|
+
|
|
81
|
+
module.exports = () => ({
|
|
82
|
+
plugins: [
|
|
83
|
+
codeInspectorPlugin({
|
|
84
|
+
bundler: 'webpack',
|
|
85
|
+
}),
|
|
86
|
+
],
|
|
87
|
+
});
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
</details>
|
|
91
|
+
|
|
92
|
+
<details>
|
|
93
|
+
<summary>Click to expand configuration about: <b>vite</b></summary>
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
// vite.config.js
|
|
97
|
+
import { defineConfig } from 'vite';
|
|
98
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
99
|
+
|
|
100
|
+
export default defineConfig({
|
|
101
|
+
plugins: [
|
|
102
|
+
codeInspectorPlugin({
|
|
103
|
+
bundler: 'vite',
|
|
104
|
+
}),
|
|
105
|
+
],
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
</details>
|
|
110
|
+
|
|
111
|
+
<details>
|
|
112
|
+
<summary>Click to expand configuration about: <b>rspack</b></summary>
|
|
113
|
+
|
|
114
|
+
```js
|
|
115
|
+
// rspack.config.js
|
|
116
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
117
|
+
|
|
118
|
+
module.exports = {
|
|
119
|
+
// other config...
|
|
120
|
+
plugins: [
|
|
121
|
+
codeInspectorPlugin({
|
|
122
|
+
bundler: 'rspack',
|
|
123
|
+
}),
|
|
124
|
+
// other plugins...
|
|
125
|
+
],
|
|
126
|
+
};
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
</details>
|
|
130
|
+
|
|
131
|
+
<details>
|
|
132
|
+
<summary>Click to expand configuration about: <b>rsbuild</b></summary>
|
|
133
|
+
|
|
134
|
+
```js
|
|
135
|
+
// rsbuild.config.js
|
|
136
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
137
|
+
|
|
138
|
+
module.exports = {
|
|
139
|
+
// other config...
|
|
140
|
+
tools: {
|
|
141
|
+
rspack: {
|
|
142
|
+
plugins: [
|
|
143
|
+
codeInspectorPlugin({
|
|
144
|
+
bundler: 'rspack',
|
|
145
|
+
}),
|
|
146
|
+
],
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
};
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
</details>
|
|
153
|
+
|
|
154
|
+
<details>
|
|
155
|
+
<summary>Click to expand configuration about: <b>esbuild</b></summary>
|
|
156
|
+
|
|
157
|
+
```js
|
|
158
|
+
// esbuild.config.js
|
|
159
|
+
const esbuild = require('esbuild');
|
|
160
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
161
|
+
|
|
162
|
+
esbuild.build({
|
|
163
|
+
// other configs...
|
|
164
|
+
// [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false
|
|
165
|
+
plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
|
|
166
|
+
});
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
</details>
|
|
170
|
+
|
|
171
|
+
<details>
|
|
172
|
+
<summary>Click to expand configuration about: <b>farm</b></summary>
|
|
173
|
+
|
|
174
|
+
```js
|
|
175
|
+
// farm.config.js
|
|
176
|
+
import { defineConfig } from '@farmfe/core';
|
|
177
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
178
|
+
|
|
179
|
+
export default defineConfig({
|
|
180
|
+
vitePlugins: [
|
|
181
|
+
codeInspectorPlugin({
|
|
182
|
+
bundler: 'vite',
|
|
183
|
+
}),
|
|
184
|
+
// ...other code
|
|
185
|
+
],
|
|
186
|
+
});
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
</details>
|
|
190
|
+
|
|
191
|
+
<details>
|
|
192
|
+
<summary>Click to expand configuration about: <b>vue-cli</b></summary>
|
|
193
|
+
|
|
194
|
+
```js
|
|
195
|
+
// vue.config.js
|
|
196
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
197
|
+
|
|
198
|
+
module.exports = {
|
|
199
|
+
// ...other code
|
|
200
|
+
chainWebpack: (config) => {
|
|
201
|
+
config.plugin('code-inspector-plugin').use(
|
|
202
|
+
codeInspectorPlugin({
|
|
203
|
+
bundler: 'webpack',
|
|
204
|
+
})
|
|
205
|
+
);
|
|
206
|
+
},
|
|
207
|
+
};
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
</details>
|
|
211
|
+
|
|
212
|
+
<details>
|
|
213
|
+
<summary>Click to expand configuration about: <b>nuxt</b></summary>
|
|
214
|
+
|
|
215
|
+
For nuxt3.x :
|
|
216
|
+
|
|
217
|
+
```js
|
|
218
|
+
// nuxt.config.js
|
|
219
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
220
|
+
|
|
221
|
+
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
222
|
+
export default defineNuxtConfig({
|
|
223
|
+
vite: {
|
|
224
|
+
plugins: [codeInspectorPlugin({ bundler: 'vite' })],
|
|
225
|
+
},
|
|
226
|
+
});
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
For nuxt2.x :
|
|
230
|
+
|
|
231
|
+
```js
|
|
232
|
+
// nuxt.config.js
|
|
233
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
234
|
+
|
|
235
|
+
export default {
|
|
236
|
+
build: {
|
|
237
|
+
extend(config) {
|
|
238
|
+
config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
|
|
239
|
+
return config;
|
|
240
|
+
},
|
|
241
|
+
},
|
|
242
|
+
};
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
</details>
|
|
246
|
+
|
|
247
|
+
<details>
|
|
248
|
+
<summary>Click to expand configuration about: <b>next.js</b></summary>
|
|
249
|
+
|
|
250
|
+
```js
|
|
251
|
+
// next.config.js
|
|
252
|
+
const { codeInspectorPlugin } = require('code-inspector-plugin');
|
|
253
|
+
|
|
254
|
+
const nextConfig = {
|
|
255
|
+
webpack: (config, { dev, isServer }) => {
|
|
256
|
+
config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
|
|
257
|
+
return config;
|
|
258
|
+
},
|
|
259
|
+
};
|
|
260
|
+
|
|
261
|
+
module.exports = nextConfig;
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
</details>
|
|
265
|
+
|
|
266
|
+
<details>
|
|
267
|
+
<summary>Click to expand configuration about: <b>umi.js</b></summary>
|
|
268
|
+
|
|
269
|
+
```js
|
|
270
|
+
// umi.config.js or umirc.js
|
|
271
|
+
import { defineConfig } from '@umijs/max';
|
|
272
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
273
|
+
|
|
274
|
+
export default defineConfig({
|
|
275
|
+
chainWebpack(memo) {
|
|
276
|
+
memo.plugin('code-inspector-plugin').use(
|
|
277
|
+
codeInspectorPlugin({
|
|
278
|
+
bundler: 'webpack',
|
|
279
|
+
})
|
|
280
|
+
);
|
|
281
|
+
},
|
|
282
|
+
// other config
|
|
283
|
+
});
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
</details>
|
|
287
|
+
|
|
288
|
+
<details>
|
|
289
|
+
<summary>Click to expand configuration about: <b>astro</b></summary>
|
|
290
|
+
|
|
291
|
+
```js
|
|
292
|
+
// astro.config.mjs
|
|
293
|
+
import { defineConfig } from 'astro/config';
|
|
294
|
+
import { codeInspectorPlugin } from 'code-inspector-plugin';
|
|
295
|
+
|
|
296
|
+
export default defineConfig({
|
|
297
|
+
vite: {
|
|
298
|
+
plugins: [codeInspectorPlugin({ bundler: 'vite' })],
|
|
299
|
+
},
|
|
300
|
+
});
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
</details>
|
|
304
|
+
|
|
305
|
+
- 2.Configuring VSCode Command Line Tool
|
|
306
|
+
|
|
307
|
+
> **Tip:** Skip for Windows or other IDEs <br />
|
|
308
|
+
> This step is only required for Mac with vscode as IDE. Skip this step if your computer is Windows or if you use another IDE.
|
|
309
|
+
|
|
310
|
+
In VSCode, press `command + shift + p`, search for and click `Shell Command: Install 'code' command in PATH`:
|
|
311
|
+
|
|
312
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/vscode-command-line.png" width="400px" />
|
|
313
|
+
|
|
314
|
+
If you see the dialog box below, the configuration was successful:
|
|
315
|
+
|
|
316
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/command-line-success.png" width="300px" />
|
|
317
|
+
|
|
318
|
+
- 3.Enjoy using it
|
|
319
|
+
|
|
320
|
+
When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are `Option + Shift`; for Windows, it's `Alt + Shift`, and the browser console will output related combination key prompts)
|
|
321
|
+
|
|
322
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/console-success.png" width="700px" />
|
|
323
|
+
|
|
324
|
+
## 👨💻 Contributors
|
|
325
|
+
|
|
326
|
+
Special thanks to the contributors of this project:<br />
|
|
327
|
+
|
|
328
|
+
<img src="https://contrib.rocks/image?repo=zh-lx/code-inspector" height="40" />
|
|
329
|
+
|
|
330
|
+
## 📧 Communication and Feedback
|
|
331
|
+
|
|
332
|
+
For any usage issues, please leave a message below my [Twitter](https://twitter.com/zhulxing312147) post or [submit an issue](https://github.com/zh-lx/code-inspector/issues) on Github.
|
|
333
|
+
|
|
334
|
+
For Chinese users, you can join the QQ group `769748484` or add the author's WeiXin account `zhoulx1688888` for consultation and feedback:
|
|
335
|
+
|
|
336
|
+
<div style="display: flex; column-gap: 16px; row-gap: 16px; flex-wrap: wrap;">
|
|
337
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/qq-group.png" width="200" height="272" />
|
|
338
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-group.jpg" width="200" height="272" />
|
|
339
|
+
<img src="https://cdn.jsdelivr.net/gh/zh-lx/static-img/code-inspector/wx-qrcode.jpg" width="200" height="272" />
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
## 💖 Sponsor
|
|
343
|
+
|
|
344
|
+
Sponsoring this project can help the author create better. If you are willing, thanks for sponsoring me through [here](https://inspector.fe-dev.cn/en/more/sponsor.html).
|