Skip to content

bettter inspect.trace when effect call function and track state in this function #16669

@sunflower-knight

Description

@sunflower-knight

Describe the problem

code 1

<script>
  let num = $state(0);
	let count = $state(1)

  function treebleValue() {
    return count * 3;
  }

  $effect(() => {
    $inspect.trace('Effect Trace num + state in treebleValue ');
		num; //track 
		let treebleCount  = treebleValue();
  });
	
</script>

<button onclick={()=>{num++}}>num: {num}</button>
<button onclick={()=>{count++}}>count : {count}</button>

In the first code in playground , you can see effect track num directly and track count in function ; So num and count will be trace together with inspect.trace

Image

But you can see another code , if i add inspect.trac in Function called in effect , there will be two part log in console

code 2

<script>
  let num = $state(0);
	let count = $state(1)

  function treebleValue() {
    $inspect.trace('Function Trace - count');
    return count * 3;
  }

  $effect(() => {
    $inspect.trace('Effect Trace num + state in treebleValue ');
		num; //track 
		let treebleCount  = treebleValue();
  });
	
</script>

<button onclick={()=>{num++}}>num: {num}</button>
<button onclick={()=>{count++}}>count : {count}</button>
Image

Describe the proposed solution

But I want to show the log in a better way ; Function will be called in different effect ; so it will be better to show the effect who call this Function; And use nest style in log will be better

Image

Importance

would make my life easier

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions