使用 svelte 进行调试答案

【问题标题】：Debugging with svelte使用 svelte 进行调试
【发布时间】：2019-12-14 20:54:46
【问题描述】：

我正在尝试深入研究 Svelte 3 (v3.7.1)，它运行良好……在包含外部 CSS（引导程序）方面存在一些障碍。

但是，我似乎无法理解的一件事是在我的浏览器中调试苗条的应用程序

我发现一篇关于 svelte github 问题的帖子指出，我只需在代码中的某处包含 {@debug} 即可使浏览器在“那个点”中断，以便我可以调试和检查当前状态。

但是：这根本行不通。即使{@debug} 存在，即使我打开了开发人员工具也没有中断。

为了调试我的代码，我必须做什么？

编辑：我认为您需要了解我的设置

我使用一个 node/express 网络服务器，它作为来自 svelte 项目子文件夹的app.use(express.static('svelteclient/public')) 为已编译的 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>

Chrome 版本为 75.0.3770.142

【问题讨论】：

确保使用dev: true进行编译，否则{@debug ...}标签将被删除
如果你的意思是 dev: true in rollup.config.js -> plugins -> svelte() ...它不起作用。但是我找到了一种方法……只需npm run dev 然后立即停止实时重载服务器
dev: true 如果您还阻止 terser() 插件运行，则可以使用
使用 svelte-watch，它允许使用 redux devtools 监控组件状态

标签： svelte

【解决方案1】：

{@debug} 是一个template syntax，可用作console.log 的替代品。

你可以把它放在你的html代码中，然后打开浏览器的devtools。

如果您的组件在devtools 处于打开状态时通过@debug 语句，它将自动暂停执行。

编辑

如果你有这个苗条的代码

<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');

debugger 语句在 Chrome 76 和 Firefox Quantum 68 中停止脚本执行

【讨论】：

不，不会……这就是我所做的和我的想法，但它不会就此停止
你的浏览器是什么？因为它在 Chrome 和 Firefox 中运行良好
我有 Google Chrome 75.0.3770.142 ...在我的最新编辑中查看我的代码
我正在使用 Chrome，转到新标签页，打开您的开发工具，使用您自己的代码转到 this link。因为调试器正在为我暂停执行。
是的，调试语句可能不包含在构建版本中。将 console.logs 留在生产应用程序中通常是不受欢迎的，因此 svelte 编译器正在废弃它们是有道理的。

【解决方案2】：

{@debug} 语句仅在您调试的变量发生更改时触发断点。文档在最后一段中暗示了这一点，“没有任何参数的 {@debug} 标记将插入一个调试器语句，该语句在任何状态更改时触发，而不是指定的变量。” （见https://svelte.dev/docs#debug）

以下代码在 3 秒后停在断点处。

<script>
  let name = 'world';

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

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

可以在https://svelte.dev/repl/761771bd8eb9462796bba3373dfa46c7?version=3.7.1看到一个工作示例

【讨论】：

哦，没关系，它也会在页面第一次呈现时触发。如果这对您不起作用，请提供有关您的浏览器、版本以及理想情况下的代码示例的更多详细信息。

【解决方案3】：

感谢您的所有好提示

问题是：在为生产进行编译时，每个 debugger 语句都会从生成的 bundle.js 中删除

解决方案：改为npm run dev，然后立即停止实时重新加载服务器，以避免有关 socket.io 的奇怪 URL 组合

编辑：另一种解决方案：

在运行npm run build之前更改rollup.config.js：

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

【讨论】：