推荐5 个常用的JavaScript调试技巧

我之前使用过用printf debugging，自此之后我用这种方法似乎总能更快地解决bug。
在某些情况下需要更好的工具，下面是其中的一些佼佼者，我敢肯定你会发现它们的有用之处：

1. debugger;

你可以使用“debugger;”语句在代码中加入强制断点。
需要断点条件吗？只需将它包装它在IF子句中：

代码如下:

if (somethingHappens) {
debugger;
}

只需记住在上线前移除。

2. 当节点变化时断开

有时DOM像有了自己的想法。当不可思议的变化发生时很难找到问题的根源。
Chrome开发人员工有调试这个问题的超级有用技能。这就是所谓的“Break on…”，你可以通过在元素选项卡上右键DOM节点找到它。

断点可以在节点被删除后设置，当节点的属性更改或者其子树中的节点变化时。

3. Ajax断点

XHR断点或我称作的Ajax断点，也允许当一个预期Ajax请求创建时断开。
当调试你的web应用的网络时这是个让人吃惊的工具。

4. 模拟不同的移动设备

Chrome增加了内置的移动设备模拟工具，这将简化你的日常工作。
选择任何非Console的选项卡找到它们，按键盘上的esc键并选择你想摸你的移动设备。

你当然不会得到一个真正的iPhone，但尺寸、触摸事件和agemt都会为你效仿。

5. 通过审核提升你的站点

YSlow是个伟大的工具。Chrome也在开发人员工具下包含一个称作Audits的类似工具。
使用快速审核一下你的网站，来获得有用实际的优化技巧。

还有什么呢?

没有这些工具我不能想象如何开发。当我发现新的后我会发布更多，敬请期待。

赞 (0)

相关推荐

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • JavaScript的兼容性与调试技巧

    JavaScript的兼容性与调试技巧

    关于JavaSctipt的兼容性,最懒的办法就是用jQuery的工具函数.尽量不要用那些什么ECMAScript之类的函数,因为很多浏览器都会报找不到函数的错误.下面列出一些在开发过程中碰到过的javascript问题. 1.参数列表多个逗号. $.ajax({})方法,非常熟悉了吧,但是在IE中有个小地方要注意,如果你在拼接参数列表的时候最后一个也加了逗号,那么毫无疑问,IE下全部JS失效. 调试时报如下错误: 缺少标识符.字符串或数字 data: { S_Id: Subject_Id, le

  • 分享一则javascript 调试技巧

    不用alert,用console.log() 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function showLog(message){     console.log(message); } function test(name){     showLog(name); } test("hello"); <

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

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

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

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

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

  • JS高级调试技巧：捕获和分析 JavaScript Error详解

    反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

  • 概述javascript在Google IE中的调试技巧

    概述javascript在Google IE中的调试技巧

    今天,发现了一个之前从未注意的角落,相信能够大大提高自己写JS的速度.能够迅速发现错误. 例如,今天的加班中调试一个js错误发现的一个例子. 1.Google浏览器报的错 以上是google浏览器报的错误,只报一个错误文件,相信是什么地方由null调用了length属性导致的.由于这是一个已经维护了几年的系统,人来人往,不知道经历了几个人之手.而且业务逻辑极其复杂,js文件都上千行.要一个length一个length的排除,显然是不切实际的. 2014.3.18 今天才知道,唉,原来google

  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

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

  • 推荐5 个常用的JavaScript调试技巧

    推荐5 个常用的JavaScript调试技巧

    我之前使用过用printf debugging,自此之后我用这种方法似乎总能更快地解决bug. 在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处: 1. debugger; 你可以使用"debugger;"语句在代码中加入强制断点. 需要断点条件吗?只需将它包装它在IF子句中: 复制代码 代码如下: if (somethingHappens) { debugger; } 只需记住在上线前移除. 2. 当节点变化时断开 有时DOM像有了自己的想法.当不可

  • 实用Javascript调试技巧分享(小结)

    实用Javascript调试技巧分享(小结)

    见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡..因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点"偏科"了.下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信. 1. 不要使用alert 首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打

  • 推荐几个不错的console调试技巧实现

    推荐几个不错的console调试技巧实现

    在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多实用的方法,这些方法可以使我们的调试过程更加容易,也表达得更加直观,更加丰富多彩,下面我们就来看看有哪些实用的方法吧! 1.console.log() 我们经常会使用console.log来打印出某个变量的值或者某个实体对象,也可以传入多个变量参数,它会按照传入顺序进行打印: 1. 传入一个变量 c

  • JavaScript必备的断点调试技巧总结（推荐）

    JavaScript必备的断点调试技巧总结（推荐）

    目录 为什么要使用 debugger Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs 使用 VS Code 调试 Nodejs Conditional Breakpoint 条件断点 总结 为什么要使用 debugger 这篇文章将介绍如何使用断点来进行 JavaScript 调试.在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试? 我们需要了解使用断点的必要性,否则下文介绍的所有断点调试方法都会是废话.console.

  • javascript简写常用的12个技巧（可以大大减少你的js代码量）

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

  • js经验分享 JavaScript反调试技巧

    在此之前,我一直都在研究JavaScript相关的反调试技巧.但是当我在网上搜索相关资料时,我发现网上并没有多少关于这方面的文章,而且就算有也是非常不完整的那种.所以在这篇文章中,我打算跟大家总结一下关于JavaScript反调试技巧方面的内容.值得一提的是,其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了. 对于JavaScript来说,你只需要花一点时间进行调试和分析,你就能够了解到JavaScript代码段的功能逻辑.而我们所要讨论的内容,可以给那些想要分析你JavaScript代码

  • 基于ios逆向过程中lldb调试技巧(推荐)

    假如你准备在模拟器里面运行这个,你可以在"(lldb)"提示的后面输入下面的: (lldb) po $eax LLDB在xcode4.3或者之后的版本里面是默认的调试器.假如你正在使用老一点版本的xcode的话,你又GDB调试器.他们有一些基本的相同的命令,因此假如你的xcode使用的是"(gdb)"提示,而不是"(lldb)"提示的话,你也能够更随一起做,而没有问题. "po"命令是"print object&qu

随机推荐