theme: healer-readable
本文正在参加「金石计划 . 瓜分6万现金大奖」前言
这段时间我一直在学习源码,在学习源码的过程中,难免会碰到一些自己不理解的代码,这时候就可以选择进行调试来理解它们。在某些情况下,我们需要知道当前代码的执行顺序,以及每一步变量的执行状态,这时候使用断点调试就是非常好的一个选择。 但是如何进行断点调试还是有讲究的。下面我将通过一段代码例子来聊一聊断点调试。断点调试
前面说了那么多,但是也没介绍一下什么是断点调试。官方解释是:断点调试是指在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。我们简单点理解它就是用来来理解代码的执行顺序的。 断点调试分为浏览器断点调试和 Vscode 编辑器断点调试,这里我主要讲一讲关于浏览器的断点调试。浏览器断点调试
这里我拿一段简单的 for 循环代码来进行调试,便于理解,这里是一个基于 react 框架的 demo。代码如下:var arr = ["a", "b", "d", "e", "f"];
var str = arr.map((item, index) => {
return <div key={index}>{item}</div>;
});
function App() {
return (
<div className="App">
{str}
</div>
);
}
export default App;
首先我们打开浏览器后台,找到 source,就能发现如下代码:
然后我们就可以给它打上断点了。
目前整体是这样的:
右上角有四个按钮,我们将鼠标放到图标下,可以英文名称是什么。如下所示:
所以它们分别是:
第一个是:resume script excution。它的作用是将断点执行过程重启。
第二个是:step over next function。它的作用是会直接执行完这个函数,不显示执行细节。
第三个是:step into next function。它的作用和上面那个刚好相反。如果遇到一个函数,它进入函数内部一步一步地执去行,这样可以观察到执行过程。
第四个是:step out of current function。它的作用并不是很大,这里我们可以将它忽略。
我们来看看第三个按钮,它可以带领我们看到函数的内部是怎么样的执行过程。
我在 map 函数那里打了断点,然后开始点击,就立马跳转到一个比较复杂的代码页面,继续点击,它会接着跳转。
……
总之,通过不断点击它,它会执行很多层,带我们看到函数内部的执行过程。
总结
断点调试是调试程序的一种手段,学会断点调试有利于帮助我们看到整个代码的底层执行过程,从某种意义上讲,它应该是我们程序员必备的手段之一。 其实断点调试并不难,难的是如果碰到一个比较复杂的程序如何去处理断点调试,以我目前的看法,这就需要时间的积累以及经验了。所以可以多研究研究代码,并对不解或者比较复杂的代码进行调试,这样就能增强调试能力了。感谢您的来访,获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容