How debug Strapi Admin, like EditView, GenericInputs, FieldComponent behaviour?

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.0.7
  • Operating System: Windows 10, Ubuntu
  • Database: MySQL
  • Node Version: 16.13.1
  • NPM Version: 8.1.2
  • Yarn Version: 1.22.17

Hello!

I try to debug strapi basic frontend behaviours like EditView, GenericInputs, FieldComponent etc…

(I already made a demo strapi-cms + nextjs-site, now I try to undestand some bugs or the behaviours of the CMS at the developer level)

Now it runs, but without SourceMap :

that is the way how should I develop strapi CMS?
!not creating a strapi instance and cusomize it!

git clone https://github.com/strapi/strapi

yarn install
yarn setup

cd ./packages/core/admin
yarn develop
# I tried: yarn develop:webpack too

And how could include the source map?

ValidationError: components.Input.error.validation.required
    at finishTestRun (main.bundle.js:154963:20)
    at main.bundle.js:154917:5
    at finishTestRun (main.bundle.js:154963:11)
    at main.bundle.js:154917:5
    at finishTestRun (main.bundle.js:154967:9)
    at main.bundle.js:154917:5
    at finishTestRun (main.bundle.js:154967:9)

ps.: Which is the proper channel to ask developer questions like this one?

Thanks!

2

You can run it with yarn develop --watch-admin to spin it up on port 8000 then you can use things like React Developer tools to inspect the components etc.

3

Thanks, but still no SourceMap (--watch-admin for plugin development).

content-manager.chunk.js:4093 ValidationError: 3 errors occurred
    at finishTestRun (main.bundle.js:175889:20)
    at main.bundle.js:175843:5
    at finishTestRun (main.bundle.js:175889:11)
    at main.bundle.js:175843:5
    at finishTestRun (main.bundle.js:175893:9)
    at main.bundle.js:175843:5
    at finishTestRun (main.bundle.js:175893:9)
    at main.bundle.js:175843:5
    at finishTestRun (main.bundle.js:175893:9)
    at main.bundle.js:175843:5
4

It solved.

Add devtool: 'source-map' config setting to packages\core\admin\webpack.config.dev.js file.

  if (analyzeDuplicateDependencies === 'true') {
    config.plugins.push(new DuplicateReporterPlugin());
  }

  return {
    ...config,
    devtool: 'source-map', // << Setting for generating SourceMap
    snapshot: {
      managedPaths: [
        path.resolve(__dirname, '../content-type-builder'),
        path.resolve(__dirname, '../upload'),
        path.resolve(__dirname, '../helper-plugin'),
3 Likes