Opening devtools in Webkit causes massive lag
Unanswered
Saltwater Crocodile posted this in #help-forum
Saltwater CrocodileOP
When in dev mode (
I've tried running as
What I've tried:
1. Create a fresh clone of [Nextauri](https://github.com/leon3s/nextauri) ->
2. Create a minimal, framework-less Tauri app using [
When I add breakpoints in Exceptions in devtools and reload the page, it breaks on this bit of code (from [here](https://github.com/vercel/next.js/blob/49fe0f507042320586344b00d2cb8c5f646191d6/packages/next/src/client/index.tsx#L599)?), but nothing is logged to the console.
Obviously, this leads me to believe that something is wrong with my combination of hardware/environment + Next.js, but I'm not able to pinpoint at all what's going on.
A few questions:
1. How can I debug Webkit and/or WebkitInspector execution logs?
2. Even though I haven't found anything useful in the devtools themselves, is there anything specific I can/should be looking at in the devtools themselves?
3. Any other tips or threads I can pull at that maybe I'm not thinking of?
Thanks a bunch
npm run tauri dev
) in a Tauri app with Next.js framework, opening up the dev tools (right-click
+ Inspect Element
) will freeze the content on the page. The dev tools, on the other hand, work fine. Closing dev tools leaves a gray block where the dev tools were previously rendered and the page content remains frozen.I've tried running as
WEBKIT_DISABLE_COMPOSITING_MODE=1 npm run tauri dev
and the issue persists. What I've tried:
1. Create a fresh clone of [Nextauri](https://github.com/leon3s/nextauri) ->
npm i
-> npm run tauri dev
❌ ISSUE PERSISTS2. Create a minimal, framework-less Tauri app using [
create-tauri-app
](https://v2.tauri.app/start/create-project/) ✅ NO ISSUEWhen I add breakpoints in Exceptions in devtools and reload the page, it breaks on this bit of code (from [here](https://github.com/vercel/next.js/blob/49fe0f507042320586344b00d2cb8c5f646191d6/packages/next/src/client/index.tsx#L599)?), but nothing is logged to the console.
function Root({ children }: React.PropsWithChildren<{}>) {
if (process.env.__NEXT_TEST_MODE) {
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useEffect(() => {
window.__NEXT_HYDRATED = true
window.__NEXT_HYDRATED_AT = performance.now()
window.__NEXT_HYDRATED_CB?.()
}, [])
}
return children
}
Obviously, this leads me to believe that something is wrong with my combination of hardware/environment + Next.js, but I'm not able to pinpoint at all what's going on.
A few questions:
1. How can I debug Webkit and/or WebkitInspector execution logs?
2. Even though I haven't found anything useful in the devtools themselves, is there anything specific I can/should be looking at in the devtools themselves?
3. Any other tips or threads I can pull at that maybe I'm not thinking of?
Thanks a bunch
2 Replies
Saltwater CrocodileOP
Another relevant discovery that I've made is that even this basic app takes about 12 seconds to loads, then another 20-ish seconds at VERY HIGH CPU load before calming down and being interact-able (see attached image). However, I'm unable to pinpoint what may be causing this CPU load.
Roseate Spoonbill
Dev tools in any browser have impact on performance. No other way around it. This is mostly due to dev tools tracking changes in the dom from my experience. So the more your app changes around the dom tree, the slower it will get. Some browsers are better with it than other, but the only thing you can do is to further optimize your app, or get used to it.