Why doesn't the browser debugger prevent the browser from rendering the interface while alert can?

look at the code

  jsbin  

the above code pops up alert () when I click the button, but the interface does not change until the alert is finished.
but not with debugger. Why? I want to know what is the principle of debugger?

Mar.25,2021

Thank you for your answers, which should have answered my question and another question related to promsie, which I now feel can be explained in this way.

the difference between adding a breakpoint and not adding a breakpoint: eliminate the @ xdsnet saying,
when adding a breakpoint: the browser throws one line of code to the js thread at a time. After executing this line of code, the execution stack has no other code and cannot be read. The code is finished at this time of the browser task, so GUI render, can see the interface change at this time.

without breakpoints: after executing one line of code, the browser will continue to read another line of code until there is no executable code, including and no micro-task queue, and then start GUI render, because it is instantaneous and make us feel at the same time.
you can see this code

 

misunderstood, you don't have to read it.
look upstairs and answer.
innerHTML operations are not put in the task queue, but are directly executed in the execution stack. In fact, innerHTML is executed first, and then alert is executed.
the following is the original wrong answer:

< hr >

normally, when this click event is executed, text.innerHTML='hello' will be placed in the task queue and alert on the execution stack, so alert will be executed first.

when debugging or adding breakpoints step by step, when executing to text.innerHTML='hello' or adding breakpoints after it, the content after that will not be added to the execution stack. There is only text.innerHTML='hello' in the execution stack.

that is, step-by-step debugging actually adds the current step to the execution stack; a breakpoint means that the code before the detection breakpoint is put into the task queue and the execution stack respectively, and the code after the breakpoint is not detected.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4890d-44cb8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4890d-44cb8.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?