五个你必须知道的javascript和web 调试技术

转载 2015年11月17日 23:42:48

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

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

Weinre

在移动上面开发调试是很复杂的,所以就有了weinre。安装weinre可以实现pc来调试手机页面,所以对于移动开发调试是很重要的哦~

weinre-demohttp://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

安装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. 选择断点类型

120131122125746

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
2
3
4
5
6
7
8
var oldFn = Element.prototype.setAttribute;
 
Element.prototype.setAttribute = function (attr, value) {
    if (value === "the_droids_you_are_looking_for") {
        debugger;
    }
    oldFn.call(this, attr, value);
}

这样,当元素的属性发生了变化的时候,就会执行到断点,你就可以在断点的栈中找出调用的地方来~

Tips

这种方法不保证在所有浏览器中有效,比如ios的safari 隐私模式下,我们就不可以修改localStorage方法

远程映射本地调试

当线上某个js/css出现问题,我们可以用代理的方式,将远程的文件代理到本地来实现远程映射调试。其实除了这个功能,还可以作为抓包工具,这在移动端是很重要的。推荐Mac用charles Proxyhttp://www.charlesproxy.com/), windows用户使用fiddlerhttp://fiddler2.com/

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

app移动端H5页面开发调试之Chrome远程调试

移动端采用原生开发还是H5开发一直接争论不休。但不论怎么说,采用H5开发app不仅仅快速高效,而且布局简单、漂亮,目前许多的框架已经可以做到让人看不出是原生还是H5开发了。 采用H5开发有一个好处就是...

怎么把F1-F12的功能按键模式修改为传统的单键快捷按键模式。

前不久新买了个人笔记本,ThinkPad E470,实际做开发时才发现:F1-F12功能按键,竟然需要同时按键Fn键,对应的按键功能变为了相应的调音量、调亮度、投影等功能。对于一般人或许方便使用了,但...

移动端H5调试

Chrome Remote Debug 参考:https://developers.google.com/chrome-developer-tools/docs/remote-debugging ...

浏览器中调试web你知道吗?

这不仅仅是效率的提高,更是思想,思维的突破O(∩_∩)O~

JavaScript单步调试

JavaScript单步调试,使用WebStorm对Js进行单步调试,使用Google Chrome对Js进行单步调试,使用Mozilla FireFox对Js进行单步调试...

一探前端开发中的JS调试技巧

有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定...

五个你必须知道的javascript和web debug技术 2013年11月20日 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点

五个你必须知道的javascript和web debug技术 http://js8.in/2013/11/20/%E4%BA%94%E4%B8%AA%E4%BD%A0%E5%BF%85%E9...

五个你必须知道的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...
  • long316
  • long316
  • 2013年11月22日 10:12
  • 543

五个你必须知道的javascript和web debug技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试 Weinre 在...

五个你必须知道的javascript和web debug技术

在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试DOM 断点debugger断点native方法hook远程映射本地调试 Weinre ...
  • comeonJ
  • comeonJ
  • 2014年01月09日 13:41
  • 1226
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:五个你必须知道的javascript和web 调试技术
举报原因:
原因补充:

(最多只允许输入30个字)