Chrome调试技巧
2018-06-24 02:28:28来源:未知 阅读 ()
一、如何查看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(这是不是很方便了)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:课时106.边框练习(理解)
下一篇:课时94.背景颜色(掌握)
- css:chorm调试工具(修改样式、重置缩放比例、错误提示) 2020-05-30
- 【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧 2020-05-14
- CSS背景图片的6个有趣的技巧 2020-05-12
- 网页注册表单的设计技巧 2020-03-04
- 小结常见布局技巧 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash