Chrome调试技巧

一、如何查看dom元素的事件

某种情况我们在页面交互上发现一个问题,肯定是非常想知道这个交互触发执行的入口,这会使我们更直接、快速的进行代码的跟踪、调试和分析。其实在chrome浏览器这很简单就实现了,如下 百度一下 按钮 监听的事件列表:

如图,我们就可以很清楚的看出 百度一下 这个按钮会触发多少的事件。

二、如何查看Javascipt的调用堆栈信息

此方法让你很快的找到ajax请求的调用堆栈,也就是ajax是在什么方法里面请求的。他的父级调用者又是谁:

如上图,我们鼠标悬停在network面板的请求上的Initiator列,就可以看到调用堆栈信息了。你还可单击某个位置进行代码的查看,这是不是很方便啊。

三、如何在线js映射到本进行调试

在这种情况下,我们大多数时间是使用Fiddler这类抓包工具进行路径的映射,或者是修改host文件进行域名的跳转。这次我向大家介绍一款chrome的插件,方便且功能强大。 插件名为:ReRes 点击下载

3.1 安装和测试

ReRes的安装

单击上面的下载地址获取插件的压缩包,然后解压。直接安装为chrome的插件

一定要开启 允许访问文件网址

ReRes添加规则

可以chrome的插件区域上单击ReRes图标,添加规则

编辑http与file的对应关系,注意,一般情况下线上js都有版本的后缀,所以用最近加一个*来表示匹配,然后我们访问constinfo.js,就会跳转映射到本地的constinfo.js(这是不是很方便了)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏kalifaの日々

window下用pin安装flask步骤及import flask报错的解决方案

安装过程: 1.下载get-pip.py,下载路径并不重要 不用放到Python安装目录里。 2.打开下载路径 python get-pip.py 运行这个py...

40970
来自专栏weixuqin 的专栏

Django 项目重命名

  在日常学习工作过程中,我们难免需要复用以前的项目,这里讲下复用 Django 项目并重命名的过程。

17510
来自专栏liulun

【JAVA WEB教程】jsp环境搭建+部署网站(eclipse+tomcat)【详细+图文】

下载tomcat7.X ? 下载地址为:http://tomcat.apache.org/download-70.cgi 下载完成之后就开始安装 ? Next ...

97980
来自专栏Jerry的SAP技术分享

如何在Chrome development tool里查看C4C前台发送的请求细节

我们可以在Chrome development tool的network tab里观察到从前台UI发送到后台的HTTP请求:

35340
来自专栏文大师的新世界

1. react-native环境搭建测试安装PS

18920
来自专栏流柯技术学院

VMware安装CentOS时,无法以图形界面安装解决办法

51920
来自专栏小狼的世界

phpExcel导出文件时内存溢出的问题

在使用PHPExcel导出文件时,经常会因为文件过大导致PHP内存溢出报错,为了解决这个问题,可以使用PHPExcel提供的参数进行优化。这里说的Excel文件...

25530
来自专栏电光石火

IDEA 配置 Vue 支持

1.打开IntellIJ IDEA的Plugins窗口,在查询框输入vue。 ? 2.点击右边的安装按钮。 ? 3.配置支持.vue后缀文件 ...

76830
来自专栏程序员的知识天地

如何用 Python 爬取需要登录的网站?

最近我必须执行一项从一个需要登录的网站上爬取一些网页的操作。它没有我想象中那么简单,因此我决定为它写一个辅助教程。

28320
来自专栏java达人

$(window).load()与$(document).ready()的区别

1.执行时间不同:从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,...

191100

扫码关注云+社区

领取腾讯云代金券