How to locally debug the UI and logic of the n8n node panel and observe real-time updates in the browser

Questions
,
1

Describe the problem/error/question

When I debug the UI of the n8n node panel and its corresponding TS logic, it does not update in real-time on the browser；

For example
I want to debug the getJsonValue method in editor-ui/src/components/RunDataJsonActions.vue.
The console.log does not update in the browser in real-time. How should I debug it?

Information on your n8n setup

  • **n8n version: 1.14.2
  • Database (default: SQLite):
  • **n8n EXECUTIONS_PROCESS setting (default: own, main): own
  • **Running n8n via (Docker, npm, n8n cloud, desktop app): npm
  • **Operating system: mac os
2

Hey @chris-deng,

Are you running n8n using the watch or dev command? Some of it does depend on what you are working on but I think our frontend team run the UI separatly which seems to work for them.

4

Thanks for your reply.

Run the command “pnpm run start:tunnel” in the n8n directory.

"start:tunnel": "DB_TYPE=postgresdb DB_POSTGRESDB_DATABASE=n8n DB_POSTGRESDB_HOST=galaxy-dev05-dev.i.nease.net DB_POSTGRESDB_USER=n8n DB_POSTGRESDB_PASSWORD=n8n ./packages/cli/bin/n8n start --tunnel",

Run the command “pnpm run dev” in the editor-ui directory.

Then modify RunDataJsonActions.vue, it will not update in real-time on the UI.

image
image695×417 46.3 KB

5

Hey @chris-deng,

When you connect to n8n are you connecting to 5678 or the editor dev port of 8080?

6

the editor dev port of 8080

But whether I visit localhost:5678 or localhost:8080, the UI does not update in real-time unless I rebuild it in the n8n directory.
This method is not convenient for real-time debugging of node panel code.

Because I encountered a problem: copying the JSON format in the output panel of the node, the copied content may change in some cases (in my case, it is access-token). This is caused by the clearJsonKey method. I want to debug it.

7

Hey @chris-deng,

I am not sure what else our internal UI team does, @milorad may have some thoughts.

8

pnpm run dev in the n8n directory can detect change in the node panel and update them on the canvas

1 Like
9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.