利用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: 浏览器中鼠标右键选择查看网页源代码后,再按上图操作. 调试台的功能 (因为是第一次使用这个调试台,只能罗 ...
随机推荐
- 多叉树结构的数据,parent表示法转成children表示法
最近碰到的问题,有个数组,数组元素是对象,该对象的结构就如树的parent表示法的节点一样.形象点讲就是该数组存放了树的所有“叶子节点”,并且叶子节点内存有父节点,一直到根节点为止,就如存了一条从叶子 ...
- 单行函数、表连接(day02)
回顾: 1.数据库介绍 sql: dql: select dml: insert delete update ddl: create drop alter tcl: commit rollback s ...
- 将项目上传到Github之使用git命令上传
1,先从GitHub网页上建立一个数据仓库 2,安装git 下载地址:https://www.git-scm.com/download/win 3,找到本地要上传的项目目录,右键点击Git Bash ...
- sqlalchemy根据表名动态创建model类
作用如题,直接上代码吧,另外还支持 copy一张表的表结构,新建表并获得model对象 # coding: utf-8 import traceback from sqlalchemy import ...
- UOJ #219 BZOJ 4650 luogu P1117 [NOI2016]优秀的拆分 (后缀数组、ST表)
连NOI Day1T1都不会做...看了题解都写不出来还要抄Claris的代码.. 题目链接: (luogu)https://www.luogu.org/problemnew/show/P1117 ( ...
- poj 3177&&3352 求边双联通分量,先求桥,然后求分量( 临界表代码)
/*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h>//用容器写在3177这个题上会超内存,但 ...
- poj 3041 最小点覆盖=最大匹配
#include<stdio.h> #include<string.h> #define N 510 int map[N][N],n,mark[N],link[N]; in ...
- UVA 10159
http://blog.csdn.net/metaphysis/article/details/6926997 先向作者表达一下敬佩吧,十分巧妙地利用了状态压缩. 这道题有点组合数学的味道,当一个格子 ...
- 2015年北京大学软件project学科优秀大学生夏令营上机考试---C:单词翻转面试题
题目描写叙述:翻转句子中单词的顺序.但单词内字符的顺序不变.句子中单词以空格符隔开. 为简单起见,标点符号和普通字母一样处理.如:"I am a student."翻转成" ...
- 图论-BFS解无权有向图最短路径距离
概述 本篇博客主要内容: 对广度优先搜索算法(Breadth-First-Search)进行介绍: 介绍用邻接表的存储结构实现一个图(附C++实现源代码): 介绍用BFS算法求解无权有向图(附C++实 ...