Help: How to debug front-end

[Erincrying]

Self Checks

• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Provide a description of requested docs changes

I have deployed dify on a Linux server. How can I debug front-end services? Is it done by 'npm run dev’? However, this method may cause delays and errors. Can someone tell me how to debug front-end code correctly？Thank you very much！

[dosubot[bot]]

To debug front-end services for Dify deployed on a Linux server, using npm run dev is indeed the correct method for development purposes. This command starts the development server, allowing you to see changes in real-time as you edit files. However, be aware that this is intended for development and not for production use, which might explain potential delays and errors. For production, you should build the app using npm run build and then start it with npm run start ^[1][2].

Ensure you have the necessary prerequisites installed, such as Node.js v18.x (LTS) and NPM version 8.x.x or Yarn, as specified in the Dify documentation. This setup is crucial for the successful deployment and debugging of the front-end services ^[1].

To continue talking to Dosu, mention @dosu.

[Erincrying]

Add a comment

@dosu How to interrupt and debug front-end code

[dosubot[bot]]

To interrupt and debug front-end code in Dify, you can use the following methods:

1. Development Server: Run npm run dev or yarn dev to start the development server. This allows you to see changes in real-time as you edit files, which is useful for debugging.

2. Browser Developer Tools: Use the developer tools in your web browser (such as Chrome DevTools) to set breakpoints, inspect elements, and view console logs.

3. Storybook: Utilize Storybook for isolated component testing and debugging. You can start it with yarn storybook.

4. VSCode Debugger: If you're using VSCode, you can configure the debugger to set breakpoints and step through your code.

These tools and methods should help you effectively interrupt and debug front-end code in Dify.

To continue talking to Dosu, mention @dosu.

[crazywoola]

If you would like to request for help, please use discussion instead.