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 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

HTML5新增表单类型

HTML5新增了input更多类型的框,如颜色,邮箱,多文件还有对正则表达式的支持!

663
来自专栏lgp20151222

js页面刷新跳转的几种方式及区别

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

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

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

722
来自专栏JetpropelledSnake

Linux学习笔记之Linux启动级别

对于绝大多数Linux程序员来说,进入Linux系统后一般看到的是黑乎乎的界面(开发模式),因为系统如果启动选择开发模式,会减少启动时间,优化内存等。但是通常我...

481
来自专栏kalifaの日々

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

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

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

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

1172
来自专栏程序员的碎碎念

微信小程序二维码实例开发

开始 小编初学微信小程序,想做一个二维码生成器;作为一个小白,踩了不少坑,在这里分享给大家“如何在微信小程序上生成二维码”。 步骤 就像写前端代码一样,html...

4735
来自专栏weixuqin 的专栏

Django 项目重命名

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

891
来自专栏小狼的世界

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

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

1463
来自专栏流柯技术学院

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

2052

扫码关注云+社区