在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。

  1. Weinre移动调试
  2. DOM 断点
  3. debugger断点
  4. native方法hook
  5. 远程映射本地调试

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

  1. 如果你嫌每次都要在调试的页面引入js麻烦,可以做个书签或者chrome插件
  2. 如果嫌安装麻烦,可以使用phonegap的weinre:http://debug.phonegap.com/

DOM断点

DOM断点是一个Firebug和chrome DevTools提供的功能,当js需要操作打了断点的DOM时,会自动暂停,类似debugger调试。

使用DOM断点

  1. 选择你要打断点的DOM节点
  2. 右键选择Break on..
  3. 选择断点类型

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 Proxyhttp://www.charlesproxy.com/), windows用户使用fiddlerhttp://fiddler2.com/

这个就不多说了,直接上国内的几篇文章:

原文阅读(本文没有完全翻译,有所扩展):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技术的更多相关文章

  1. 五个你必须知道的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 ...

  2. .Net Web开发技术栈

    有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net web开发技术栈,以此帮助那些想学,却不知 ...

  3. 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈

    通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?   什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念 ...

  4. .Net Web开发技术栈 收藏

    原文:http://www.cnblogs.com/1996V/p/7700087.html#!comments 有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎 ...

  5. Web开发技术发展历史

    Web开发技术发展历史   来自:天码营 原文:http://www.tianmaying.com/tutorial/web-history Web的诞生 提到Web,不得不提一个词就是"互 ...

  6. 关于javascript模块加载技术的一些思考

    前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...

  7. 全 Javascript 的 Web 开发架构:MEAN

    http://developer.51cto.com/art/201404/434759.htm 全 Javascript 的 Web 开发架构:MEAN 引言 最近在Angular社区的原型开发者间 ...

  8. 最受欢迎web前端技术总结

    Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...

  9. Web攻击技术

    Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...

随机推荐

  1. WIN-CE系统架构

    WIN-CE 系统架构分为素部分:硬件层.OEM 层.操作系统层.应用层 http://hovertree.com/hvtart/bjae/oy9pqb94.htm 硬件层: 由CPU .存储器.I/ ...

  2. 【开源】Ionic项目实例《Ionic中文社区》

    介绍 这几天闲着没事,就做了个第三方的Ionic社区的移动客户端,练练手,界面设计和图片资源直接从官方版拿来的.真懒o(︶︿︶)o 唉 网站开放出来的接口,都已全部实现,大家可以下着试试看. 源码 h ...

  3. 最小生成树---Kruskal/Prime算法

    1.Kruskal算法 图的存贮采用边集数组或邻接矩阵,权值相等的边在数组中排列次序可任意,边较多的不很实用,浪费时间,适合稀疏图.      方法:将图中边按其权值由小到大的次序顺序选取,若选边后不 ...

  4. iOS阶段学习第19天笔记(协议-Protocol)

    iOS学习(OC语言)知识点整理 一.关于协议(Protocol)的介绍 1)概念:协议指多个对象之间协商的一个接口对象,协议提供了一些方法用在协议的实现者和代理者      之间通讯的一种方式 2) ...

  5. Java---Java的面试题(二)

    1 Switch能否用string做参数?在 Java 7 之前, switch 只能支持byte,short,char,int 或者其对应的封装类以及 Enum 类型.在JAVA 7中,String ...

  6. JAVA实现的微信扫描二维码支付

    吐槽一下 支付项目采用springMvc+Dubbo架构实现,只对外提供接口. 话说,为什么微信支付比支付宝来的晚了那么一点,一句话,那一阵挺忙的,然后就没有时间整理,最近做完支付宝支付,顺便也把微信 ...

  7. objective-c IOS应用更新

    当前苹果已经禁止了,通过IOS应用直接跳转APP下载链接的方法.但是仍然可以使用另外一种方法直接跳转AppStore. 这种方法需要增加一个类库StoreKit.framework. 这里使用这功能是 ...

  8. 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 ...

  9. Scalaz(13)- Monad:Writer - some kind of logger

    通过前面的几篇讨论我们了解到F[T]就是FP中运算的表达形式(representation of computation).在这里F[]不仅仅是一种高阶类型,它还代表了一种运算协议(computati ...

  10. 操作系统与c语言

      以下是根据看书后的理解做的总结:   最早,unix是使用汇编编写,但是非常简单.后来觉得汇编,换种机器又得重新用另外一种机器汇编重写,太麻烦.于是想设计一种通用的语言,到各种机器上都能运行 当时 ...