比如某天遇到这样一个问题,页面有一个按钮,上面绑定了事件可能是多个事件,然后我们点击后出现了bug,我们要如何快速定位到这个事件,如果页面只有一个js或少量的js,我们一个打开查找,也可以接受。但是如果这个页面外联了10个js文件,多而杂,那我们去项目里全局搜一下,这样就比较费时费力了。

  我们可以利用谷歌开发者工具,帮助我们快速知道触发的是哪个函数,在哪个js文件里,哪段代码。

  如下,有个点击事件:

方法如下:

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

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

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

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

利用chrome浏览器断电调试确定函数触发的位置的更多相关文章

  1. 移动WebApp利用Chrome浏览器进行调试

    详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...

  2. 利用ChromeCROSS可以在chrome浏览器上调试跨域代码

    利用ChromeCROSS可以在chrome浏览器上调试跨域代码 1.下载ChromeCROSS文件,可百度下载,或者在我的百度云上下载:链接: https://pan.baidu.com/s/10_ ...

  3. Chrome浏览器及调试教程

    ==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...

  4. Chrome浏览器如何调试移动端网页信息

    Chrome浏览器如何调试移动端网页信息 2017年08月12日 12:42:20 阅读数:835 最近在弄项目,用WebView加载一个页面,想追踪页面中一个按钮的点击事件.这个可能就需要调试这个页 ...

  5. Chrome浏览器开发调试系列(一)

    // 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...

  6. 利用Chrome浏览器调试线上代码

    前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境 ...

  7. 超完整的Chrome浏览器客户端调试大全

    引言 “工欲善其事,必先利其器” 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个 ...

  8. 异步加载的JS如何在chrome浏览器断点调试?

    我们常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢? 方案一: 在 ...

  9. Chrome浏览器 Console调试台的简单使用

    打开调试台 方法1:在chrome浏览器中打开网页,按下F12,点击下图框选内容. 方法2: 浏览器中鼠标右键选择查看网页源代码后,再按上图操作.  调试台的功能 (因为是第一次使用这个调试台,只能罗 ...

随机推荐

  1. 布尔类型、操作符别名、C++函数、动态内存分配(new\delete)、引用(day02)

    六 C++的布尔类型 bool类型是C++中基本类型,专门表示逻辑值:true/false bool在内存上占一个字节:1表示true,0表示false bool类型可以接收任意类型和表达式的结果,其 ...

  2. 洛谷 P1595 信封问题

    题目描述 某人写了n封信和n个信封,如果所有的信都装错了信封.求所有信都装错信封共有多少种不同情况. 输入输出格式 输入格式: 一个信封数n 输出格式: 一个整数,代表有多少种情况. 输入输出样例 输 ...

  3. UVALive Archive - 6196 - Party Games

    题目: You've been invited to a party. The host wants to divide the guests into 2 teams for party games ...

  4. try finnlay 总结

    public class FinnallyTest { public static void main(String[] args){ System.out.print(go()); } public ...

  5. POJ 3076

    DLX算法,刚接触,是关于精确覆盖的,白书上有算法介绍. 代码模板 #include <iostream> #include <cstdio> #include <cst ...

  6. Android--真机调试程序方法

    方法例如以下: (1)手机通过数据线连接到手机上. (2)在手机中设置:设置-->应用程序-->开发-->USB调试 (3)在CMD中測试一下.连接是否正常,CMD中命令例如以下: ...

  7. [React Native] Target both iPhone and iPad with React Native

    By default, React Native only targets iPhone - so if you run on an iPad, it will show up as a scaled ...

  8. Cocos2d-x 3.0final 终结者系列教程13-贪食蛇游戏案例(全)

    快过节了.谢谢了屈原,我们爱你. 应该多几个向屈大人一样跳江的,这样我们就能够放假纪念啦. ---------------------------------快过节了.弄个案例,大家最好还是假期做做, ...

  9. iWatch报错: Authorization request cancled

    iWatch报错: Optional (Error Domin = com.apple.healthkit Code = 5 "Autherization request canceled& ...

  10. MySQL数据库——索引与视图

    索引 MySQL的索引包括普通索引.唯一性索引(unique index).全文索引(fulltext index).单列索引.多列索引和空间索引等. 1.索引的创建 ·创建表的时候创建索引 SQL语 ...