直接修改分离的js进行调试,html的js不行

直接修改js进行调试

在Sources面板中，连js都可以直接修改。主要是在设置断点(breakpoint)进行单步调试时用的;

ctr+shift+i或者F12打开开发者工具；

打开sources面板;直接给某行js代码设置断点。

刷新页面后，程序就会停在断点设置的那一行上。

然后我们就可以在断点那一行代码的后面添加我们自己的debug代码了，例如下面这样：

按下快捷键Ctrl + s保存，发现该面板变红了，即表示保存生效：

此时利用快捷键F10，就能最终看到刚刚添加的debug代码的效果了：

由于单步调试只能往下走而不能回头，如果要重新测试的话就要刷新页面，但刷新页面会导致刚刚保存的调试代码消失，恢复到线上版本的代码

在单步调试过程中直接查看变量

查看变量值的方法还是有很多的，下面列举两种常用的

1、通过Sources - Watch面板，在这里设置想要监控的变量，随着单步调试的进行，这些被监控的变量的值也会随之更新。

2、通过console打印变量，除了在代码里写console.log()外，其实是可以直接在单步调试的过程中直接用console来打印的，例如下图：

除了上述的这两种方法，还有更简单的方法：在单步调试的过程中，直接把鼠标移到想查看的变量，然后就会弹出个小框把变量的值给显示出来啦：