# Debugger/Oservable issue?

**URL:** https://talk.observablehq.com/t/debugger-oservable-issue/8935
**Category:** Help
**Created:** [March 16, 2024, 6:49pm UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935 "2024-03-16T18:49:11Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![CarlosLagarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/carloslagarto/32/8619_2.png) [@CarlosLagarto](https://talk.observablehq.com/u/CarlosLagarto)
#### Post date: [March 16, 2024, 6:49pm UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935/1 "2024-03-16T18:49:11Z")

</div>

Hi,

Does any one experienced issues with the chrome debugger?

I am working with observable platform, in dev mode, and without the debugger the input button click event works ok, but when I activate the debugger (dev tools) it stops working…worst…it seems that sometimes it works and other times don’t…

I may be doing something wrong or stupid 🙂 but I can’t find the why (nor the pattern) so trying to see if some else had the same issue, and if so, how to solve it 🙂

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [March 16, 2024, 7:57pm UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935/2 "2024-03-16T19:57:23Z")

</div>

Please provide more details, like

- What are the exact steps that you follow and that don’t work for you? What behavior do you expect?
- How do you activate the debugger? Are you setting breakpoints or using a `debugger` statement?
- Do you continue or abort script execution?

---

<div class="post-metadata">

### Author: ![CarlosLagarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/carloslagarto/32/8619_2.png) [@CarlosLagarto](https://talk.observablehq.com/u/CarlosLagarto)
#### Post date: [March 16, 2024, 9:29pm UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935/3 "2024-03-16T21:29:14Z")

</div>

Thanks for the reply. I will post the code to show.

But the idea is simple. You have a button and expect it to respond to the mouse click.

That’s not happening when the iterative debugger is activated. (Chrome elipse-\>“More Tools”-\>“Developer Tools”

I setted breakpoints but the onclick function is not called, so it never breaks there.

But as I said, without the debugger the thing works 🙂

---

<div class="post-metadata">

### Author: ![CarlosLagarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/carloslagarto/32/8619_2.png) [@CarlosLagarto](https://talk.observablehq.com/u/CarlosLagarto)
#### Post date: [March 17, 2024, 8:46am UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935/4 "2024-03-17T08:46:42Z")

</div>

Well, while building a minimal example to show the issue, I found that it is a bug.

> <https://github.com/observablehq/feedback/issues/625>
>
> The button input stops responding with certain conditions, as the minimal exampl…e bellow.
> 
> \*\*To Reproduce\*\*
> 1. make a test page in the observable platform dev environment (code bellow).
> 2. run the page
> 3. without the browser debugger the test page reacts ok
> 4. activate the browser debugger (browser elipse-\>more tools-\>developer tools)
> 5. now the buttons shouldn't react
> 
> \*\*Expected behavior\*\*
> The buttons were supposed to react in debugger mode
> 
> \*\*Desktop (please complete the following information):\*\*
> - OS: Ubuntu Linux desktop (Ubuntu 22.04.4 LTS)
> - Browser chrome Version 122.0.6261.128 (Official Build) (64-bit)
> 
> \*\*Additional context\*\*
> Minimal example to reproduce...at least on my configuration :-)
> 
> \`\`\`
> \---
> title: test Example
> \# toc: false
> \# pager: false
> \# footer: false
> \# theme: "dashboard"
> \---
> Test
> \`\`\`
>  
> \`\`\`js
> 
> 
> const defaultInput = v =\> html.fragment\`\<input style="width: 100%;" type="text" value="${v}" /\>\`;
> const datetimeInput = v =\> html.fragment\`\<input style="width: 100%;" type="datetime-local" value="${v}" /\>\`;
> const selectInput = v =\> html.fragment\`\<select\>
> ${html.fragment\`\<option value="Option1" selected=${v==="Option1"}\>Option1\</option\>\`}
> ${html.fragment\`\<option value="Option2" selected=${v==="Option2"}\>Option2\</option\>\</select\>\`}\`;
> 
> const row\_values = \[\];
> const mut\_values= Mutable(row\_values);
> 
> function listInput (
> { 
> columns = \[
> { 
> name : "Col1",
> input : defaultInput,   
> value : null, 
> min\_width: "80px",
> defaultValue : 'value1'
> },
> { 
> name : "Col2",
> input : defaultInput,   
> value : null, 
> min\_width: "200px",
> defaultValue : 'value2'
> },
> { 
> name : "Col3",
> input : defaultInput,   
> value : null, 
> min\_width: "50px",
> defaultValue : '1.0'
> },
> { 
> name : "Col4",
> input : selectInput,   
> value : null, 
> min\_width: "50px",
> defaultValue : 'Buy'
> },
> { 
> name : "Date",
> input : datetimeInput,   
> value : null, 
> min\_width: "200px",
> defaultValue : '2023-01-02T01:00:00'
> }
> \],
> cfg = {
> min : 0,
> max : 0,  
> }
> } = {}) {
>    
> // This is a state variable that we will change as events occur on the input
> // let row\_values = \[\];
> mut\_values.value.push(columns.map((row) =\> { return { 
> value: row.value !== null ? row.value : row.defaultValue, 
> name: row.name
> }}));
>   
> // Templates
> const inputRow = (row, i) =\> html.fragment\`
> \<tr\>
> ${row.map( (col, j) =\> html.fragment\`\<td onchange=${e =\> changeValueAt(i, j, e.target.value)}\>${columns\[j\].input(col.value)}\</td\>\`)}
> \<td\>
> \<button onclick=${e =\> removeRow(i)}\>&times;\</button\>
> \</td\>
> \</tr\>\`
> 
> const headerRow = () =\> html.fragment\`\<tr\>
> ${columns.map((col) =\> html.fragment\`\<th style="width:${col.min\_width};"\>${col.name}\</th\>\`)}
> \<td\>
> \<button onclick=${addRow}\>+\</button\>
> \</td\>
> \</tr\>\`
>    
> // Rerender Helpers
> const rerenderTbody = () =\> {
> const tbody = output.querySelector('tbody')
> tbody.innerHTML = ''
> tbody.appendChild(html.fragment\`${mut\_values.value.map(inputRow)}\`)
> }
>   
> const rerenderTheader = () =\> {
> const theader = output.querySelector('thead')
> theader.innerHTML = ''
> theader.appendChild(headerRow())    
> }
> 
> const rerender = () =\> {
> rerenderTheader()
> rerenderTbody()
> }
> 
> // Event Dispatcher
> const dispatchInputEvent = () =\> {
> output.value = mut\_values
> output.dispatchEvent(new CustomEvent('input'))
> }
>   
> // Event Handlers
> const addRow = () =\> {
> mut\_values.value.push(columns.map((row) =\> { return { 
> value: row.value !== null ? row.value : row.defaultValue,
> name: row.name,
> }}));
> rerender()
> dispatchInputEvent()
> }
>   
> const removeRow = removeIdx =\> {
> mut\_values.value = mut\_values.value.filter((\_, i) =\> i !== removeIdx)
> rerender()
> dispatchInputEvent()
> }
>   
> const changeValueAt = (i, j, value) =\> {
> mut\_values.value\[i\]\[j\].value = value
> rerender()
> dispatchInputEvent()
> }
>   
> const output = html\`\<table style="width: 100%;table-layout: fixed;"}\>
> \<thead\>
> ${headerRow()}
> \</thead\>
> \<tbody\>
> ${mut\_values.value.map(inputRow)}
> \</tbody\>
> \</table\>\`
>   
> output.value = mut\_values
> return output
> }
> 
> const table\_input = listInput();
> 
> \`\`\`
> 
> \`\`\`
> \<div class="card" style=""\>
>     
> \<div class="card" style="margin: 0;display: inline-flex;"\>
>     
>     
>         
> \<div class="card" style="width:400px"\>Select elements\</div\>    
> \<div class="card"\>${table\_input}\</div\>  
> \</div\>
> \</div\>
> \`\`\`

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [March 17, 2024, 10:15am UTC](https://talk.observablehq.com/t/debugger-oservable-issue/8935/5 "2024-03-17T10:15:22Z")

</div>

I feel like there may be a misunderstanding here of how a debugger works. When you enable the debugger you pause script execution. Naturally your button will stop responding to interactions.