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
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?
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
Well, while building a minimal example to show the issue, I found that it is a bug.
opened 09:19AM - 17 Mar 24 UTC
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)}>×</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>
```
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.
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