View stepping in Scratch editor

_scratch-view-stepping.user.js

// ==UserScript==
// @name         Scratch - view stepping
// @namespace    none
// @version      1.1
// @description  Allows you to see which block currently executes in the Scratch editor (scratch.mit.edu), which is useful for debugging.
// @author       BoomerScratch
// @match        https://scratch.mit.edu/projects/*
// @grant        none
// @run-at       document-start
// @homepageURL  https://gist.github.com/BoomerScratch/0592337050810244236d69a4267b3913
// @updateURL    https://gist.github.com/BoomerScratch/0592337050810244236d69a4267b3913/raw/_scratch-view-stepping.user.js
// @supportURL   https://gist.github.com/BoomerScratch/0592337050810244236d69a4267b3913#comments
// @icon         https://assets.scratch.mit.edu/fd9d90c75dfe08688b24557dce006800.svg
// ==/UserScript==

(function() {
    'use strict';

    document.head.appendChild(document.createElement("script")).innerHTML = `
const findVM = () => new Promise(resolve => {
    const oldBind = Function.prototype.bind;
    Function.prototype.bind = function(...args) {
        if (args[0] && args[0].hasOwnProperty('editingTarget') && args[0].hasOwnProperty('runtime')) {
            Function.prototype.bind = oldBind;
            resolve(args[0]);
        }
        return oldBind.apply(this, args);
    };
});
findVM().then(vm => {
    virtualMachine = vm;
    setInterval(() => {
        Array.prototype.forEach.call(document.querySelectorAll("path[style*='outline' i]"),e=>e.removeAttribute("style"));
        virtualMachine.runtime.threads.forEach(thread=>{
            thread.stack.forEach(e=>{
                try {
                var next = thread.target.blocks.getNextBlock(e);
                var blocklyBlock = Blockly.getMainWorkspace().getAllBlocks().find(e=>e.id===next);
                if (blocklyBlock) {
                    blocklyBlock.parentBlock_.svgPath_.style.outline = "5px solid blue";
                };
            } catch {
                // If an error occurs, it probably means the user isn't in the blocks area, or the block has no child/parent.
                // We can silence this error, because it's not important.
            };
            });
        });
    });
});
`;
})();

documentation.md

Scratch view stepping

This userscript allows you to see the blocks which currently execute in the Scratch editor (scratch.mit.edu). They will get a blue outline.

It is useful for debugging.

To use this, click the "Raw" button above the JS file (to install), create or open a project on scratch.mit.edu, click the green flag, and see it in action!