今天开始应该使用 5 个JavaScript调试技巧

标签: 前端 调试 javascript debug | 发表时间:2014-12-14 08:30 | 作者:江小湖Laker
出处:http://segmentfault.com/blogs

我之前使用过用 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的类似工具。
使用快速审核一下你的网站,来获得有用实际的优化技巧。
请输入图片描述

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

via WEB前端开发

相关 [今天开始 javascript 调试] 推荐:

今天开始应该使用 5 个JavaScript调试技巧

- - SegmentFault 最新的文章
我之前使用过用 printf debugging,自此之后我用这种方法似乎总能更快地解决bug. 在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处:. 正如我 之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 有时DOM像有了自己的想法.

Javascipt脚本调试(Javascript debugging)

- - 博客园_首页
根据 CNZZ数据中心对国内主流浏览器的统计分析,2012年3月国产浏览器中360安全浏览器、搜狗高速浏览器和傲游浏览器的使用率分别为24.39%、7.37%、1.75%;国外浏览器中微软IE浏览器、谷歌Chrome浏览器及苹果Safari浏览器的使用率分别为53.40%、3.21%、2.22%.

在IE、Chrome、FireFox中调试Javascript

- - JavaScript - Web前端 - ITeye博客
在IE中调试JS: http://www.qeefee.com/js/debug-javascript-in-IE. 在Chrome中调试JS: http://www.qeefee.com/js/debug-javascript-in-chrome. 在FireFox中调试JS: http://www.blogjava.net/vincent/archive/2009/04/14/265591.html.

调试JavaScript脚本程序(Firefox篇)

- - JavaScript - Web前端 - ITeye博客
试Firefox里面的脚本需要安装一个插件Venkman:. 1.       启动Firefox,浏览页面. 2.       点击“Add to firefox”,重启Firefox就可以使用了. 先简单地介绍一下如何在Venkman里面设置断点和查看变量的值. 1.       启动Firefox,运行网页到test.html.

[收藏]利用 Console 来学习、调试JavaScript

- - Web前端 - ITeye博客
利用 Console 来学习、调试JavaScript. 一  什么是 Console. Console 是用于显示 JS和 DOM 对象信息的单独窗口. 并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console. 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.

从一行CSS调试代码中学到的JavaScript知识

- - JavaScript - Web前端 - ITeye博客
现在到处都是JavaScript,每天都能知道点新东西. 一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享Addy Osmani的 一行代码,这行代码对于你调试你的CSS是很有用的. 注* Addy Osmani 是Google Chrome开发工程师,他前几天开发的 字符串解析模板,马上被兼容最新ES6标准的io.js采纳.

网易前端云课堂,JavaScript程序设计:JS调试

- - CSDN博客推荐文章
本节主要通过一个加法器,介绍JS如何调试. 计算器
. . 1,一般调试JS,打印信息有如下三种:. a,用alert,缺点是每次都弹框. b,用console.log,这个数据量小还可以.

【breakpoint】不依赖浏览器控制台的JavaScript断点调试方法

- - Ryan's Blog (郭亨的博客)
随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决. 然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景. 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).