标签:返回值 .com origin 语言 web开发 val ebe code 很多
做前端开发的小伙伴,或许对这个断点操作不是很熟悉。不过你要是问其他语言(比如C,C++ ,C #等)的开发者,他们应该都挺熟悉断点操作,这种断点操作在诸如XCode或者Visual Studio的IDE中都会有提供。
以下一段话来自知乎
断点操作 (Action) 的意义是设置追踪点 (Tracepoint)。追踪点相当于是一种临时的有 Trace 功能的断点,它会把消息 打印到 Output 窗口。
勾选后面的继续执行 (Continue Execution),代表 Tracepoint 命中时,Debugger 不会停下来,否则将会在此处停下来。两种情况下,消息都会打印出来。
试想一个这样的场景,我希望程序在运行的时候,可以观察某一行上某个变量或者表达式的值。你一定会说,这不是很简单嘛:
前端的童鞋们一定知道,JavaScript的调试大部分都是在浏览器里面操作的,而这个浏览器,大部分时候是Chrome。因为Chrome的调试功能强大而方便。(相信你不会反对吧)。
然而让大家失望的是,chrome根本就没有设置断点操作的功能啊,自然其他浏览器也没有。相信你此时的心情是这样的:
没T你说个XX。
看官们不要着急,且听我们慢慢道来。在Chrome断点调试的时候,可以使用条件断点,所谓条件断点,指定一个条件,在符合这个条件的时候。执行会停止在断点处,否则执行直接往下执行。如下图,在Line Number的地方点击右键,选中 Add conditionnal breakpoint
然后,输入条件,比如params.value == ‘value‘这样的条件表达式,如下图:
有关条件断点说明,如果你仍然不是很熟悉的话,可以自己多参考相关资料。
但是,这个断点操作有什么关系呢?要知道,JavaScript是一门动态语言。条件判断其实是可以输入任何代码片段的。比如下面的代码:
if(express)
即便是express不是一个bool值或者bool值的表达式或者返回bool的函数,都是可以的。这就方便我们的操作。
JavaScript说道 : 我最机智。
因此在条件断点的条件输入框中,我们可以输入我们想执行的断点操作即可以,比如console.log。如图所示
最终会在控制台打印出来你要查看的值,如图所示:
由于console.log返回值是undefined的(最终转换为false),所以代码并不会被停止在此处,而是会直接往下执行,这相当于前面讲述断点操作概念的继续执行。如果需要停止在这儿,可以设置如下的表达式即可:
条件断点的设计并不是为此而设计的。所以这是一种hack,不是标准方式,不是本来的设计方式。但是,不是很多Web开发都会使用hack的吗。 用起来方便就行。
通过这种方式,相当于可以不用修改代码,临时性的加入我们想执行的代码片段。
很多同学都喜欢在工程中直接使用console.log,这样在实际发布的时候,最终有需要删除这些console.log代码,增加了工作量。通过这种方式,或许可以减少原本产品代码中的consle.log。
使用这种方式,还可以动态改变一些变量的值。我们知道有时候,某些bug只在某些特定的值才能复现,这些值可能是服务端推送过来的,此时调试的值,就可能依赖于后端传递的值。其实可以在前端的页面,通过这种方式,强制改变某些值,使得bug复现,而不依赖于后台的值。比如:
https://zhuanlan.zhihu.com/p/28642422
https://www.visualmicro.com/page/User-Guide.aspx?doc=Working-With-Breakpoints-When-Hit.html
欢迎关注公众号:
标签:返回值 .com origin 语言 web开发 val ebe code 很多
原文地址:https://www.cnblogs.com/flyfox1982/p/9667160.html