利用chrome浏览器断电调试确定函数触发的位置
比如某天遇到这样一个问题,页面有一个按钮,上面绑定了事件可能是多个事件,然后我们点击后出现了bug,我们要如何快速定位到这个事件,如果页面只有一个js或少量的js,我们一个打开查找,也可以接受。但是如果这个页面外联了10个js文件,多而杂,那我们去项目里全局搜一下,这样就比较费时费力了。
我们可以利用谷歌开发者工具,帮助我们快速知道触发的是哪个函数,在哪个js文件里,哪段代码。
如下,有个点击事件:

方法如下:
1、打开谷歌开发者工具:选中sources -> Event Listener Breakpoints, 然后选中事件触发的类型。

2、点击元素,触发断点。

3、查看开发面板,找到元素触发事件。

如我的项目,引用了jquery,在jquery里面找到了两个点击事件。此时即已经定位到了js文件和文件位置了。

利用chrome浏览器断电调试确定函数触发的位置的更多相关文章
- 移动WebApp利用Chrome浏览器进行调试
详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...
- 利用ChromeCROSS可以在chrome浏览器上调试跨域代码
利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...
- Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
- Chrome浏览器如何调试移动端网页信息
Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...
- Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
- 利用Chrome浏览器调试线上代码
前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...
- 超完整的Chrome浏览器客户端调试大全
引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个 ...
- 异步加载的JS如何在chrome浏览器断点调试?
我们常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢? 方案一: 在 ...
- Chrome浏览器 Console调试台的简单使用
打开调试台 方法1:在chrome浏览器中打开网页,按下F12,点击下图框选内容. 方法2: 浏览器中鼠标右键选择查看网页源代码后,再按上图操作. 调试台的功能 (因为是第一次使用这个调试台,只能罗 ...
随机推荐
- CSS max-width: 0;
写CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先 ...
- 用户输入input函数和代码注释
一.读取用户输入 py3中input()读取用户输入,输出全部是默认str字符串数据类型,一般将其赋值变量,用户输入才继续往下走程序.(py2的不同已单独列出随笔) 二.注释 注释的作用:代码量大的时 ...
- web开发如何使用高德地图API(一)浏览器定位
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
- mysql 易错误理解
MySQL作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己踩坑. ...
- Ruby的case语句
Ruby的case语句 case语句使用的是===判断方式,可以进行更加广义的相等判断: 可以进行类型的判断,可以进行正则表达式的判断: array = ["a",1,nil] a ...
- IT人才异军突起 有招网引领业界精英
随着网络时代的到来,IT人才也在不断的增长.当然,不仅IT行业对IT人才需求旺盛.部分传统企业为打造互联网时代下的企业,也在紧锣密鼓的招聘IT人才.据统计.眼下我国各地对IT人才的需求已经占领总体人才 ...
- Python面向切面编程-语法层面和functools模块
1,Python语法层面对面向切面编程的支持(方法名装饰后改变为log) __author__ = 'Administrator' import time def log(func): def wra ...
- python爬虫解决百度贴吧登陆验证码问题
作为贴吧重度用户,写了个贴吧爬虫脚本 抄了一些别人的代码.记得有个验证码解决的.可是忘了链接了,今天最终自己攻克了. 首先要让登陆须要验证码,不停地登陆就好了...度娘非常快会加上验证码大法的... ...
- HDU1846(巴什博奕)
Brave Game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- IOS算法(二)之选择排序
选择排序: 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,顺序放在已排好序的数列的最后.直到所有待排序的数据元素排完. 选择排序是不稳定的排序方法. 一. 算法描写叙述 选择排序:比方在一 ...