比如某天遇到这样一个问题,页面有一个按钮,上面绑定了事件可能是多个事件,然后我们点击后出现了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. AtCoder Grand Contest 021完整题解

    提示:如果公式挂了请多刷新几次,MathJex的公式渲染速度并不是那么理想. 总的来说,还是自己太弱了啊.只做了T1,还WA了两发.今天还有一场CodeForces,晚上0点qwq... 题解还是要好 ...

  2. laravel Job 和事件

    在做项目的时候,一直对Job和Event有个疑惑.感觉两者是相同的东西,搞不清楚两者的区别在哪里!经过一段时间的琢磨和查找了相关的资料,对Job和Event做了一些总结,以便记忆. Job Job既可 ...

  3. 【[Offer收割]编程练习赛10 C】区间价值

    [题目链接]:http://hihocoder.com/problemset/problem/1483 [题意] 中文题 [题解] 二分最后的答案; 二分的时候; 对于每一个枚举的值x; 计算小于等于 ...

  4. Linux显示使用命令who(转)

    Linux who命令用于显示系统中有哪些使用者正在上面,显示的资料包含了使用者ID.使用的终端机.从哪边连上来的.上线时间.呆滞时间.CPU使用量.动作等等. 使用权限:所有使用者都可使用. 语法 ...

  5. UVA - 348Optimal Array Multiplication Sequence(递推)

    id=19208">题目:Optimal Array Multiplication Sequence 题目大意:给出N个矩阵相乘.求这些矩阵相乘乘法次数最少的顺序. 解题思路:矩阵相乘 ...

  6. [Angular] Angular CDK Intro

    1. Installl latest @angular/cli: sudo npm i -g @angular/cli@next The version I used is:6.0.0-rc.10 2 ...

  7. 黑马程序猿——JAVA基础——集合

    ----------android培训.java培训.java学习型技术博客.期待与您交流.------------  一.关于java中的集合类        首先看一下,大致的框架流程图     ...

  8. Ylmf_Ghost_Win7_SP1_x64_2017_0113.iso虚拟机安装

    新建虚拟机,将iso镜像配置好,然后开启虚拟机 一开始选择PQ8.05: 找到“作业”菜单---“建立” ,新建一个“主分区”然后点击确定 新建主分区作业之后,如果需要新建其他分区继续进行即可,本例只 ...

  9. c28---const

    // // main.c // const关键字,节省内存空间,放在字符表里面, #include <stdio.h> int main(int argc, const char * ar ...

  10. adbd cannot run as root in production builds的解决方法

    部分手机root后,使用adb root会出现这个提示. 原因是root不彻底. adb shell之后进入到$界面,su一下才进入到#. 这个之后可以使用root功能了. 注意到,这个时候exit的 ...