精华内容
下载资源
问答
  • 前端断点调试

    2020-09-20 21:48:14
    前端断点调试 前端dubug调试的俩种方法 1:直接在sources打dubug 如图 1:下图在一个名为toggleTab的方法下打了两个断点, 2:当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来, 3:并把相关的...

    前端断点调试

    前端dubug调试的俩种方法

    1:直接在sources打dubug

    • 如图
    • 在这里插入图片描述

    1:下图在一个名为toggleTab的方法下打了两个断点,
    2:当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,
    3:并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,
    4:同时我们可以使用右侧的功能键进行调试.

    • 调试按钮

    右侧最上面一排分别是:暂停/继续(F8)、单步执行(新版浏览器F9、F10)、单步跳入此执行块(F11快捷键)、单步跳出此执行块(shift+F11)、禁用/启用所有断点。下面是各种具体的功能区

    在这里插入图片描述
    注意:
    如果未进入我们打的断点,说明程序块为被调用;

    在需要调试的那一行代码前加上console.log(666),然后运行一次,到控制台查看结果输出,点击右边的链接会自动跳转到源码,这样就可以直接断点了

    在这里插入图片描述
    2:加debugger关键字

    在需要调试的地方加debugger关键字,代码运行到的时候会自动停下,进入调试模式

    在这里插入图片描述
    此方法不需要手动断点,但是麻烦的是可能你调试一次就不用再调试了,但是每次运行到那里都会停下,必须移除这个代码才行

    最后记得移除debugger

    熟练调试对定位问题非常重要,高效率作业

    番茄工作法原理:每次专注一段时间(一般是 25 分钟)结束搭配一次休息(一般是 5 分钟),多次专注(一般为 4
    次)结束搭配一次长休息(一般为 15 分钟)。劳逸结合,有助于提高工作效率。

    前端调试以及断点总结参考

    https://www.cnblogs.com/soyxiaobi/p/9598761.html
    https://www.imooc.com/article/246860

    展开全文
  • web前端断点调试

    2020-11-30 15:21:45
  • Chrome断点调试前端js)

    千次阅读 多人点赞 2019-04-23 10:58:26
    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们...

    1.断点调试是啥?难不难?

    断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例)


    步骤记住没?

    用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~

    2.断点怎么打才合适?

    打断点操作很简单,核心的问题在于,断点怎么打才能够排查出代码的问题所在呢?下面我继续举个例子方便大家理解,废话不多说,上图:

     

    假设我们现在正在实现一个加载更多的功能,如上图,但是现在加载更多功能出现了问题,点击以后数据没有加载出来,这时候我们第一时间想到的应该是啥?(换一行写答案,大家可以看看自己的第一反应是啥)

     

    我最先想到的是,我点击到底有没有成功?点击事件里的方法有没有运行?好,要想知道这个问题的答案,我们立马去打个断点试试看,断点打在哪?自己先琢磨一下。

    接着上图:

     

    各位想到没?没错,既然想知道点击是否成功,我们当然是在代码中的点击事件处添加一个断点,切记不要添加在226行哦,因为被执行的是click方法内的函数,而不是226行的选择器。断点现在已经打上了,然后做什么呢?自己再琢磨琢磨~

    继续上图:

     

    然后我们当然是回去点击加载更多按钮啦,为什么?额。。。如果你这么问,请允许我用这个表情,不点击加载更多按钮,怎么去触发点击事件?不触发点击事件,怎么去执行点击事件里的函数?咆哮状。。不过我相信大家肯定不会问这么low的问题~不瞎扯了~

    继续正题,上面的图就是点击加载更多按钮后的情况,我们可以看到左侧的页面被一个半透明的层给盖住了,页面上方还有一串英文和两个按钮,右侧代码227行被添加上了背景色,出现这个情况,先不管那些按钮英文是啥意思有啥作用,你从这个图得到了什么信息?继续琢磨琢磨~

    如果出现了上图这个情况,说明一点,click事件中的函数被调用了,进一步说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。

    补充一下:

    如果没有出现上面的情况咋办?那是不是说明点击事件没有生效呢?那是什么导致点击事件没有生效?大家自己思考思考~

    可能导致点击事件没生效的原因很多,比多选择器错误,语法错误,被选择的元素是后生成的等。怎么解决呢?

    选择器错误,大家可以继续往后看到console部分的内容,我想大家就知道怎么处理了

    语法错误,细心排查一下,不熟悉的语法可以百度对比一下

    被选择的元素是后生成的,最简单的处理就是使用.on()方法去处理,这个东东带有事件委托处理,详情可以自行百度。

    那么接下来”犯罪嫌疑人“的身份锁定在哪里呢?

    我们将目光投向事件内部,click事件触发了,那么接下来的问题就是它内部的函数问题了。如果你要问为什么?请给我一块豆腐。。。

    打个比方,给你一支笔,让你写字,然后你在纸上写了一个字,发现字没出来,为啥?你说我写了呀,纸上都还有划痕。那是不是可能笔没有墨水或者笔尖坏了了?这个例子和点击加载更多一个道理,写字这个动作就是点击操作,而内部函数就是墨水或者笔尖。明白了不~

    接着我们分析下点击事件里面的内容,里面包含三句话,第一句话是变量i自增长,第二句话是给按钮添加一个i标签,第三句话是调用请求数据的方法。

    就通过这三句话的本身作用,我们可以将较大一部分嫌疑放在第三句话,一小部分放在第一句和第二句话上,有人可能会疑惑,第二句话怎么会有嫌疑呢?他的作用只不过是添加一个标签,对于数据完全没有影响啊,确实,这句话对于数据没有影响,但是出于严谨考虑,它仍然有可能出错,例如它要是少了一个分号呢?或者句子内部某个符号错误呢?往往就是这种小问题浪费我们很多时间。

    好,为了进一步锁定”犯罪嫌疑人“,给大家介绍一个工具,也是上图出现两个图标之一,见下图:

     

    这个小图标的功能叫”逐语句执行“或者叫”逐步执行“,这是我个人理解的一个叫法,意思就是,每点击它一次,js语句就会往后执行一句,它还有一个快捷键,F10。下图示范一下它被点击以后的效果:

     

    我单击了两次这个按钮(或者使用F10快捷键),js代码从227行执行到了229行,所以我管它叫”逐语句执行“或者”逐步执行“。这个功能非常的实用,大部分的调试都会使用到它。

    太晚了,明天继续写,好戏还在后头~

    ——————————————————————分割线————————————————————

     

    OK,接着写!

    上面介绍到我单击了两次“逐语句执行”按钮,代码从227行运行到229行,大家觉得这意味着啥?是不是说明从语法上来说,前两句是没有问题的,那么是不是也同时意味着前两句就排除嫌疑了呢?我看不然。

    大家都知道,加载更多就是一个下一页的功能,而其中最核心的一个就是传给后台的页码数值,每当我点击加载更多按钮一次,页码的数值就要加1,所以如果下一页的数据没出来,是不是有可能是因为页码数值也就是[i变量](下面统一称呼i)有问题?那么如何排查页码是否存在问题呢?大家自己先思考思考。

    下面教大家两种查看页码数值i]实际输出值的方法,上图:

    第一种:

     

    操作步骤如下:

    1.仍然是在227行打上断点 → 2. 点击加载更多按钮 → 3. 单击一次“逐语句执行“按钮,js代码执行到228行 → 4.用鼠标选中i++(什么叫选中大家里不理解?就是你要复制一个东西,是不是要选中它?对,就是这个选中) → 5. 选中以后,鼠标悬浮在目标上方,你就看到上图的结果。

    第二种:

     

    这个方法其实和第一种差不多,只不过是在控制台输出i的值,大家只需要按照第一种方法执行到第三步 → 4. 打开和sources同一级栏目的console → 5. 在console下方的输入栏里输入i → 6. 按enter回车键即可。

    上面的第二种方法里,提到了console这个东西,我们可以称呼它为控制台或者其他什么都可以,这不重要~console的功能很强大,在调试的过程中,我们往往需要知道某些变量的值到底输出了什么,或者我们使用选择器[$”.div”)这种]是否选中了我们想要的元素等,都可以在控制台打印出来。当然直接用第一种方法也可以。

    给大家示范一下在console里打印我们想要选中的元素。上图~

     

    在控制台中输入$(this),即可得到选择的元素,没错,正是我们所点击的对象——加载更多按钮元素。

    在这里给大家说说我对console这个控制台的理解:这个东东就是一个js解析器,是浏览器本身用来解析运行js的家伙,只不过浏览器通过console让我们开发者在调试过程中,可以控制js的运行以及输出。通过上面的两种方法,大家可能觉得使用起来很简单,但是我要给大家提醒一下,或者说是一些新手比较容易遇到的困惑。

    困惑一:在没有打断点的情况下,在console输入i,结果console报错了。

    这应该是新手很常见的问题,为什么不打断点我就没有办法在控制台直接输出变量的值呢?个人理解这时候i只是一个局部变量,如果不打上断点,浏览器会把所有的js全部解析完成,console并不能访问到局部变量,只能访问到全局变量,所以这时候console会报错i未定义,但是当js打上断点时,console解析到了局部变量i所在的函数内,这时候i是能够被访问的。

    困惑二:为什么我直接在console里输入$(“.xxx”)能打印出东西来呢?

    很简单,console本身就是一个js解析器,$(“.xxx”)就是一个js语句,所以自然console能够解析这个语句然后输出结果。

    介绍完“逐语句执行”按钮和console控制台的用法,最后再介绍一个按钮,上图:

     

    这个按钮我称呼它为“逐过程执行”按钮,和“逐语句执行”按钮不同,“逐过程执行”按钮常用在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用到这个按钮。

    上图:

     

    假设上图我只在227行打了个断点,然后一直点击逐语句执行”按钮到229行,这时候如果再点击一次“逐语句执行”按钮呢?则会进入下图的js里:

     

    这些都是zepto库文件的内容,没啥好看的,里面运行很复杂,我们不可能一直使用“逐语句执行”按钮,这样你会发现你按了大半天还在库文件里面绕。。。这时候咋办?那就该“逐过程执行”按钮上场了。

    上图:

     

    我除了在227行打了一个断点,同时还在237行打了一个断点,当我们运行到229行时,直接单击“逐过程执行”按钮,你会发现,js直接跳过了库文件,运行到了237行,大家可以自己使用体验一下。

     

    最后总结:

    本文主要介绍了“逐语句执行”按钮、“逐过程执行”按钮、console控制台这三个工具,以及调试bug时的一些思路。工具的用法我就不再赘述了,大家知道用法就行,具体怎么去更合理的使用,还需要大家通过大量的实践去总结提升~

     

    谷歌浏览器调试完后,如何清除所有的断点

     

    展开全文
  • javascript断点调试

    万次阅读 2017-09-22 18:02:10
    一、方法11.断点文件位置打开chrome,找到Sources,在一堆的文件夹里面找到你要调试的js文件,打开它:下面是html前端展示: 2.打断点 ...首先,给Sources里面的js文件打断点。...3.断点调试对断点进行调试,首
    一、方法1

    1.断点文件位置

    打开chrome,找到Sources,在一堆的文件夹里面找到你要调试的js文件,打开它:

    这里写图片描述

    下面是html前端展示:
    这里写图片描述

    2.打断点
    当你运行代码的时候,例如:操作搜索按钮点击事件,出现未知问题。

    首先,给Sources里面的js文件打断点。点击你要调试的代码的行数,发现行数会被标记为蓝色(chrome),这说明已经成功打断点了,恭喜你成功了第一步。

    这里写图片描述

    3.断点调试(快捷键f8)

    对断点进行调试,首先观察我们标记的断点,在点击事件内部,这个时候我们应该怎么做才能触发这些断点?

    是的,去触发它,点击搜索按钮,触发这个方法,这样断点才会被执行到。

    下图就是点击搜索按钮,我们先不在时间选择器上输入值,点击搜索,触发断点,进入调试状态。

    这里写图片描述

    下面是调试状态时的一些实时数据显示,在最右侧的状态栏中,scope -> local,看到一些信息,otime是断点150行的调试信息,这里显示是undefined对吧,这个是因为我们没有在时间选择器上输入有效值。

    这里写图片描述

    下面接着调试,这次输入时间。这时再看,在scope -> local 展示的信息,是我们想要得到的otime的变量,而在 断点150行,也会看到有信息展示。

    这里写图片描述

    当然,我们可以用另外的方法去看这个时候otime的值,在控制台中(console)输入你想要查看的变量,回车,会看到你想要的结果。

    这里写图片描述

    4.逐语句执行(快捷键f10)

    我们会看到在调试界面的上方,有个悬浮框,首先看最右边的按钮。

    鼠标悬浮,会出现一段英语step over next function call(单步执行函数调用),可以理解为逐步执行或者逐语句执行,点击这个按钮。

    这里写图片描述

    我点击两次之后,会发现调试进行到了152行,右侧的scope -> local 展示的也是实时变量

    这里写图片描述


    ——– 未完待续 ——-

    展开全文
  • VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了
  • 前端断点调试----chrome

    2018-04-09 15:09:26
    当JS尝试改变DOM元素时,给元素添加的断点便会触发。Subtree Modifications,当添加,改变,删除子元素时触发Attributes Modifications,当元素属性被改变时触发Node Removal,当移除元素时触发...
  • JavaScript断点调试高级教程

    千次阅读 2017-07-29 21:35:08
     程序的奇妙所在是它的逻辑性很强,再复杂的程序,都是按照一步一步执行的,因此,在程序出错时,断点调试的技能尤为重要,chrome浏览器的开发者工具实用且强大,是作为前端工程师进行程序断点调试的基础工具。...
  • vscode vue项目代码断点调试

    千次阅读 2019-10-14 00:52:33
    启动项目,开始断点调试,还会自动打开浏览器,更方便调试哦! 温馨提示:只能在js文件中打断点,vue格式文件中的js代码可以在要调试的js代码前加debugger,所以建议把.vue文件拆分成html,js,一来方便维护,二来方便调试...
  • Vscode 断点调试js项目

    2020-11-18 12:24:57
    亲测教程有效
  • js调式debug工具浏览器使用支持断点调试,结合webstorm一起试用,前端程序员的福音,目前最牛逼的工具,你没用过,说明你还不是大牛....
  • 前端程序调试时打断点的方式

    千次阅读 2020-04-21 13:31:45
    1先利用network定义请求,2利用source选项去定位源码位置 本例中我的请求都是在action文件夹里面的,source页签点开源码,要对应找出响应发出请求的位置 ... ...一刷新按钮一点击就会直接...第二种调试方式: ...
  • 浏览器调试和VS调试 设置/取消断点:F9 开始/继续调试:F5 执行到下一个断点 逐语句(执行当前层次的内层的语句):F8 / F11 逐过程(执行当前层次的语句):(shift+F8) / F10 逐层跳出内层次:(ctrl+shift+F8) 监视...
  • 前端加解密,首先看网络请求,一条一条的翻,然后看请求,看哪个url是会发生加密的。这里发现是Login!loginSystem http://c.biancheng.net/view/8015.html 使用$.param()方法将数组或对象转化为字符串序列,以便...
  • 断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。 调试步骤: ...
  • JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe...
  • 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具; 点击进入Sources...
  • 无法找到对应代码文件用以断点调试,如图: 解决尝试: 网上搜索相关文章,结论是在vue.config.js文件中: productionSourceMap: false, 没有生效。望文生义,猜测大概率还是sourceMap控制是否在浏览器中展示源代码...
  • 在B站上看了一个Promise教程,里面用到了断点的方法,之前没有接触过,故记录。 const p = new Promise((resolve, reject) => { if(true) resolve("成功") }); console.log("(1).p是", p); const pthen = p....
  • chrome调试js代码 idea调试java代码 调试快捷键介绍
  • 前端chrome浏览器调试总结

    万次阅读 多人点赞 2016-12-28 23:07:49
    前端chrome浏览器开发者模式的调试方法总结:1.选择箭头按钮;2.手机设备调试;3.Elements的css调试;4.Console控制台调试;5.Sources js资源页面检查;6.Network 网络请求标签页;...以及Sources资源页的断点调试
  • 前端调试断点 前言 当我第一次知道这种东西,我也惊呆了,居然还有这种操作,实在强大到没朋友,从此爱上调试,按时下班 无数次通过调试解决问题的经验告诉我,调试绝对是开发者最应该掌握的重要技能之一。调试能...
  • 配置VS Code 使其支持vue项目断点调试

    千次阅读 2020-11-02 22:29:03
    ...在平常开发过程中我们可能会借助 console.log 来排查,但是现在我们可以借助 VS Code 断点调试项目。 前置条件 浏览器:Chrome 编辑器:VS Code vscode扩展插件:Debugger for Chrome 项.
  • 前端网页、web界面的断点调试、debug调试(亲测可行) 步骤: 实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 前端调试断点

    2020-05-14 20:20:25
    https://www.cnblogs.com/-wanglei/p/11189935.html
  • 但是,查看一个变量的变化,我们可以通过断点调试 bug->debug(找出这个bug)->断点调试 开启断点调试常见的有两种方式: 方式一:找到自己的源代码,在其中打断点; 事例 方式二:在代码中写上debugger ...
  • 前端Chorme调试技巧(一)---(转)

    千次阅读 2018-08-07 17:01:06
    我一直没有找到,要么是一点点的片段讲解,要么是专讲js断点调试,所以索性后来就直接看了 Chrome Developer Tools 的英文官方文档,并结合自己的一些小使用心得总结出此文,希望受到指点和修正 也希望可以帮助一些...
  • 编辑器不等于IDE(集成开发环境),开发python程序,不是只有一种print()打印输出调试。术业有专攻,于人如此,于一个软件也是如此。让专业的软件做专业的事。以上两点得出的结论:PyCharm我们以如下的一种常见错误,...
  • idea怎么使用断点调试js

    千次阅读 2020-12-29 00:10:42
    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":10,"count":10}]},"card":[{"des":"刷脸门禁通行系统前端接入人脸AI赋能的人脸识别门禁机,系统能够提供基于人脸One -...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,217
精华内容 5,686
关键字:

前端断点调试