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

相关文章

来自专栏LeeCen

React Native 环境搭建

601
来自专栏Python研发

用pycharm提交代码,冲突之后文件丢失找回方法

1: 更新代码时, 监测到本地代码改变,需要和合并,重启之后才可以, 选择No同时,代码会被冲掉,新增加的文件也会被冲掉, 但是pycharm有一个文件历史记忆...

464
来自专栏hbbliyong

错误提示之(MVC3.0):HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确 MVC误设起始页

MVC3.0框架开发项目: 有时在程序运行的时候会出现“HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检...

3546
来自专栏拂晓风起

Flash builder 调试技巧 (分享)

912
来自专栏ppjun专栏

Xposed去抖音提示

特别感谢https://www.52pojie.cn/thread-684757-1-1.html 官方教程:https://github.com/rovo8...

1032
来自专栏文渊之博

部署和使用kibana

背景 本文将主要介绍ELK的可视化工具Kibana的部署和使用。主要分为三个步骤来实现最终呈现:   1.导入数据到ES;   2.部署kiban...

22310
来自专栏程序员叨叨叨

windwos平台下 Android SDK更新慢的解决方法

我们在使用Eclipse的Android SDK更新时,常常会遇到SDK更新慢或更新不了的问题(Fail to fetch...),接下来我们来看看解决办法:

603
来自专栏王二麻子IT技术交流园地

三、VueJs 填坑日记之项目文件认识

上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行。...

1977
来自专栏Petrichor的专栏

pycharm: 配置远程repo

632
来自专栏IT杂记

Windows查看文件句柄

图形界面方式     打开任务管理器 ?      2. 性能tab,点击链接打开资源监视器; ?     3. 现在cpu tab,关联的句柄后面的输入框可以...

1879

扫码关注云+社区