五种前端开发必备的调试技术

张红新发布于2019-08-19 14:23 / 2891人阅读

摘要：在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。移动调试断点断点方法远程映射本地调试在移动上面开发调试是很复杂的，所以就有了。

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

Weinre移动调试

DOM 断点

debugger断点

native方法hook

远程映射本地调试

Weinre

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

安装weinre

weinre可以通过npm来安装：

npm install -g weinre

安装完之后，可执行下面的命令来启动：

weinre --httpPort 8080 --boundHost -all-

这样访问自己的127.0.0.1:8080按照提示在需要调试页面中插入一段js，然后就可以调试了。操作界面类似Chrome的DevTools，具体操作可以看下[教程](>

原理

通过在需要调试的页面中引入一段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调试

因为浏览器自己会内置一些类似window对象这些原生的js方法，当你知道原生代码的确有问题，但是你又不能跟踪调试的时候，你就可以用这个方法了。

举个例子

例如我们注意到了一个DOM的属性值发生了变化，但是我们不知道是哪里的代码导致的变化，所以我们可以给DOM元素的setAttribute打个断点，代码如下：

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 Proxy](http://www.charlesproxy.com/），
windows用户使用fiddle。

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

http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html

http://www.cnblogs.com/TankXiao/p/3063871.html

via js8.in

GPU云服务器云服务器前端开发必备 web前端开发必备软件前端开发需要掌握的技术 php必备的技术点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77951.html

Java - 收藏集 - 掘金

摘要：强大的表单验证前端掘金支持非常强大的内置表单验证，以及。面向对象和面向过程的区别的种设计模式全解析后端掘金一设计模式的分类总体来说设计模式分为三大类创建型模式，共五种工厂方法模式抽象工厂模式单例模式建造者模式原型模式。强大的 Angular 表单验证 - 前端 - 掘金Angular 支持非常强大的内置表单验证，maxlength、minlength、required 以及 patt...

XiNGRZ 2019-08-16 10:37 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
前端开发必备调试技巧

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。 Chrome调试工具的使用常用的面板 Elements(元素面板) Console(控制台面板) Sources(资源面板) NetWork(网络面板) 1. Elements panel 定义：通过Elemen...

Heier 2019-08-20 17:58 评论0 收藏0
前端开发必备调试技巧

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。 Chrome调试工具的使用常用的面板 Elements(元素面板) Console(控制台面板) Sources(资源面板) NetWork(网络面板) 1. Elements panel 定义：通过Elemen...

binaryTree 2019-08-29 12:56 评论0 收藏0
前端开发必备调试技巧

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。 Chrome调试工具的使用常用的面板 Elements(元素面板) Console(控制台面板) Sources(资源面板) NetWork(网络面板) 1. Elements panel 定义：通过Elemen...

zhou_you 2019-08-01 17:08 评论0 收藏0