svelte를 사용한 디버깅

svelte를 사용한 디버깅

저는 Svelte 3(v3.7.1)에 대해 알아보고 있는데, 외부 CSS(부트스트랩)를 포함할 때 몇 가지 걸림돌이 있지만 잘 작동합니다.

하지만 그럼에도 불구하고, 내가 내 머리를 감을 수 없는 것처럼 보이는 한 가지는 내 브라우저에서 svelte 앱을 디버깅하는 것이다

나는 현재 상태를 디버깅하고 검사할 수 있도록 "그 시점"에서 브라우저가 깨지도록 하기 위해 내 코드에 어딘가를 포함하면 된다고 명시된 게시물을 발견했다.

하지만: 이것은 전혀 효과가 없습니다. 가 있어도 개발자 툴을 열어놔도 고장이 없습니다.

내 코드를 디버깅하려면 어떻게 해야 합니까?

편집: 제 설정에 대해 알아야 할 것 같아서요

나는 컴파일된 svelte 클라이언트를 svelte 프로젝트의 하위 폴더에서 서비스하는 노드/익스프레스 웹 서버를 사용한다.

코드 발췌:

<script>

   import { onMount } from 'svelte';

   let searches = ["angular", "deno", "svelte", "stencil"];
   let tweets = {};

   let currentImage = null;
   let currentYTUrl = "";

   for(let search of searches) {
      tweets[search] = [];
   }

   let socket = io();

   let modal = null;
   let ytmodal = null;

   onMount(() => {
      modal = UIkit.modal('#mymodal');
      ytmodal = UIkit.modal('#myytmodal');
   });

...
</script>

<style>
   .uk-panel-badge .uk-badge {
      cursor: pointer;
   }
</style>

{@debug}


<div class="uk-grid" data-uk-grid-margin>
   {#each searches as search}
   <div class={'uk-width-medium-1-' + searches.length}>
      ...
   </div>
   {/each}
</div>

크롬 버전은 75.0.3770.142입니다

---

의 대안으로 를 사용할 수 있습니다.

HTML 코드에 저장한 다음 브라우저의 를 열 수 있습니다.

열려 있는 동안 구성 요소가 문을 통과하면 자동으로 실행이 일시 중지됩니다.

편집하다

만약 당신이 이 벨벳 코드를 가지고 있다면

<script>
    let name = 'world';
</script>

{@debug name}

<h1>Hello {name}!</h1>

로 컴파일 될 것이다

// more code
c: function create() {
    {
        const {  } = ctx;
        console.log({ name }); // <-- Note those 2 lines
        debugger; // <-- corresponding to the @debug statement
    }

    t0 = space();
    h1 = element("h1");
    t1 = text("Hello ");
    t2 = text(name);
    t3 = text("!");
    add_location(h1, file, 6, 0, 56);
}
// more code

구성 요소가 렌더링될 때마다 실행됩니다. 처음도 포함해서. 해당 값 변경이 새 렌더를 트리거하지 않는 경우 값 변경에 바인딩되지 않습니다.

콘솔 로그를 값 변경에 바인딩하려면 스크립트에서 를 사용해야 합니다

$: console.log(name);

또는

$: value, console.log('value has been updated');

명령문은 Chrome 76과 Firefox Quantum 68 모두에서 스크립트 실행을 중지합니다

---

문은 디버그하는 변수가 변경될 때만 중단점을 트리거합니다. 이 문서는 마지막 단락에서 "인수가 없는 {@debug} 태그는 지정된 변수와 반대로 상태가 변경될 때 트리거되는 디버거 문을 삽입합니다."( 참조)를 암시합니다

다음 코드는 3초 후 중단점에서 중지됩니다.

<script>
  let name = 'world';

  setTimeout(() => {
    name = 'moon';
  }, 3000)
</script>

{@debug name}
<h1>Hello {name}!</h1>

다음에서 작업 예를 볼 수 있습니다

---

좋은 힌트를 주셔서 감사합니다

문제는 다음과 같았다: 프로덕션을 위해 컴파일할 때 모든 문은 결과 번들에서 제거됩니다.js

해결책: 소켓과 관련된 이상한 URL 구성을 방지하기 위해 대신 라이브 다시 로드 서버를 즉시 중지합니다.이오

편집: 다른 솔루션:

다음을 실행하기 전에 rollup.config.js를 변경하십시오:

    plugins: [
        svelte({
            // Always enable run-time checks
            dev: true,
            ...
        }),
        ...
        // NOT use terser, otherwise debugger will be stripped!
        //production && terser()

---

또한 다음과 같은 작업을 수행할 수 있는 를 추천합니다:

• 구성 요소 및 템플릿 로직 찾아보기
• 소품, 국가, 상점을 시찰하다
• 상태를 직접 수정하다

두 가지 모두에 사용 가능

• 크롬
• 파이어폭스