专栏首页cnblogsChrome调试技巧

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

相关文章

  • 前端打包成桌面应用、以及chrome扩展

         前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况。上周...

    sam dragon
  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

    sam dragon
  • [我的理解]Javascript的原型与原型链

    一、原型与原型链的定义 原型:为其他对象提供共享属性的对象     注:当构造器创建一个对象,为了解决对象的属性引用,该对象会隐式引用构造器的"prototyp...

    sam dragon
  • 喜茶获B轮融资,难道仅仅只是因为消费升级?

    孟永辉
  • 使用webpack实现react的热更新

    app 中自然就是源代码,app/index.js是最外层的js文件。因为涉及到是热更新,所以当然是在我们的 webpack.dev.js 文件下操作。

    Nealyang
  • Git使用心得及总结(包含Git Bash 和 Git GUI)简单易懂

    其实为什么要写这个心得,主要是因为每次自己使用git的时候遇到一些比较棘手的问题时,总是不好找到解决方法,在使用并且学习的时候我也买过书,也在网上Google了...

    卜卜-Totoro
  • 动态规划解决01背包问题

    一、问题描述:有n 个物品,它们有各自的重量和价值,现有给定容量的背包,如何让背包里装入的物品具有最大的价值总和?

    Christal_R
  • 微服务与网关技术(SIA-GateWay)

    把时间退回到二十年之前,当时企业级领域研发主要推崇的还是C/S模式,PB、Delphi这样的开发软件是企业应用开发的主流。随着时间的推移,基于浏览器的B/S架构...

    宜信技术学院
  • 安卓基础干货(五):安卓线程与数据上传下载的学习

    緣來
  • Android监听手机短信的示例代码

    方式1:定义为Activity的内部类,直接在onChang()方法中处理业务逻辑,比如收到短信之后设置给EditText

    砸漏

扫码关注云+社区

领取腾讯云代金券