精华内容
下载资源
问答
  • JavaScript 断点调试 逐语句执行 调试窗口打断点
    2022-03-03 14:52:58

    目录

    断点调试

    逐语句执行

    问题一

    问题二

    问题三

    逐过程执行

    在调试窗口打断点

     思路


    断点调试

    在需要调试的js代码前加入debugge即可,在执行时会进入debug模式

    逐语句执行

    意思就是,每点击它一次,js语句就会往后执行一句,快捷键 F10。

    问题一

    在没有打断点的情况下,在console输入变量i,结果console报错?

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

    问题二

    为什么直接在console里面输入$(".xxx")能打印出东西来?

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

    问题三

    watch是做什么的?

    watch可以帮你监控执行当前断点所在作用域任何表达式的执行结果,点击watch旁边的+,然后输入变量。
    Scope是当前断点的作用域以及所有闭包作用域以及全局作用域,你可以看到所有作用域的变量。

    逐过程执行

    常用在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用这个按钮。(相当于从一个断点调到下一个断点)

    在调试窗口打断点

    首先,在左侧期望位置左键点击,这即代表断点,然后刷新页面之后就会生效了,最后在右侧通过调试按钮或者快捷键即可调试。

     思路

    首先,js是否执行成功,利用逐语句执行,将整个与问题相关的js依次执行一遍,在执行的过程中,自己也跟着理清思路,同时需要注意每个变量的值以及选中的元素是否正确,其次,js是否存在逻辑问题,变量问题,参数问题,最后,如果上述都没有问题,请仔细检查各种符号。

    更多相关内容
  • JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该...
  • 下面小编就为大家分享一篇js断点调试心得,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js断点调试经验分享

    2020-11-27 06:32:14
    我们给大家详细分析了一下在JS调试的时候经常用到的断点调试,并把经验和技巧做了总结,以下是全部内容: 1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开...
  • 断点调试是用来观察程序的运行过程,断点就相当于在选择好的语句处停止,经过调试可以看到代码一步步的执行步骤。 使用方法(以for循环举例) 打开网页后,按Fn+f12,选择source(来源) 设置好断点后需要再...
    • 断点调试是用来观察程序的运行过程,断点就相当于在选择好的语句处停止,经过调试可以看到代码一步步的执行步骤。
    • 使用方法(以for循环举例)
      在这里插入图片描述
    1. 打开网页后,按Fn+f12,选择source(来源)
      在这里插入图片描述

    2. 设置好断点后需要再刷新一下浏览器,才能实现断点调试。

    3. 在这里插入图片描述

    4. 点击调试按钮,可以逐步地观察程序的运行顺序,将鼠标移动到变量上也查看变量此时的值。
      在这里插入图片描述

    5. 经过断点调试我们会发现,for循环的运行步骤。

    展开全文
  • 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 展示的也是实时变量

    这里写图片描述


    ——– 未完待续 ——-

    展开全文
  • JS断点调试

    2021-07-24 03:18:41
    在Source选项中新建了一个Script snippet的JS文件 我们输入以下代码: function xx() { console.log(1); } function zhiyuan() { xx() } zhiyuan() 在console中调试如下: xx.call和xx.caller, 分别得到自身函数...

    Chrome的source调试

    在这里插入图片描述
    在Source选项中新建了一个Script snippet的JS文件

    我们输入以下代码:

    function xx()
    {
        console.log(1);
    }
    function zhiyuan()
    {
        xx()
    }
    zhiyuan()
    

    在console中调试如下:
    xx.call和xx.caller,
    分别得到自身函数和上一级调用的函数(读上一层的栈)
    在这里插入图片描述
    例:
    url = https://sc.xinshangmeng.com/xsm2/?Version=2020022100

    dom事件监听:
    在这里插入图片描述

    Call Stack :方法调用栈

    先进后出: i→dispatch→e
    在这里插入图片描述
    调用过程:

    1.function e(){}
    2.function dispatch(){
    		e();
    	}
    3.function i(){
    		dispatch();
    	}
    4.function xxxx(){
    		i();
    	}
    

    Scope:变量跟踪

    在这里插入图片描述

    简单跟值

    1.JS的运行顺序不一定是JS文件的编写顺序
    开始的位置—:—解析

    //自执行方法
     !function a(){}()
    
    //变量的定义 var xx
    //赋值语句  a = 1
    //方法的调用
    

    练习:假设方法a

    function x(){
        var a = 1;
        console.log("x");
    }
    !function(){
        console.log("!");
    }()
    x(console.log("1"));
    

    运行顺序结果如下:
    在这里插入图片描述

    案例一、密码加密(全局搜索方法)

    url = “https://sk.open.com.cn/stuspace-auth/#/login”
    在这里插入图片描述

    step1:分析目的

    password: FB1C975E4C5BD3D3858C10CBA6638B282126DC92
    判断MD5:长度为16或32位
    sha1:长度40位
    在这里插入图片描述

    step2:全局搜索关键词password

    ### step1:分析
    经验筛选:Axios、vue、 react、 jquery等文件先不看,一般改动较少

    password可能出现的方式:
    在这里插入图片描述

    step3:打断点在这里插入图片描述

    下图要调试函数,这三个点都可以打断点,推荐第一个
    在这里插入图片描述
    stringify()方法,对象==>json
    (左括弧前面一定是一个方法
    ()两个括号之间的是参数
    在这里插入图片描述
    找到d.a方法,点进去:
    在这里插入图片描述
    分步调试即可找到加密方法

    案例二、dom事件断点-寻找相应的JS文件

    在这里插入图片描述

    案例三、XHR断点

    在这里插入图片描述

    优点:定位的位置在发包函数,我们可以跟栈
    缺点:只能用于XHR的数据包

    JS发包,HTML表单发包
    1)xhr breakpoints 进行过滤,也是支持正则的
    在这里插入图片描述

    在这里插入图片描述

    2)通过network面板进入抓包函数
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • Javascript-断点调试

    2022-04-21 22:32:01
    断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。 浏览器按F12-...
  • 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome...
  • JS断点调试方法

    2020-07-12 20:21:25
    一html代码 <!DOCTYPE html> <html lang="en"> ...JS断点调试法</title> <!--外部js--> <script src="resource/js/jsdemo1.js"></script> </head> <body> <.
  • 大家好,我是若川。最近组织了源码共度活动:1个月,200+人,一起读了4周源码,参与的小伙伴都表示收获很大。如果感兴趣可以点击链接扫码加我微信 ruochuan12。之前推荐过很多次调试文...
  • js调式debug工具浏览器使用支持断点调试,结合webstorm一起试用,前端程序员的福音,目前最牛逼的工具,你没用过,说明你还不是大牛....
  • JavaScript 断点调试(debugger)

    千次阅读 2020-07-11 11:22:13
    我相信大家对 断点 都有所认知,那么在 JS 程序中如何打断点呢?先来看看效果图! 说白了,就是 当程序运行到 debugger 处时,程序会停止往下运行,从而发现 bug。 操作方法 图中有两个按钮,第一个蓝色的按钮是跳...
  • 微信小程序断点调试.

    2018-08-07 14:30:05
    微信小程序的断点调试,是相当重要的,因为微信的小程序的调试,本事不是太难。
  • 1.Chrome开发者工具断点调试 第一步:打开开发者工具,按F12或者在浏览器页面上右键选择经常 第二步:在Source面板找到需要调试的文件 第三步:设置断点 第四步:触发调试部分程序的运行,开始调试 调用过程常用的...
  • Node.js断点调试方法等

    2021-04-20 17:12:42
    设置断点,然后使用快捷键F5,启动调试 固定文件调试 //打开调试面板,点击配置,添加配置,luanch.json "configurations":[ { "type":"node", "request":"lanunch", "name":"Launch Program", "program":"${...
  • 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看。 这是我们用Sources断点...
  • JavaScript断点调试

    2016-10-24 16:34:03
    使用Chrome断点调试JavaScript
  • JS断点调试方式梳理

    2019-09-11 13:56:07
    JS断点调试 断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析。也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,...
  • VS Code + Node.js 断点调试

    千次阅读 2022-03-29 21:36:52
    在vs code 中调试 javascript 程序
  • 1.在程序运行中,我们总会遇到各种bug,而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS调试。 2.用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试js代码文件 红框所...
  • chrome浏览器js断点调试总结

    千次阅读 2018-08-01 16:39:40
    断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome...
  • js进行断点调试

    千次阅读 2019-04-29 15:58:26
    有些程序太过繁杂,程序出错不好找出错误在哪,所以需要断点调试一步步得出结论。 1.在需要加断点的地方写debugger; function customDebug() { for(var i = 0; i < 10; i++) { console.log(i); if(i % 3 ==...
  • VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,152
精华内容 12,460
关键字:

js如何断点调试

友情链接: jiami.zip