Firefox控制台中jQuery代码无法console.log变量仅断点时生效问题求助

问题根因 #

你页面里的提交按钮是type="submit"类型，且放在<form>标签内部，点击按钮会触发浏览器默认的表单提交逻辑，直接重载当前页面。console.log(x)虽然确实执行了，但页面刷新后控制台会自动清空历史日志，所以你看不到输出内容。
加断点的时候JS执行会暂停，表单提交动作也会被临时阻塞，页面不会立刻刷新，因此你能看到断点阶段打印的变量值。

解决方案 #

任选以下任意一种即可修复问题：

• 方案一：在点击事件中阻止默认提交行为
  给点击事件回调增加事件参数，调用preventDefault()阻止浏览器默认动作：

  var x = ''
  $(() => {
    $("#enter").click((e) => {
      // 阻止表单默认提交刷新页面
      e.preventDefault()
      x = $('#dataText').val();
      console.log(x);
    })
  });
  

• 方案二：修改按钮的类型属性
  把按钮的type属性从submit改为button，从根源上避免触发表单提交逻辑：

  <button id="enter" type="button" class="btn btn-primary mt-3">Submit</button>
  

额外提示：你当前的input元素同时写了两个id属性id="dataText"和id="enterFolderName"，不符合DOM规范，一个元素只能声明一个id，建议删除冗余的id属性，避免后续选择器匹配出错。

内容的提问来源于stack exchange，提问作者user8522538