文档章节

javascript和web 调试技术

 那山那水
发布于 2014/03/02 21:35
字数 541
阅读 155
收藏 12

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

Weinre移动调试

DOM 断点

debugger断点

native方法hook

远程映射本地调试

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


如果你嫌每次都要在调试的页面引入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:

 

if(waldo) {

debugger;

}

这时候打开console面板,就可以调试了

Tips


如果你不知道怎么调试,那么尽快看下:Chrome DevTools中断点部分的教程

原生代码的hook调试


© 著作权归作者所有

上一篇: javascript的作用域
下一篇: JS拖拽翻页效果
粉丝 5
博文 14
码字总数 17425
作品 0
成都
私信 提问
保护 JavaScript 客户端 APP 的最有效方法

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

oschina
2016/11/08
301
0
5 个非常有用的 JavaScript 调试工具

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色,比如动态和弱类型,它还有一等函数(first class function)。另一个特点是它是一个多范型(multi-paradigm)语言,支持...

tsl0922
2012/05/06
4.9K
11
5个最好的 javascript 调试工具

JavaScript主要被用作一种语言来实现客户端浏览器的一部份,目的是为了提供更好的用户界面。JavaScript是已经被应用于许多现代的网站,也有很多现代网络应用程序。 JavaScript被认为是基于原型...

晨曦之光
2012/02/23
27.8K
30
对Javascript框架开发补充

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

simplesns
2010/12/03
340
2
Rails Everyday: SJR 结合 Stimulus 构建可维护的JavaScript代码

这几个月都在使用 DHH 今年新发布的 StimulusJS 框架来写 Web 程序, 真的感觉很好, 感觉开发Web项目充满了生产力, 而不像 AngularJS/React 前端框架, 看着技术吊炸天, 但是真正要写项目的时候...

ManateeLazyCat
2018/09/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis集群搭建

服务器资源 ip 账号 配置 操作系统 xxx.70 root/xxx 磁盘50G(/)+150G(/home)、内存16G、CPU 16core CentOS Linux release 7.2.1511 (Core) xxx.74 root/xxx 磁盘50G(/)+150G(/home)、......

jxlgzwh
17分钟前
2
0
avro

一、 ```我们已经接触过很多序列化框架(或者集成系统),比如protobuf、hessian、thrift等,它们各有优缺点以及各自的实用场景,Avro也是一个序列化框架,它的设计思想、编程模式都和thi...

hexiaoming123
19分钟前
4
0
QML TextInput的字体超出控件范围

本文链接:https://blog.csdn.net/chyuanrufeng/article/details/54691998 问题描述 :QML TextInput输入内容超过TextInput的大小 当输入过多的字符串时,会出现内容超过TextInput的大小,字...

shzwork
20分钟前
2
0
《Java 8 in Action》Chapter 10:用Optional取代null

1965年,英国一位名为Tony Hoare的计算机科学家在设计ALGOL W语言时提出了null引用的想法。ALGOL W是第一批在堆上分配记录的类型语言之一。Hoare选择null引用这种方式,“只是因为这种方法实...

HelloDeveloper
21分钟前
2
0
进击的 Java ,云原生时代的蜕变

作者| 易立 阿里云资深技术专家<br /> <br />导读:云原生时代的来临,与Java 开发者到底有什么联系?有人说,云原生压根不是为了 Java 存在的。然而,本文的作者却认为云原生时代,Java 依然...

阿里巴巴云原生
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部