how debug refine-antd component in my project

[whg517]

Hi, I am using components within refind-antd, but I find that antd components are not debugging properly, I am not breaking at the line points I expect, and I am not seeing variable values properly. What should I do to debug normally?

As for why I need to debug the source-code for refine-antd, it is because I am having a problem with breadcrumbs, I am not displaying breadcrumbs properly in some components, so I am trying to debug the List component how.

here is my code:

App

    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <AntdConfigProvider>
          <DevtoolsProvider>
            <Refine
              dataProvider={{
                default: dataProvider("http://127.0.0.1:3100/api"),
              }}
              notificationProvider={useNotificationProvider}
              routerProvider={routerBindings}
              // authProvider={useAuthProvider()}
              resources={[
                {
                  name: "dashboard",
                  list: "/",
                  meta: {
                    label: "Dashboard"
                  }
                },
                {
                  name: "system",
                  meta: {
                    label: "System"
                  }
                },
                {
                  name: "stacks",
                  list: "/stacks/list",
                  meta: {
                    parent: "system",
                    label: "Stack manage"
                  },
                },
              ]}
              options={{
                syncWithLocation: true,
                warnWhenUnsavedChanges: true,
                projectId: "Ev3073-Mv3Ewt-Wkdrss",
              }}
            >
              <Routes>
                <Route
                  element={
                    <ThemedLayoutV2 Header={() => <Header />}>
                      <Outlet />
                    </ThemedLayoutV2>
                  }
                >
                  <Route
                    index
                    element={<SystemDashboard />}
                  />

                  <Route path="/" element={<SystemDashboard />} />

                  <Route path="/stacks">
                    <Route path="list" element={<StackList />} />
                  </Route>

                </Route>
              </Routes>
              <UnsavedChangesNotifier />
              <DocumentTitleHandler />
            </Refine>
            <DevtoolsPanel />
          </DevtoolsProvider>
        </AntdConfigProvider>
      </QueryClientProvider>
    </BrowserRouter>

component

import { renderToString } from 'react-dom/server';
import { useResource } from "@refinedev/core";
import { Breadcrumb } from "@refinedev/antd";

export const SystemDashboard = () => {
  const { resource } = useResource()
  console.log("resource is: ", resource)

  const breadcrumb = <Breadcrumb
    breadcrumbProps={{
      items: [
        {title: "foo"},
        {title: "bar"}
      ]
    }}
  />

  console.log(renderToString(breadcrumb))
  return <>
    {breadcrumb}
    dashboard
  </>
};

[aliemir]

Hey @whg517, assuming the issue about the Breadcrumb is resolved in the other topic you've posted but about the debugging process, as I can understand from the screenshots you've shared, you're placing the breakpoints in the src directory of the package rather than the dist which is the compiled one and the one your bundler is picking up.

If you have any further debugging needs, you can try to use dist instead of src 🙏

[whg517]

Thank you for your reply. Although my breadcrumb problem is solved. However, I still have some problems about debug, so that I can better solve them by myself when I encounter problems in the future. As you said, I should be debugging the dist directory, but I don't see any code for logic in the dist directory. I'm not very familiar with the js compilation aspect. Can you tell me how to debug correctly to the code I need?