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

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

JavaScript单步调试

JavaScript单步调试,使用WebStorm对Js进行单步调试,使用Google Chrome对Js进行单步调试,使用Mozilla FireFox对Js进行单步调试...
  • woshiyoutiao
  • woshiyoutiao
  • 2016年03月28日 20:40
  • 1753

一般纯HTML网页的JavaScript的单步执行与调试(以VS2005)

笔者最近写Script的机会比较多, 难免需要在开发时候进行调试,虽然我们都知道VS2008有针对JavaScript调试的功能,但是无奈项目是在2005和.html页面上进行开发,因此无法“自然而然...
  • dotnetWalker
  • dotnetWalker
  • 2008年02月22日 17:12
  • 6912

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

这不仅仅是效率的提高,更是思想,思维的突破O(∩_∩)O~
  • u013030601
  • u013030601
  • 2016年07月24日 15:44
  • 1943

Web前端调试工具——神奇的Console

前言       先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:            今天要给大家介绍的是Web前端调试工具,应该...
  • zwk626542417
  • zwk626542417
  • 2014年12月29日 21:18
  • 25760

web 打断点调试用法

以前写C++,swift,OC这类语言时,断点直接在编译器上加,开发前端之后。sublime上没有直接打断点的;然后又有别人封装好的一个打log的库,所以我也一直没考虑前端打断点。 直到一次和深圳进行...
  • qq_26878975
  • qq_26878975
  • 2017年07月08日 16:54
  • 959

[技术指导]JS怎么进行单步调试

[技术指导]JS怎么进行单步调试 很多时候,JS执行结果并不是返回想要的值,此时可以用一些插件工具完成调试 (1)https://segmentfault.com/q/10100000...
  • qq_31561851
  • qq_31561851
  • 2016年09月25日 02:35
  • 752

JavaScript调试

在调试JavaScript的时候最好不要用alert,用console.log要更好一些。 主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。 相比alert他的优...
  • zwy122
  • zwy122
  • 2016年12月26日 10:05
  • 116

你必须知道的.NET

主要讲.NET底层的一些语言机制,载体为C#。写得比较深入,是本好书。LOH堆 (Large Object Heap) ,用于分配大对象实例。LOH堆不会被压缩,而且只在完全GC回收时被回收 并非所...
  • s10141303
  • s10141303
  • 2015年07月03日 23:30
  • 1604

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

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

最全面的JavaScript调试技巧总结

最全面的JavaScript调试技巧总结
  • qq_26676207
  • qq_26676207
  • 2016年11月17日 11:27
  • 2531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:五个你必须知道的javascript和web 调试技术
举报原因:
原因补充:

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