javascript和web debug技术
在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。
- Weinre移动调试
- DOM 断点
- debugger断点
- native方法hook
- 远程映射本地调试
Weinre
在移动上面开发调试是很复杂的,所以就有了weinre。安装weinre可以实现pc来调试手机页面,所以对于移动开发调试是很重要的哦~
安装weinre
weinre可以通过npm来安装:
- 1
npm install -g weinre
安装完之后,可执行下面的命令来启动:
- 1
weinre --httpPort 8080 --boundHost -all-
这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js,然后就可以调试了。操作界面类似Chrome的 DevTools,具体操作可以看下http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html教程
原理
通过在需要调试的页面中引入一段weinre的js,实现pc和手机的socket通信,从而实现实时调试。
Tips
- 如果你嫌每次都要在调试的页面引入js麻烦,可以做个书签或者chrome插件
- 如果嫌安装麻烦,可以使用phonegap的weinre:http://debug.phonegap.com/
DOM断点
DOM断点是一个Firebug和chrome DevTools提供的功能,当js需要操作打了断点的DOM时,会自动暂停,类似debugger调试。
使用DOM断点
- 选择你要打断点的DOM节点
- 右键选择
Break on..
- 选择断点类型
Tips
- Firebug中,DOM断点可以在Script> Breakpoints里面看到
- chrome DevTools中,需要在Elements面板的DOM Breakpoints中看到
javascript的debugger语句
需要调试js的时候,我们可以给需要调试的地方通过debugger
打断点,代码执行到断点就会暂定,这时候通过单步调试等方式就可以调试js代码
使用javascript的断点
在需要打断点的地方添加debugger
:
- 1
- 2
- 3
if (waldo) {
debugger;
}
这时候打开console面板,就可以调试了
Tips
如果你不知道怎么调试,那么尽快看下:Chrome DevTools中断点部分的教程
原生代码的hook调试
因为浏览器自己会内置一些类似window
对象这些原生的js方法,当你知道原生代码的确有问题,但是你又不能跟踪调试的时候,你就可以用这个方法了。
举个例子
例如我们注意到了一个DOM的属性值发生了变化,但是我们不知道是哪里的代码导致的变化,所以我们可以给DOM元素的setAttribute
打个断点,代码如下:
- 1 var oldFn = Element.prototype.setAttribute;
- 2 Element.prototype.setAttribute = function (attr, value) {
- 3 if (value === "the_droids_you_are_looking_for") {
- 4 debugger;
- 5
}
- 6 oldFn.call(this, attr, value);
- 7 }
这样,当元素的属性发生了变化的时候,就会执行到断点,你就可以在断点的栈中找出调用的地方来~
Tips
这种方法不保证在所有浏览器中有效,比如ios的safari 隐私模式下,我们就不可以修改localStorage
方法
远程映射本地调试
当线上某个js/css出现问题,我们可以用代理的方式,将远程的文件代理到本地来实现远程映射调试。其实除了这个功能,还可以作为抓包工具,这在移动端是很重要的。推荐Mac用charles Proxy
(http://www.charlesproxy.com/), windows用户使用fiddler
(http://fiddler2.com/)
这个就不多说了,直接上国内的几篇文章:
- http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
- http://www.cnblogs.com/TankXiao/p/3063871.html
原文阅读(本文没有完全翻译,有所扩展):http://techblog.badoo.com/blog/2013/11/18/5-advanced-javascript-and-web-debugging-techniques-you-should-know-about/
转载自:http://js8.in/2013/11/20/%E4%BA%94%E4%B8%AA%E4%BD%A0%E5%BF%85%E9%A1%BB%E7%9F%A5%E9%81%93%E7%9A%84javascript%E5%92%8Cweb-debug%E6%8A%80%E6%9C%AF/#more
javascript和web debug技术的更多相关文章
- 五个你必须知道的javascript和web debug技术
转:http://js8.in/2013/11/20/%E4%BA%94%E4%B8%AA%E4%BD%A0%E5%BF%85%E9%A1%BB%E7%9F%A5%E9%81%93%E7%9A%84j ...
- .Net Web开发技术栈
有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net web开发技术栈,以此帮助那些想学,却不知 ...
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念 ...
- .Net Web开发技术栈 收藏
原文:http://www.cnblogs.com/1996V/p/7700087.html#!comments 有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎 ...
- Web开发技术发展历史
Web开发技术发展历史 来自:天码营 原文:http://www.tianmaying.com/tutorial/web-history Web的诞生 提到Web,不得不提一个词就是"互 ...
- 关于javascript模块加载技术的一些思考
前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...
- 全 Javascript 的 Web 开发架构:MEAN
http://developer.51cto.com/art/201404/434759.htm 全 Javascript 的 Web 开发架构:MEAN 引言 最近在Angular社区的原型开发者间 ...
- 最受欢迎web前端技术总结
Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...
- Web攻击技术
Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...
随机推荐
- WIN-CE系统架构
WIN-CE 系统架构分为素部分:硬件层.OEM 层.操作系统层.应用层 http://hovertree.com/hvtart/bjae/oy9pqb94.htm 硬件层: 由CPU .存储器.I/ ...
- 【开源】Ionic项目实例《Ionic中文社区》
介绍 这几天闲着没事,就做了个第三方的Ionic社区的移动客户端,练练手,界面设计和图片资源直接从官方版拿来的.真懒o(︶︿︶)o 唉 网站开放出来的接口,都已全部实现,大家可以下着试试看. 源码 h ...
- 最小生成树---Kruskal/Prime算法
1.Kruskal算法 图的存贮采用边集数组或邻接矩阵,权值相等的边在数组中排列次序可任意,边较多的不很实用,浪费时间,适合稀疏图. 方法:将图中边按其权值由小到大的次序顺序选取,若选边后不 ...
- iOS阶段学习第19天笔记(协议-Protocol)
iOS学习(OC语言)知识点整理 一.关于协议(Protocol)的介绍 1)概念:协议指多个对象之间协商的一个接口对象,协议提供了一些方法用在协议的实现者和代理者 之间通讯的一种方式 2) ...
- Java---Java的面试题(二)
1 Switch能否用string做参数?在 Java 7 之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,String ...
- JAVA实现的微信扫描二维码支付
吐槽一下 支付项目采用springMvc+Dubbo架构实现,只对外提供接口. 话说,为什么微信支付比支付宝来的晚了那么一点,一句话,那一阵挺忙的,然后就没有时间整理,最近做完支付宝支付,顺便也把微信 ...
- objective-c IOS应用更新
当前苹果已经禁止了,通过IOS应用直接跳转APP下载链接的方法.但是仍然可以使用另外一种方法直接跳转AppStore. 这种方法需要增加一个类库StoreKit.framework. 这里使用这功能是 ...
- 2015-2016 ACM-ICPC Nordic Collegiate Programming Contest ---E题Entertainment Box(有点变化的贪心)
提交链接 http://codeforces.com/gym/100781/submit Description: Ada, Bertrand and Charles often argue over ...
- Scalaz(13)- Monad:Writer - some kind of logger
通过前面的几篇讨论我们了解到F[T]就是FP中运算的表达形式(representation of computation).在这里F[]不仅仅是一种高阶类型,它还代表了一种运算协议(computati ...
- 操作系统与c语言
以下是根据看书后的理解做的总结: 最早,unix是使用汇编编写,但是非常简单.后来觉得汇编,换种机器又得重新用另外一种机器汇编重写,太麻烦.于是想设计一种通用的语言,到各种机器上都能运行 当时 ...