文档章节

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

H
 H_J
发布于 2013/12/17 23:21
字数 869
阅读 1046
收藏 115

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

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

Weinre

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

http://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. 选择断点类型

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
varoldFn = 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 Proxy(http://www.charlesproxy.com/), windows用户使用fiddler(http://fiddler2.com/

© 著作权归作者所有

下一篇: DOM事件简介
H

H_J

粉丝 20
博文 19
码字总数 27342
作品 0
成都
私信 提问
加载中

评论(2)

苏生不惑
苏生不惑
好方便的说
开源无憾
开源无憾
好高端的知识
五个你必须知道的javascript和web 调试技术

Weinre 安装weinre 原理 Tips DOM断点 使用DOM断点 Tips javascript的debugger语句 使用javascript的断点 Tips 原生代码的hook调试 举个例子 Tips 远程映射本地调试 在前端开发中,调试技术是...

迷宫素描者
2013/12/18
160
0
保护 JavaScript 客户端 APP 的最有效方法

客户端技术,如 JavaScript,有很多有用的特性,正因为如此,它成为了世界上最流行的语言之一。它有很多优点,即时解析就是其一。即时解析有不少优点,比如可以在浏览器下载代码并立即执行。...

oschina
2016/11/08
301
0
对Javascript框架开发补充

SimpleFramework是基于服务器端Java技术实现的,并提供了完整的Web应用开发解决方案,包括前端的ui与后台的dao 处理。 Javascript是SimpleFramework的一项重要支撑技术,但Javascript难于调试...

simplesns
2010/12/03
340
2
Ajax学习(1)---Ajax 入门简介

学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术: • HTML 用于建立 ...

华山猛男
2014/03/27
38
0
企业级 JavaScript应用:机遇,威胁与解决方案

作者:Jscrambler 翻译:疯狂的技术宅 原文:blog.jscrambler.com/enterprise-… 未经允许严禁转载 如果你正在使用 JavaScript,那你应该熟悉它的历史。这个有着 24 年历史的编程语言在过去几...

前端先锋
07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
13分钟前
3
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
20分钟前
2
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
27分钟前
2
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
29分钟前
3
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部