mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-03 20:35:53 +02:00
🐛 wrong file(s) in git
This commit is contained in:
parent
41d7728d18
commit
7078ec68c1
@ -1,102 +0,0 @@
|
|||||||
import { T, t } from "./utils/index.js";
|
|
||||||
export const info= {
|
|
||||||
title: t`Debugging`,
|
|
||||||
description: t`Techniques for debugging applications using deka-dom-el, especially signals.`,
|
|
||||||
};
|
|
||||||
|
|
||||||
import { el } from "deka-dom-el";
|
|
||||||
import { simplePage } from "./layout/simplePage.html.js";
|
|
||||||
import { example } from "./components/example.html.js";
|
|
||||||
import { h3 } from "./components/pageUtils.html.js";
|
|
||||||
import { code } from "./components/code.html.js";
|
|
||||||
/** @param {string} url */
|
|
||||||
const fileURL= url=> new URL(url, import.meta.url);
|
|
||||||
|
|
||||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
|
||||||
export function page({ pkg, info }){
|
|
||||||
const page_id= info.id;
|
|
||||||
return el(simplePage, { info, pkg }).append(
|
|
||||||
el("h2", t`Debugging applications with deka-dom-el`),
|
|
||||||
el("p").append(...T`
|
|
||||||
Debugging is an essential part of application development. This guide provides techniques
|
|
||||||
and best practices for debugging applications built with deka-dom-el, with a focus on signals.
|
|
||||||
`),
|
|
||||||
|
|
||||||
el(h3, t`Debugging signals`),
|
|
||||||
el("p").append(...T`
|
|
||||||
Signals are reactive primitives that update the UI when their values change. When debugging signals,
|
|
||||||
you need to track their values, understand their dependencies, and identify why updates are or aren't happening.
|
|
||||||
`),
|
|
||||||
|
|
||||||
el("h4", t`Inspecting signal values`),
|
|
||||||
el("p").append(...T`
|
|
||||||
The simplest way to debug a signal is to log its current value by calling the get method:
|
|
||||||
`),
|
|
||||||
el("pre").append(
|
|
||||||
el("code", "const signal = S(0);\nconsole.log('Current value:', signal.get());")
|
|
||||||
),
|
|
||||||
el("p").append(...T`
|
|
||||||
You can also monitor signal changes by adding a listener:
|
|
||||||
`),
|
|
||||||
el("pre").append(
|
|
||||||
el("code", "// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));")
|
|
||||||
),
|
|
||||||
|
|
||||||
el("h4", t`Debugging derived signals`),
|
|
||||||
el("p").append(...T`
|
|
||||||
With derived signals (created with S(() => computation)), debugging is a bit more complex
|
|
||||||
because the value depends on other signals. To understand why a derived signal isn't updating correctly:
|
|
||||||
`),
|
|
||||||
el("ol").append(
|
|
||||||
el("li", t`Check that all dependency signals are updating correctly`),
|
|
||||||
el("li", t`Add logging inside the computation function to see when it runs`),
|
|
||||||
el("li", t`Verify that the computation function actually accesses the signal values with .get()`)
|
|
||||||
),
|
|
||||||
el(example, { src: fileURL("./components/examples/debugging/consoleLog.js"), page_id }),
|
|
||||||
|
|
||||||
el(h3, t`Common signal debugging issues`),
|
|
||||||
el("h4", t`Signal updates not triggering UI changes`),
|
|
||||||
el("p").append(...T`
|
|
||||||
If signal updates aren't reflected in the UI, check:
|
|
||||||
`),
|
|
||||||
el("ul").append(
|
|
||||||
el("li", t`That you're using signal.set() to update the value, not modifying objects/arrays directly`),
|
|
||||||
el("li", t`For mutable objects, ensure you're using actions or making proper copies before updating`),
|
|
||||||
el("li", t`That the signal is actually connected to the DOM element (check your S.el or attribute binding code)`)
|
|
||||||
),
|
|
||||||
el(code, { src: fileURL("./components/examples/debugging/mutations.js"), page_id }),
|
|
||||||
|
|
||||||
el("h4", t`Memory leaks with signal listeners`),
|
|
||||||
el("p").append(...T`
|
|
||||||
Signal listeners can cause memory leaks if not properly cleaned up. Always use AbortSignal
|
|
||||||
to cancel listeners.
|
|
||||||
`),
|
|
||||||
|
|
||||||
el("h4", t`Performance issues with frequently updating signals`),
|
|
||||||
el("p").append(...T`
|
|
||||||
If you notice performance issues with signals that update very frequently:
|
|
||||||
`),
|
|
||||||
el("ul").append(
|
|
||||||
el("li", t`Consider debouncing or throttling signal updates`),
|
|
||||||
el("li", t`Make sure derived signals don't perform expensive calculations unnecessarily`),
|
|
||||||
el("li", t`Keep signal computations focused and minimal`)
|
|
||||||
),
|
|
||||||
el(code, { src: fileURL("./components/examples/debugging/debouncing.js"), page_id }),
|
|
||||||
|
|
||||||
el(h3, t`Browser DevTools tips for deka-dom-el`),
|
|
||||||
el("p").append(...T`
|
|
||||||
When debugging in the browser, here are some helpful techniques:
|
|
||||||
`),
|
|
||||||
el("ul").append(
|
|
||||||
el("li").append(...T`
|
|
||||||
Use the Elements panel to inspect the DOM structure created by deka-dom-el
|
|
||||||
`),
|
|
||||||
el("li").append(...T`
|
|
||||||
Set breakpoints in your signal handlers and actions
|
|
||||||
`),
|
|
||||||
el("li").append(...T`
|
|
||||||
Use performance profiling to identify bottlenecks in signal updates
|
|
||||||
`),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
30
nohup.out
30
nohup.out
@ -1,30 +0,0 @@
|
|||||||
Markserv boot: starting Markserv...
|
|
||||||
(node:130669) [DEP0128] DeprecationWarning: Invalid 'main' field in '/home/jaandrle/.npm/_npx/13a70f167aa91a98/node_modules/implant/package.json' of 'implant'. Please either fix that or report it to the module author
|
|
||||||
(Use `node --trace-deprecation ...` to show where the warning was created)
|
|
||||||
(node:130669) [DEP0128] DeprecationWarning: Invalid 'main' field in '/home/jaandrle/.npm/_npx/13a70f167aa91a98/node_modules/balanced-pairs/package.json' of 'balanced-pairs'. Please either fix that or report it to the module author
|
|
||||||
(node:130669) [DEP0128] DeprecationWarning: Invalid 'main' field in '/home/jaandrle/.npm/_npx/13a70f167aa91a98/node_modules/super-split/package.json' of 'super-split'. Please either fix that or report it to the module author
|
|
||||||
Markserv address: http://localhost:8642
|
|
||||||
Markserv path: /home/jaandrle/Vzdálené/GitHub/deka-dom-el
|
|
||||||
Markserv livereload: communicating on port: 35729
|
|
||||||
Markserv process: your pid is: 130669
|
|
||||||
Markserv stop: press [Ctrl + C] or type "sudo kill -9 130669"
|
|
||||||
GitHub Contribute on Github - github.com/markserv
|
|
||||||
Markserv upgrade: checking for upgrade...
|
|
||||||
Markserv upgrade: no upgrade available
|
|
||||||
Markserv dir: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Could not find the language '~', did you forget to load/include a language module?
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Markserv markdown: /home/jaandrle/Vzdálené/GitHub/deka-dom-el/README.md
|
|
||||||
Loading…
x
Reference in New Issue
Block a user