打破 WebStorm/PhpStorm 中的任何 javascript 代码答案

【问题标题】：Break on any javascript code in WebStorm/PhpStorm打破 WebStorm/PhpStorm 中的任何 javascript 代码
【发布时间】：2014-04-15 19:50:41
【问题描述】：

我可以在 PhpStorm 下调试在本地 Apache 服务器上运行的 javascript 网页，但我想在触发某些 javascript 代码时进入调试，逐步模式。例如，当我在浏览器中单击一个按钮时，我希望 PhpStorm 停止执行 javascript 并允许我逐步完成它。

是否可以在所有 javascript 函数中不设置断点来执行此操作？

【问题讨论】：

你是在 chromebug/firebug 中调试，还是在 PhpStorm 本身中调试你的 js？
当我在 PhpStrom 中单击调试时，Chrome 打开顶部栏“PhpStorm 正在调试此选项卡...”
好的，你应该可以点击phpStorm中行号旁边的编辑窗口的一侧，在你想要中断的代码行上添加一个红色的小断点圆圈，同理就好像您想在 chromebug 脚本视图中添加断点一样。您的问题有点奇怪，因为您说“我希望 PhpStorm 停止执行”，但不是 PhpStorm 正在执行，而是 Chrome 浏览器。 PhpStorm 只是连接到它的调试器并让您查看它。
我明白了，谢谢。不过，有没有办法让 Chrome 调试器在开始执行 Javascript 代码时自动暂停，而我不必在 chromebug 视图中的任何地方添加断点？
哦，是的。在 chrome 调试器中，转到源选项卡并单击右侧的小暂停图标。然后下次执行任何 javascript 时，它都会暂停。再次按下它以播放您的代码，然后将其重新暂停。

标签： javascript breakpoints phpstorm webstorm javascript-debugger

【解决方案1】：

您可以尝试像这样包装事件处理程序：

<button id='mybutton'>Break on click</button>
<button id='mybutton2'>Break on mouseover</button>

<script>

  var b = document.querySelector('#mybutton');
  var b2 = document.querySelector('#mybutton2');

  b.onclick = function(){
     console.log('do stuff');   
  }

  b2.onmouseover = function(){
     console.log('do other stuff');   
  } 

  function breakon(evt){
    return function(){  
        console.log('breaking');
        debugger;
        evt();
    }
  }

  // break on different events
  b.onclick = breakon(b.onclick);
  b2.onmouseover = breakon(b2.onmouseover);

</script>

【讨论】：