精华内容
下载资源
问答
  • 前端如何打断点

    千次阅读 2019-07-19 16:38:30
    原帖地址:https://jingyan.baidu.com/article/9113f81b64b9da2b3214c72e.html 1.介绍的过程还是以一个测试例子来演示,这样更直观也更容易理解 使用谷歌浏览器打开一个测试的html文件,里面包含... <... &l...

    原帖地址:https://jingyan.baidu.com/article/9113f81b64b9da2b3214c72e.html

     

    1.介绍的过程还是以一个测试例子来演示,这样更直观也更容易理解

    使用谷歌浏览器打开一个测试的html文件,里面包含简单的js代码(只做演示)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>js断点演示</title>
    	</head>
    	<body>
    		<div>js断点演示</div>
    		<script>
    			var num1=parseFloat(55);
    			if(!isNaN(num1)){
    				num1 = Math.round(num1*100)/100;
    				var str = num1.toString();
    				var rs = str.indexOf('.');
    				if(rs<0){
    					rs = str.length;
    					str += '.';
    				}
    			}
    		</script>
    	</body>
    </html>
    

    2.按F12打开网页调试工具,默认打开的是Elements,显示的是网页标签元素,如下图

    注意使用的是谷歌浏览器,打开Sources,找到对应的html文件,

    3.在js代码文件左侧栏单击可以添加断点,再点击可以移除断点

    4.断点添加完成之后,F5刷新浏览器,可以看到代码执行到断点位置停了下来。光标放在变量名上,可以显示出变量值

    通过按钮进入下一步

    展开全文
  • 前端程序调试时打断点的方式

    千次阅读 2020-04-21 13:31:45
    本例中我的请求都是在action文件夹里面的,source页签开源码,要对应找出响应发出请求的位置 本例中我的项目是Action目录下的index.js是和action请求相关的js源码,去找对应的按钮点击事件代码部分 一...

    1先利用network定义请求,2利用source选项去定位源码位置

    本例中我的请求都是在action文件夹里面的,source页签点开源码,要对应找出响应发出请求的位置

    本例中我的项目是Action目录下的index.js是和action请求相关的js源码,去找对应的按钮点击事件代码部分

    一刷新按钮一点击就会直接进入断点处

     

    第二种调试方式:

    端点:是断点,我的字打错了,就这样不改了

    进入断点虎再用右上方的单步调试功能,试试就会用了 

     

    展开全文
  • web 打断点调试用法

    万次阅读 2017-07-08 16:54:07
    然后又有别人封装好的一个打log的库,所以我也一直没考虑前端打断点。 直到一次和深圳进行沟通一个问题的时候,他们需要定点问题。 抱怨我定位问题速度太慢(其实打个log之后,虽然自动打包,可是也需要打包的时间)...

    以前写C++,swift,OC这类语言时,断点直接在编译器上加,开发前端之后。sublime上没有直接打断点的;然后又有别人封装好的一个打log的库,所以我也一直没考虑前端打断点。 直到一次和同事沟通解决一个问题的时候,他们需要定点问题。  然后抱怨我定位问题速度太慢(其实打个log之后,虽然自动打包,可是也需要打包的时间)。那前端如何打log呢。 最后实在Google的自动工具上知道了如何进行代码断点去确认问题。

    如图:需要的文件目录都在区域1,如果没有,点击5处的按钮。

    按钮2呈现的是被压缩过后的js文件,看起来很不方便,所以先使用3格式化代码工具,就可以把2区域的代码整理为有序的了。

    4区域的上方几个按钮代表着暂停/继续,单步执行,单步跳入,单步跳出,禁用/启用所有的端点。


    4区域的Call Stack是调用栈;比如在f()设置了端点,但是在g()调用了函数f()那么在console执行g()会触发断点;在Call Stack里面调用栈。

    Scope列表 可以查看全局变量和局部变量的值。


    XHR 断点
    右侧调试区有一个 XHR Breakpoints,点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

    按事件类型触发断点
    右侧调试区的 Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断,在dom里面也是能看到引发dom的位置的。

    //@ sourceURL 给 eval 出来的代码命名
    有时候一些非常动态的代码是以字符串的形式通过 eval() 函数在当前 Javascript context 中创建出来,而不是作为一个独立的 js 文件加载的。这样你在左边的内容区就找不到这个文件,因此很难调试。其实我们只要在 eval 创建的代码末尾添加一行 “//@ sourceURL=name“ 就可以给这段代码命名(浏览器会特殊对待这种特殊形式的注释),这样它就会出现在左侧的内容区了,就好像你加载了一个指定名字的 js 文件一样,可以设置断点和调试了。下图中,我们通过 eval 执行了一段代码,并利用 sourceURL 将它命名为 dynamicScript.js ,执行后左侧内容区就出现了这个“文件”,而它的内容就是 eval 的中的内容。

    Chrome 断点设置 - hanguokai - 韩国恺的博客

    还可以看看这个给动态编译出来的 CoffeeScript 代码命名的示例

    var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
    eval(coffee);

    实际上,//@ sourceURL 不仅仅可以用在 eval 的代码中,任何 js 文件、甚至是 Javascript Console 输入的代码都可以用,效果一样!



    展开全文
  • 打断点

    2017-07-21 14:27:00
    1.前端js打断点:按F12----点击Source-----选择要打开的Js文件----选中js代码左边点击一下---要实现的功能没有实现---在哪句上打断点想清楚---然后点击要获得的效果触发事件--------有两种情况其中如果出现半透明...

    1.前端js打断点:按F12----点击Source-----选择要打开的Js文件----选中js代码左边点击一下---要实现的功能没有实现---在哪句上打断点想清楚---然后点击要获得的效果触发事件--------有两种情况其中如果出现半透明遮盖说明触发按钮没问题排除嫌疑,继续下一个问题,出现2个按钮事件说明这一步没问题,锁定事件内部

    2.按F10是“逐语句执行”---排除法  对其一句进行排除可以在source同级的console看到报错不
    -------------------------------------------------------------
    3.后台打断点,在想要执行的代码前点击一下,并运行debug起来
    4.进入到调试中,按F5进入下一步,

    转载于:https://www.cnblogs.com/sunyuhuan/p/7217488.html

    展开全文
  • Charles打断点

    2020-04-23 18:31:25
    Charles打断点打断点要做什么请求到接口数据并打断点设置断点修改返回值并展示取消断点 打断点要做什么 对于测试来说,Charles的作用就是查看我们调用接口的时候接口给我们返回的数据,以此我们来判断bug是出在前端...
  • 我有个用户登录方法 用户User 他有多个Order订单 当用户登录的时候 debug login方法 没有任何问题 订单数据都出来了 但是 不debug login 方法 直接运行 就报懒加载异常了 项目是 SpringMVC4+Hibernate4+Spring4
  • java与js打断点的方式

    2019-07-05 23:49:59
    所以说我不确定到底是哪一个,于是我想到了debug启动,打断点,看它到底是跳进的哪个方法。结果试了半天,发现哪个页面都没有跳转,于是我郁闷了,还以为没有重启,没有刷新缓存,结果弄了半个小时,还是没果。 ...
  • Pycharm如何打断点

    2019-09-25 08:02:41
    2. 在编辑工具中,加断点跟踪(打断点) 3. 使用日志模块,输出到日志中 下面我们来看一下如何打断点 二. 环境 python 3.4.4 + Pycharm Professional Edition 2018.1,注意这里尽量用新的版本,能用专业版尽量用...
  • 前端面试题汇总

    2018-09-09 16:11:49
    vuejs 兄弟组件通信 生命周期 闭包的坏处 ...前端打断点调试 vue router vuex 原理 事件循环 promise promise和定时器哪个先执行? react 双向数据绑定 业余时间干嘛? 用的什么版本工具 ...
  • 【Fiddler】打断点

    2019-09-10 21:49:51
    为什么要打断点呢? 比如一个购买的金额输入框,输入框前端做了限制100-1000,那么我们测试的时候,需要测试小于100的情况下。很显然前端只能输入大于100的。这是我们可以先抓到接口,修改请求参数,绕过前端,传一...
  • 小程序怎么打断点

    2018-01-19 14:09:00
    小程序怎么打断点 小程序怎么打断点 保存编辑模块的代码,在调试模块–>Sources中找到对应的位置打断点 F10 单步 F8 跳到下一个断点 posted...
  • 可通过抓包工具打断点,实现模拟测试场景。常用的抓包工具charles和fiddler均可打断点mock数据。由于小编安装了charles环境,这里仅讲解下如何通过charles打断点,修改接口请求&返回数据。 charles打断点 抓取...
  • java程序在调试的时候需要debug来跟踪一下结果,有一种情况是这样的,正常执行java程序就会出现问题,而断点debug跟踪此方法的时候却是正常的,不断测试结果都是这样,由此判断有可能是因为此方法在执行的时候所需要...
  • 前端知识总结

    2019-03-14 17:28:43
    Vue 是一个前端框架(与 Angular 和 React 同级别),Vuex 只是 Vue 的一个插件,是一个状态管理工具,存放多个组件共用的数据的存放、更改、处理的一个容器,就是说来存放处理公共数据的工具,存放的数据一变,各个...
  • debugger 可以在页面打断点 转载于:https://www.cnblogs.com/zhaozhenzhen/p/8656620.html
  • (四)、Fiddler打断点

    2018-03-07 10:42:00
    一、打断点是Fiddler一个比较好用的功能,它可以做一些手工操作很难做的事情。 那为什么要打断点? 看下图,Fiddler打开后,Client(客户端)发送的请求会先经过Fiddler,然后Fiddler再传给Server(服务器),那么...
  • Fiddler—Fiddler打断点(bpu)

    千次阅读 2017-10-23 14:17:17
    1.为什么要打断点呢? 比如一个购买的金额输入框,输入框前端做了限制100-1000,那么我们测试的时候,需要测试小于100的情况下。很显然前端只能输入大于100的。这是我们可以先抓到接口,修改请求参数,绕过前端,传...
  • JSP页面也可以打断点调试

    千次阅读 2019-09-28 10:53:31
    JSP页面也可以打断点调试 转载于:https://www.cnblogs.com/danawill/p/7717164.html
  • 一段上传文件并读取文件内容的程序,在程序内打断点后就能成功读取上传的文件的内容,不打断点就没法读到内容。代码如下: new Vue({ el: "#training", data: { result: "这是文件路径", }, methods: { ...
  • 1.选择你要打断点的接口,在其上面右击,随即出现一个选择菜单栏,找到Breakpoints进行点击选择 ...6.以上是个人对response(后端)打断点的所有过程,如有不妥之处,请各位大神随时留言指正,感谢 ...
  • 一、区分倒底是前端的问题还是后端的问题 1.前端问题排除: 1)、接口文档中的(请求地址,请求...1、打断点 (1)断点打在请求($.get(), .post(),.post() ,.post(),.ajax()) 看前端有没有问题 (2)断点打在回调函...
  • 1、如何给fiddler打断点 方法一: 点击顶部Rules–选择automatic Breakpoints–选择Before Requests(请求之前打断点)或After Response(响应之后打断点) 方法二: 新版的fiddler界面底部直接增加了一个断点...
  • 1.为什么要打断点呢? 比如一个购买的金额输入框,输入框前端做了限制100-1000,那么我们测试的时候,需要测试小于100的情况下。很显然前端只能输入大于100的。这是我们可以先抓到接口,修改请求参数,绕过前端,传...
  • 我们经常在浏览器的devtools中使用debug工具去调试代码,那么如果我运行的是Nodejs,也就是运行环境是nodejs, 那么应该如何debug打断点呢? 其实VSCode已经内部集成了调试工具,专门针对nodejs运行环境的,如果你...
  • 前端部分着重

    2018-07-08 22:21:00
    一、ajax的实现原理及优缺点: 1. 首先ajax的全称为Asynchronous JavaScript and XML即... #使用异步与服务器通信,不打断用户的操作  # 使用ajax请求减轻了后端的工作,减少服务器与带宽的负担  # 基于规范...
  • Fiddler打断点模拟HTTP请求或返回

    千次阅读 2018-04-10 19:24:26
    在Web应用中,有些情况的HTTP返回比较难复现,这时候可以使用Fiddler工具打断点,手动返回不同的状态值,遍历所有情况;也可以模拟请求长时间无返回的情况,下面就讲下如何使用Fiddler这一工具完成这些测试: 1....
  • 前言 先给大家讲一则小故事,在我们很小的时候是没有手机的,那时候跟女神聊天都靠小纸条。某屌丝A男对隔壁小王的隔壁女神C倾慕已久,于是天天小纸条骚扰,无奈中间...1.为什么要打断点呢? 比如一个购买的金额输...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,627
精华内容 3,850
关键字:

前端打断点