mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-11-03 22:59:16 +01:00
🐛 wrong file(s) in git
This commit is contained in:
@@ -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
|
||||
Reference in New Issue
Block a user