diff --git a/localtypings/pxtparts.d.ts b/localtypings/pxtparts.d.ts
index b4989cce3bb2..fc0ad0bc4d68 100644
--- a/localtypings/pxtparts.d.ts
+++ b/localtypings/pxtparts.d.ts
@@ -183,6 +183,7 @@ declare namespace pxsim {
         breakpointId: number;
         globals: Variables;
         environmentGlobals?: Variables;
+        energyVars?: Variables;
         stackframes: StackFrameInfo[];
         exceptionMessage?: string;
         exceptionStack?: string;
diff --git a/pxtcompiler/emitter/backjs.ts b/pxtcompiler/emitter/backjs.ts
index 99dd5600138d..6523533321b9 100644
--- a/pxtcompiler/emitter/backjs.ts
+++ b/pxtcompiler/emitter/backjs.ts
@@ -149,7 +149,7 @@ namespace ts.pxtc {
         jsheader += `const pxtrt = pxsim.pxtrt;\n`
 
         jsheader += `let yieldSteps = 1;\n`
-        jsheader += `ectx.setupYield(function() { yieldSteps = 100; })\n`
+        jsheader += `ectx.setupYield(function() { yieldSteps = 1; })\n`
 
         let jssource = "pxsim.setTitle(" + JSON.stringify(bin.getTitle()) + ");\n"
         let cfg: pxt.Map<number> = {}
diff --git a/pxtsim/debugger.ts b/pxtsim/debugger.ts
index f512cf023030..338ce3104d5b 100644
--- a/pxtsim/debugger.ts
+++ b/pxtsim/debugger.ts
@@ -192,6 +192,19 @@ namespace pxsim {
         return stackFrame.retval;
     }
 
+    export function injectEnergyVariables(msg: DebuggerBreakpointMessage, heap: Map<any>, board: BaseBoard) {
+        const dalVars = board.getBoardVariables()
+        const keys = Object.keys(dalVars);
+        if (!keys.length)
+            return;
+
+        const energyVars: Variables = msg.energyVars = {};
+        Object.keys(dalVars)
+            .forEach(n => energyVars[n] = valToJSON(dalVars[n], heap))
+        // Possible future sources of energy variables:
+        // 2. from runtime
+    }
+
     export function injectEnvironmentGlobals(msg: DebuggerBreakpointMessage, heap: Map<any>) {
         const environmentGlobals = runtime.environmentGlobals;
         const keys = Object.keys(environmentGlobals);
diff --git a/pxtsim/runtime.ts b/pxtsim/runtime.ts
index 97d486c9ae34..8ff93441492f 100644
--- a/pxtsim/runtime.ts
+++ b/pxtsim/runtime.ts
@@ -431,6 +431,17 @@ namespace pxsim {
             this.bus = new pxsim.EventBus(runtime, this);
         }
 
+        public setBoardVariable(name: string, value: number) {
+        }
+
+        public getBoardVariables(): pxsim.Variables {
+            return {}
+        }
+
+        public onEveryYield () {
+
+        }
+
         public updateView() { }
         public receiveMessage(msg: SimulatorMessage) {
             if (!runtime || runtime.dead) return;
@@ -1284,14 +1295,14 @@ namespace pxsim {
                 __this.cleanScheduledExpired()
                 yieldReset();
                 let now = Date.now()
-                if (now - lastYield >= 20) {
+                //if (now - lastYield >= 20) {
                     lastYield = now
                     s.pc = pc;
                     s.r0 = r0;
-                    setTimeout(loopForSchedule(s), yieldDelay)
+                    setTimeout(loopForSchedule(s), 2)
                     return true
-                }
-                return false
+                //}
+                //return false
             }
 
             function setupDebugger(numBreakpoints: number, userCodeGlobals?: string[]) {
@@ -1322,6 +1333,7 @@ namespace pxsim {
                 const { msg, heap } = getBreakpointMsg(s, brkId, userGlobals);
                 dbgHeap = heap;
                 injectEnvironmentGlobals(msg, heap);
+                injectEnergyVariables(msg, heap, __this.board);
                 Runtime.postMessage(msg)
                 breakpoints[0] = 0;
                 breakFrame = null;
@@ -1447,6 +1459,7 @@ namespace pxsim {
                         __this.currFrame = p;
                         __this.currFrame.overwrittenPC = false;
                         p = p.fn(p)
+                        __this.board.onEveryYield()
                         //if (yieldSteps-- < 0 && maybeYield(p, p.pc, 0)) break;
                         __this.maybeUpdateDisplay()
                         if (__this.currFrame.overwrittenPC)
@@ -1464,7 +1477,8 @@ namespace pxsim {
                     else {
                         pxsim.error("Simulator crashed, no error handler", e.stack)
                         const { msg, heap } = getBreakpointMsg(p, p.lastBrkId, userGlobals)
-                        injectEnvironmentGlobals(msg, heap);
+                        injectEnergyVariables(msg,heap,__this.board)
+                        injectEnvironmentGlobals(msg, heap)
                         msg.exceptionMessage = e.message
                         msg.exceptionStack = e.stack
                         Runtime.postMessage(msg)
diff --git a/webapp/src/debuggerVariables.tsx b/webapp/src/debuggerVariables.tsx
index a17c9c9937b5..1b08c60954b4 100644
--- a/webapp/src/debuggerVariables.tsx
+++ b/webapp/src/debuggerVariables.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import * as data from "./data";
 import * as simulator from "./simulator";
 import { DebuggerTable, DebuggerTableRow } from "./debuggerTable";
+import { EnergyMeter } from "./energyMeter";
 
 const MAX_VARIABLE_LENGTH = 20;
 
@@ -35,6 +36,7 @@ interface DebuggerVariablesProps {
 }
 
 interface DebuggerVariablesState {
+    energyFrame: ScopeVariables;
     globalFrame: ScopeVariables;
     stackFrames: ScopeVariables[];
     nextID: number;
@@ -49,6 +51,10 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
     constructor(props: DebuggerVariablesProps) {
         super(props);
         this.state = {
+            energyFrame: {
+                title: lf("Energy"),
+                variables: []
+            },
             globalFrame: {
                 title: lf("Globals"),
                 variables: []
@@ -62,6 +68,10 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
 
     clear() {
         this.setState({
+            energyFrame: {
+                title: this.state.energyFrame.title,
+                variables: []
+            },
             globalFrame: {
                 title: this.state.globalFrame.title,
                 variables: []
@@ -87,10 +97,11 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
     }
 
     renderCore() {
-        const { globalFrame, stackFrames, frozen, preview } = this.state;
+        const { energyFrame, globalFrame, stackFrames, frozen, preview } = this.state;
         const { activeFrame, breakpoint } = this.props;
+        const energyTableHeader = lf("Energy");
         const variableTableHeader = lf("Variables");
-        let variables = globalFrame.variables;
+        let variables = globalFrame.variables
 
         // Add in the local variables.
         // TODO: Handle callstack
@@ -99,15 +110,22 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
         }
 
         let placeholderText: string;
+        let energyPlaceholderText: string;
 
         if (frozen) {
             placeholderText = lf("Code is running...");
+            energyPlaceholderText = lf("Code is running...");
         }
         else if (!variables.length && !breakpoint?.exceptionMessage) {
             placeholderText = lf("No variables to show");
         }
+        if (!frozen && !energyFrame.variables.length && !breakpoint?.exceptionMessage) {
+            energyPlaceholderText = lf("No energy variables to show");
+        }
+
 
         const tableRows = placeholderText ? [] : this.renderVars(variables);
+        const energyTableRows = energyPlaceholderText ? [] : this.renderVars(energyFrame.variables)
 
         if (breakpoint?.exceptionMessage && !frozen) {
             tableRows.unshift(<DebuggerTableRow
@@ -123,6 +141,10 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
         const previewLabel = previewVar && lf("Current value for '{0}'", previewVar.name);
 
         return <div>
+            <EnergyMeter readings={[95, 60, 20]} maxReading={100} />
+            <DebuggerTable header={energyTableHeader} placeholderText={energyPlaceholderText}>
+                {energyTableRows}
+            </DebuggerTable>
             <DebuggerTable header={variableTableHeader} placeholderText={placeholderText}>
                 {tableRows}
             </DebuggerTable>
@@ -176,8 +198,8 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
         breakpoint: pxsim.DebuggerBreakpointMessage,
         filters?: string[]
     ) {
-        const { globals, environmentGlobals, stackframes } = breakpoint;
-        if (!globals && !environmentGlobals) {
+        const { energyVars, globals, environmentGlobals, stackframes } = breakpoint;
+        if (!energyVars && !globals && !environmentGlobals) {
             // freeze the ui
             this.update(true)
             return;
@@ -194,6 +216,8 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
             updatedGlobals.variables = updatedGlobals.variables.concat(variablesToVariableList(environmentGlobals));
 
         assignVarIds(updatedGlobals.variables);
+        const updatedEnergyVars = updateScope(this.state.energyFrame, energyVars);
+        assignVarIds(updatedEnergyVars.variables);
 
         let updatedFrames: ScopeVariables[];
         if (stackframes) {
@@ -213,6 +237,7 @@ export class DebuggerVariables extends data.Component<DebuggerVariablesProps, De
         }
 
         this.setState({
+            energyFrame: updatedEnergyVars,
             globalFrame: updatedGlobals,
             stackFrames: updatedFrames || [],
             nextID: nextId,
diff --git a/webapp/src/energyMeter.tsx b/webapp/src/energyMeter.tsx
new file mode 100644
index 000000000000..ef2442e147c7
--- /dev/null
+++ b/webapp/src/energyMeter.tsx
@@ -0,0 +1,36 @@
+// simple react component to display energy meter readings as a bar chart with color coding
+
+import * as React from "react";
+
+export interface EnergyMeterProps {
+    readings: number[]; // array of energy readings
+    maxReading: number; // maximum possible reading for scaling
+}
+
+export class EnergyMeter extends React.Component<EnergyMeterProps> {
+    render() {
+        const { readings, maxReading } = this.props;
+        const barHeight = 20;
+        const barSpacing = 5;
+
+        return (
+            <svg width="100" height={(barHeight + barSpacing) * readings.length}>
+                {readings.map((reading, index) => {
+                    const width = (reading / maxReading) * 100;
+                    const color = reading > maxReading * 0.8 ? 'green' :
+                                  reading > maxReading * 0.5 ? 'orange' : 'red';
+                    return (
+                        <rect
+                            key={index}
+                            x={0}
+                            y={index * (barHeight + barSpacing)}
+                            width={width}
+                            height={barHeight}
+                            fill={color}
+                        />
+                    );
+                })}
+            </svg>
+        );
+    }
+}
\ No newline at end of file