JS调试必备的5个debug技巧

1. debugger;

我以前也说过，你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。
需要带有条件的断点吗？你只需要用if语句包围它：

代码如下:

if (somethingHappens) {

debugger;

}

但要记住在程序发布前删掉它们。

2. 设置在DOM node发生变化时触发断点

有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。

谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。

断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。

3. Ajax 断点

XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，在特点的Ajax调用发生时触发它们。

当你在调试Web应用的网络传输时，这一招非常的有效。

4. 移动设备模拟环境

谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。

找到它的方法是：按F12，调出开发者工具，然后按ESC键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。

当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。

5. 使用Audits改进你的网站

YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。

它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。

还有其它的吗？

没有这些工具，我不知道将如何开发。我还会写更多的关于这方面的技巧——一旦我有所发现，请关注我的最新文章。

赞 (0)

相关推荐

  • 使用Firebug对js进行断点调试的图文方法

    使用Firebug对js进行断点调试的图文方法

    具体步骤: a. 打开Firebug后,启用"脚本"调试,找到引用的脚本文件(或者行内js): b. 在适当的位置加入断点: c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断.如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断: d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试. 确实非常简单!用Firebug断点调试的优点总结如下: 能加断点的行用绿色行号,非常直观: call stack用两种方式显示出来,很

  • 调试Node.JS的辅助工具(NodeWatcher)

    调试Node.JS的辅助工具(NodeWatcher)

    貌似在Windows平台下不支持 fs.watchfile .我又不想使用IIS NODE,所以我花了点时间写了个帮助调试的小工具. 这个工具可以做到: 监视主js文件下所有子目录相关文件的更改.有更改后重启Node进程 可以将日志输出到此工具,便于在浏览器里检视. 用法: NodeWatcher.exe main.js 所有参数: 复制代码 代码如下: NodeWatcher.exe 主JS程序 [其它可选参数] 主JS程序必须指定.相当于 node 主js程序 -r :[true | fal

  • JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • 利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

    利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)

    前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行. 配置 就目前来说,在浏览器端并行调试JavaScript与Node.js还属于新特性,新体验.为了能够正常使用,你还需要做如下配置: 1.输入url:chrome://flags/#enable-devtools-experiments. 注:如果使用中文版Chrome,显示的配置项名称应该为:

  • js调试工具Console命令详解

    js调试工具Console命令详解

    一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te

  • JS调试必备的5个debug技巧

    JS调试必备的5个debug技巧

    1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: 复制代码 代码如下: if (somethingHappens) { debugger; } 但要记住在程序发布前删掉它们. 2. 设置在DOM node发生变化时触发断点 有时候你会发现DOM不受你的控制,自己会发生一些奇怪的变化,让你很难找出问题的根源. 谷歌浏览器的开发工具里有一个超级好用的功能,专门可以对付这种情况,

  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的,往往在调试代码期间更加能够体现出编程者的水平高低以及分析问题的准确度.不少初学者在寻找错误原因时,总是不得要领,花费了大量时间却无法解决一些最终证明是相当简单的Bug.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,

  • 灵活应用js调试技巧解决样式问题的步骤分享

    由于种种原因,例如:代码逻辑复杂.时间久了遗忘处理细节.或者根本就是接手修改别人遗留的bug,在这种情况下,debug就会变成一件头疼的事情. 在此分享一些JS调试方面的技巧,针对各种疑难杂症,往往能起到较好的效果. Step 1:检查服务器直接render出来的内容 使用查看源文件的方式,这一步首先明确,页面HTML片段是否在服务器端就已经不正常了. Step 2:比较实际的HTML内容和服务器render出来的原始内容之间的差异 可以使用一些前端工具(例如:IE下的开发人员工具.Firebu

  • sublime text配置node.js调试(图文教程)

    sublime text配置node.js调试(图文教程)

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> new Build System... 3. 将文件保存为 JavaScript.sublime-build 4. 文件内容为: { "cmd": ["node", "$file"], "file_regex": "^[

  • 简单实用的js调试logger组件实现代码

    但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值.debugger使用起来其实也挺纠结的,只有ie支持.所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦. 于是,有了下面说的这个js组件.这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用lo

  • JS尾递归的实现方法及代码优化技巧

    本文实例讲述了JS尾递归的实现方法及代码优化技巧.分享给大家供大家参考,具体如下: 在学习数据结构和算法的时候,我们都知道所有的递归都是可以优化成栈+循环的. 对于特定的递归函数,一般我们都是手动对它们进行优化的. 在学习scala的时候,接触到尾递归的概念.我们只要将递归写成尾递归方式,编译器会自动帮助我们优化. ps:并不是所有的递归都可以改写成尾递归 在js中,尾递归通常会被解释器优化.然而,并不是所有的js解释器都支持尾递归优化. 对于不支持尾递归优化的环境,我们需要手动将递归优化成栈+

  • 轻轻松松学JS调试（不下载任何工具）

    轻轻松松学JS调试（不下载任何工具）

    但是,我对JS调试还是有一定经验的: 首先当我们写好一段JS 的时候: 1. 点击IE浏览器 -- 工具栏 -- 点击开发人员工具或按F12我们调试界面 点击最左侧可以和 VS2005 一样设置断点了 点击调试: 就可以回到页面 运行 或 刷新 进行调试了 其实都 是微软的产品 难免和 VS 一样 ,所以学起来都很轻松 既然和VS也一样 自然 VS也能调试 JS 火狐也是差不多 选择错误控制台(CTRL+SHIFT+J) 可以直接输入JS测试 比较好用的就是 firefox+firebug结合查

  • js调试系列 断点与动态调试[基础篇]

    js调试系列 断点与动态调试[基础篇]

    上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的. 其实我们已经看到了源码,只要读下源码即可知道他是怎么实现的了. function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i

  • JS 调试中常见的报错问题解决方法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Function.m.parseJSON (jquery.js:8515) at Object.success (crud.html:45) at j (jquery.js:3143) at Object.fireWith [as resolveWith] (jquery.js:3255) at x (

  • js调试系列 初识控制台

    js调试系列 初识控制台

    写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息.在他们眼里 alert 足以.好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目

随机推荐