Blockly 中文文档

# 使用 Blockly 和 blockly-samples 进行调试

有时，在 blockly-samples 中开发插件时，您需要在 Blockly 本身中进行相应更改。大多数插件都设置为从 npm 注册表中提取 Blockly 资源，因此您只能使用已在 npm 上发布的代码。这会使得调试您的 Blockly 更改变得困难。如果您想要同时在 blockly 和 blockly-samples 中进行测试和测试更改，则可以使用以下任一方法将未发布的更改结合使用。

您可以指示 npm 使用计算机上的软件包，而不是从 npm 注册表中提取软件包。使用此方法，您应该能够访问 sourcemap 以便更容易地调试 lockly_compressed。您可以将此方法用于尚未推送到 GitHub 的核心更改。

  1. 在你的 blockly 复刻版本中：

    $ npm run package
$ cd dist
$ npm link

    以下步骤用于构建核心 Blockly，将其打包，然后创建指向所打包后文件的软链接。

  2. 在你的 blockly-samples 复刻版本中：

    $ npm link blockly

    此步骤指示 npm 查找您之前创建的软链接，而不是从 npm 中提取软件包。

  3. npm run start 来测试您的插件。

在核心中进行更改时，您必须重新构建并重新打包它。

# 方法 2：从 GitHub 提取

您可以指示 npm 从 GitHub（而非 npm 注册表）提取软件包。使用此方法，您应该可以访问 sourcemap 以便能够更轻松地调试 blockly_compress。您必须使用已在 GitHub 上某个位置发布的 Blockly 版本。

  1. 确保插件的 package.json 中的 scripts 部分包含以下各项：

    "postinstall": "blockly-scripts postinstall"

    此脚本将在后续步骤中从 GitHub 安装后自动构建 Blockly。

  2. 请提供 git 地址和分支名称，而不是在 package.json 中针对 block 提供版本号：

    "blockly": "git://github.com/google/blockly.git#develop"

    如果您有未合并的更改，也可以链接您自己的 blockly 复刻版本。

  3. 与平时一样 npm install

  4. npm run start，用于测试您的插件

在核心 Blockly 中进行更改时，您必须将更改推送到指定分支的 GitHub 中。此外，如果您希望 npm 从 GitHub 提取新版本，则必须 npm uninstall blockly（或从 node_modules 中移除此版本），然后按照上述说明重新安装它。

# 方法 3：进阶训练场

您可以使用进阶训练场（在核心 Blockly 中）来调试插件。 使用此方法时，您将使用 blockly_uncompressed，这可能会更便于调试，因为您不依赖于 sourcemaps。如果您在使用 sourcemaps 进行调试时遇到问题，或者想使用进阶训练场的功能测试插件，请使用此方法。

  1. 在 blockly-samples 的插件目录中：

    $ npm run build
$ cd dist
$ pwd

    这会构建并打包您的插件。然后，它会输出插件的 dist 目录的完整目录路径。复制此路径；我们将在下一步中使用此路径。

  2. 在 blockly 的 advanced_playground.html 中：

    <script src="$PATH_TO_DIST_DIR/index.js">

    然后，您还需要对插件进行所需的设置。例如，您可能需要在 options 对象中指定某些值。请在现有工作区设置中进行此设置。

  3. 在浏览器中打开进阶训练场以测试您的插件。

对 blockly 做出更改后，您只需刷新即可。更改插件时，您需要重新运行 npm run build。

← 编写 Codelab →