Common Problems ​

Do I need to manually distinguish between production and development environments? ​

The plugin automatically recognizes whether it is a production or development environment based on the internal parameters of the bundler. It only takes effect in the development environment, so users do not need to manually distinguish between production and development environments.

Use in Micro Frontend ​

If you encounter issues where the DOM filtering navigation does not work in micro frontend sub-projects, you need to apply code-inspector-plugin in both the main project and sub-projects to use it normally.

System cannot find the specified path ​

If you encounter the following error when opening the IDE, it may be because the IDE's directory contains Chinese characters. Modify it to an English directory, and it should work normally:

Clicking does not open the IDE ​

If the project is running normally, and the DOM inspector feature appears (DOM masking when holding down the combination keys on the page), but clicking does not automatically open the IDE, it may be because the IDE used does not support automatic recognition or is a non-official version of the IDE. In both cases, refer to the Non Automatic Recognition IDE section in the Specify IDE chapter for configuration instructions.

Use in SSR ​

The plugin provides default support for most conventional SSR frameworks. For next.js projects, make sure there are files containing client-side code (including use client). If you have a custom-rendered SSR project, please submit an issue for consultation on how to adapt.

Eslint Plugin Errors ​

If this plugin causes errors with the ESLint Plugin, please add enforcePre: false to the code-inspector-plugin configuration.

Eslint Loader Hot Update Repetition ​

If this plugin causes Eslint Loader to repeatedly execute hot updates, please add enforcePre: false to the code-inspector-plugin configuration.

Bundle Speed Optimization ​

For bundle speed optimization in webpack, you can use parameters such as enforcePre, forceInjectCache, match, etc., as referenced in the API section for optimization.

Hide File Paths on DOM ​

Starting from version 0.12.0, you can hide file paths on the DOM by setting hideDomPathAttr: true.

Other Issues ​

If you encounter unresolved issues, please leave a message below my Twitter post or submit an issue on Github.