设为首页收藏本站
开启辅助访问
谷歌浏览器之断点调试 您所在的位置：网站首页 › 谷歌浏览器断点不能跟进去 › 谷歌浏览器之断点调试

谷歌浏览器之断点调试

2023-09-25 16:51| 来源: 网络整理| 查看: 265

看了网上大部分人写的关于谷歌浏览器功能的调试，多多少少都有点不准确，因此打算自己来写一篇，帮助大家来避开一些误导

首先我们打开谷歌浏览器的调试界面可以看到 在这里插入图片描述 其中，大部分的博客对于中间的这三个按钮的解释都有点差异，所以我们主要讲讲这三个按钮的实际用处 在这里插入图片描述 第一个按钮在这里插入图片描述 step over next function ，顾名思义over有跳过的意思，即如果遇到一个函数，它会直接执行完这个函数（注意是直接执行结束返回结果），然后进入下一步，中间不显示细节。

第二个按钮在这里插入图片描述 step into next function ，顾名思义into是进入的意思，即如果遇到一个函数，它不会一下运行完这个函数，而是进入函数内部，一步一步地执行，这样我们可以更清楚地观察执行过程。

第三个按钮在这里插入图片描述 step out of current function，顾名思义out是出来的意思，即如果利用 step into已经进入了函数内部，我们可以通过此功能来一下执行完函数内部剩下的代码。 测试代码：这里我给了一个手写递归实现深拷贝的代码，大家可以用这个代码跑一下调试一下就明白这几个按钮的实际用处啦，码字不易，喜欢的麻烦点个赞和收藏喔~

let arr = {name:'sfh',age:18}; let arr4 = clone(arr); console.log(arr); console.log(arr4); function checkedType(target) { return Object.prototype.toString.call(target).slice(8, -1) } //实现深度克隆---对象/数组 function clone(target) { //判断拷贝的数据类型 //初始化变量result 成为最终克隆的数据 let result, targetType = checkedType(target) if (targetType === 'Object') { result = {} } else if (targetType === 'Array') { result = [] } else { return target } //遍历目标数据 for (let i in target) { //获取遍历数据结构的每一项值。 let value = target[i] //判断目标结构里的每一值是否存在对象/数组 if (checkedType(value) === 'Object' || checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组 //继续遍历获取到value值 result[i] = clone(value) } else { //获取到value值是基本的数据类型或者是函数。 result[i] = value; } } return result; }


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有