zoukankan      html  css  js  c++  java
  • Chrome调试技巧

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

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

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

    此方法让你很快的找到ajax请求的调用堆栈,也就是ajax是在什么方法里面请求的。他的父级调用者又是谁:
    image
    如上图,我们鼠标悬停在network面板的请求上的Initiator列,就可以看到调用堆栈信息了。你还可单击某个位置进行代码的查看,这是不是很方便啊。

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

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

    3.1 安装和测试

    ReRes的安装

    单击上面的下载地址获取插件的压缩包,然后解压。直接安装为chrome的插件
    image
    一定要开启 允许访问文件网址

    ReRes添加规则

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

  • 相关阅读:
    【BZOJ1000】A+B Problem ★BZOJ1000题达成★
    【BZOJ4548】小奇的糖果 set(链表)+树状数组
    【BZOJ3661】Hungry Rabbit 贪心
    Python面试题之回调函数
    Django学习笔记之CBV和FBV
    RESTful源码笔记之RESTful Framework的基本组件
    SQL学习笔记之B+树
    SQL学习笔记之MySQL索引知识点
    SQL学习笔记之B+树的几点总结
    Python面试题之Python中type和object的关系
  • 原文地址:https://www.cnblogs.com/cqhaibin/p/9206062.html
Copyright © 2011-2022 走看看