资讯专栏INFORMATION COLUMN

Chrome调试技巧

v1 / 1495人阅读

摘要:三如何在线映射到本进行调试在这种情况下,我们大多数时间是使用这类抓包工具进行路径的映射,或者是修改文件进行域名的跳转。

一、如何查看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(这是不是很方便了)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2078.html

相关文章

  • 你不知道的Chrome DevTools(2):那些debug的技巧

    摘要:我打算把一些上使用的高级技巧写成你不知道的这一系列的博文,希望大家一起学习学习。然而,这还不是最严重的,因为的语法比较宽松和随意,所以同一功能多种写法,各种奇葩都有。总结前端在调试代码的时候,知道开发工具上的小技巧,可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools,使用它作为Web前端开发性能调试的必备工具。就连隔...

    warnerwu 评论0 收藏0
  • Chrome 调试技巧

    摘要:前言除了我们日常使用的调试方法,在中,其含有一些有意思的方法,有助于提高我们的开发调试效率。而在调试中我们可以使用是与来作为选择器,省去大串代码,如下。测试用时测试用时关闭界面 前言:除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率。 Sources页 command + p 文件跳转 使用Sublime的人或习惯用command +...

    codeGoogle 评论0 收藏0
  • [译]14个你可能不知道的JavaScript调试技巧

    摘要:在控制台中使用,当到达传入的函数时,代码将停止。但除了私有和匿名函数这可能是找到调试函数的最快方法。在控制台中输入,当调用时,将以调试模式停止屏蔽不相关代码现在,我们经常在应用中引入几个库或框架。 译者:SlaneYang原文:https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具...

    CODING 评论0 收藏0
  • Chrome 调试技巧

    摘要:而就是告诉程序在那里停下来进行单步调试,俗称断点。面向,专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能,用于显示你在元素标签页或标签页中最后点击的元素。 写在前面本文包括浏览器调试,不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console 基本输出 想必大家都在用console.log在控制...

    luqiuwen 评论0 收藏0
  • Chrome 调试技巧

    摘要:而就是告诉程序在那里停下来进行单步调试,俗称断点。面向,专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能,用于显示你在元素标签页或标签页中最后点击的元素。 写在前面本文包括浏览器调试,不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console 基本输出 想必大家都在用console.log在控制...

    fantix 评论0 收藏0

发表评论

0条评论

v1

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<