HUD Tutorial - Break Task

[Tim Davis]

I'm not able to complete the Break Task of the HUD tutorial.

I'm using ZAP 2.15.0 and Chrome 125.0.6422.77 (Official Build) (64-bit).

When I click the 'break' tool the button changes to red, but when I click the Submit button it's not breaking.

In the F12 Developer Tools console, there are several errors (see below).

Am I not following the tutorial correctly or is this an incompatibility between the ZAP HUD Tutorial and the latest version of Chrome?

Thank you,

Tim

vue.js:5110 [Vue warn]: Property or method "$" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BreakWebsocketMessageModal>
       <Root>
warn$2 @ vue.js:5110
warnNonPresent_1 @ vue.js:658
has @ vue.js:697
eval @ VM7831:3
(anonymous) @ vue.js:2507
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
init @ vue.js:4912
createComponent @ vue.js:6582
createElm @ vue.js:6536
createChildren @ vue.js:6655
createElm @ vue.js:6559
patch @ vue.js:7122
(anonymous) @ vue.js:2942
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
(anonymous) @ vue.js:4726
Vue @ vue.js:5776
(anonymous) @ display.js:886
vue.js:5110 [Vue warn]: Error in render: "TypeError: $ is not a function"

found in

---> <BreakWebsocketMessageModal>
       <Root>
warn$2 @ vue.js:5110
logError @ vue.js:3730
globalHandleError @ vue.js:3726
handleError @ vue.js:3693
(anonymous) @ vue.js:2510
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
init @ vue.js:4912
createComponent @ vue.js:6582
createElm @ vue.js:6536
createChildren @ vue.js:6655
createElm @ vue.js:6559
patch @ vue.js:7122
(anonymous) @ vue.js:2942
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
(anonymous) @ vue.js:4726
Vue @ vue.js:5776
(anonymous) @ display.js:886
vue.js:3734 TypeError: $ is not a function
    at Proxy.eval (eval at createFunction (vue.js:11637:18), <anonymous>:3:175)
    at VueComponent._render (vue.js:2507:30)
    at VueComponent.updateComponent (vue.js:3052:29)
    at Watcher.get (vue.js:4180:35)
    at new Watcher (vue.js:4170:53)
    at mountComponent (vue.js:3069:7)
    at VueComponent.<anonymous> (vue.js:9316:14)
    at VueComponent.$mount (vue.js:11875:20)
    at init (vue.js:4912:21)
    at createComponent (vue.js:6582:19)
logError @ vue.js:3734
globalHandleError @ vue.js:3726
handleError @ vue.js:3693
(anonymous) @ vue.js:2510
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
init @ vue.js:4912
createComponent @ vue.js:6582
createElm @ vue.js:6536
createChildren @ vue.js:6655
createElm @ vue.js:6559
patch @ vue.js:7122
(anonymous) @ vue.js:2942
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
(anonymous) @ vue.js:4726
Vue @ vue.js:5776
(anonymous) @ display.js:886
8vue.js:5110 [Vue warn]: Property or method "label" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <HudButtons>
       <Root>
warn$2 @ vue.js:5110
warnNonPresent_1 @ vue.js:658
has @ vue.js:697
eval @ VM7332:3
renderList @ vue.js:1859
eval @ VM7332:3
(anonymous) @ vue.js:2507
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
(anonymous) @ vue.js:4256
flushSchedulerQueue @ vue.js:3302
(anonymous) @ vue.js:3828
flushCallbacks @ vue.js:3750
Promise.then (async)
timerFunc @ vue.js:3775
nextTick @ vue.js:3840
queueWatcher @ vue.js:3388
(anonymous) @ vue.js:4247
(anonymous) @ vue.js:811
reactiveSetter @ vue.js:1039
proxySetter @ vue.js:4325
(anonymous) @ panel.js:158
Promise.then (async)
created @ panel.js:157
invokeWithErrorHandling @ vue.js:3702
callHook$1 @ vue.js:3209
(anonymous) @ vue.js:4718
VueComponent @ vue.js:5840
createComponentInstanceForVnode @ vue.js:5049
init @ vue.js:4911
createComponent @ vue.js:6582
createElm @ vue.js:6536
createChildren @ vue.js:6655
createElm @ vue.js:6559
patch @ vue.js:7122
(anonymous) @ vue.js:2942
updateComponent @ vue.js:3052
(anonymous) @ vue.js:4180
Watcher @ vue.js:4170
mountComponent @ vue.js:3069
(anonymous) @ vue.js:9316
(anonymous) @ vue.js:11875
(anonymous) @ vue.js:4726
Vue @ vue.js:5776
(anonymous) @ panel.js:215
management.js:87 Time (ms) to load UI: 488969
9vue.js:5110 [Vue warn]: Property or method "label" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <HudButtons>
       <Root>

[Simon Bennetts]

The HUD break functionality does appear to be broken :(

We do not currently have anyone maintaining the HUD, but we will try to look at this before too long...

Cheers,

Simon