Debug plugins

  • When developing a plugin in blockly-samples that requires changes in Blockly, you can use npm link to test unreleased Blockly code alongside your plugin changes.

  • npm link allows you to tell npm to use a package from your local machine instead of fetching it from the npm registry.

  • The process involves packaging your local Blockly changes, creating a symlink to the packaged files, and then linking blockly-samples to this symlink.

  • After making changes in core Blockly, you need to rebuild and repackage it to see the updates in blockly-samples.

  • To reset your blockly-samples repository after testing, run npm ci at the root level.

Sometimes when developing a plugin in blockly-samples, you'll need to make corresponding changes in Blockly itself. Most plugins are set up to fetch Blockly from the npm registry, so you'd only be able to use code that has already been released on npm. This would make debugging your Blockly changes difficult. When you want to make and test changes in both blockly and blockly- samples, you can use npm link to test your unreleased changes together.

You can tell npm to use a package from your machine instead of fetching the package from the npm registry. Using this method, you should have access to sourcemaps that make debugging blockly easier. You can use this method with changes in core that haven't yet been pushed to GitHub.

  1. In your fork of blockly:

    $ npm run package
$ cd dist
$ npm link

    These steps build core Blockly, package it, then create a symlink to the packaged files.

  2. In your fork of blockly-samples, at root:

    $ npm link blockly

    This step tells npm to look for the symlink you created earlier instead of fetching the package from npm.

  3. npm run start from the plugin's directory to test your plugin.

When you make changes in core, you'll have to rebuild and repackage it.

When you're finished testing, run npm ci at the root level of blockly-samples to reset the state of your repository.