JS调试必备的5个debug技巧
1. debugger;
我以前也说过,你可以在JavaScript代码中加入一句debugger;
来手工造成一个断点效果。
需要带有条件的断点吗?你只需要用if
语句包围它:
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。
它可快速的审计你的网站,给你提出非常实际有效的优化你的网站的建议和方法。
还有其它的吗?
本文转载:http://www.jb51.net/article/47812.htm
JS调试必备的5个debug技巧的更多相关文章
- JS调试必备的5个debug技巧_javascript技巧
JS调试必备的debug调试javascript技巧 1. debugger; 我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗? ...
- JavaScript程序员必备的5个debug技巧
1. debugger:我以前也说过,你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果.需要带有条件的断点吗?你只需要用if语句包围它: if (somethingH ...
- 必备的JS调试技巧汇总
转自http://www.jb51.net/article/88891.htm 前言:任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写 ...
- 前端开发中的JS调试技巧
前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)
天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧) Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...
- 一探前端开发中的JS调试技巧
前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- gdb调试的艺术——Debug技巧
调试的艺术——Debug技巧总结 (本文从写好的wiki里粘出来的,格式稍乱不影响阅读) 用Q+编号代表问题,A+编号代表答案.用这种方式组织.如无特别说明,这些技巧都是针对Visual Studio ...
- eclipse debug调试java程序的九个技巧
九个技巧: 逻辑结构 条件debug 异常断点 单步过滤 跳到帧 Inspect expressions display 远程debug 最早开始用eclipse的debug的时候,只会F5 F6 F ...
随机推荐
- 【锋利的JQuery-学习笔记】遮罩层
效果图: 鼠标移动到上面后---> html: <div id="jnBrandList"> <ul> <li> <a href= ...
- Properties --- C++读配置信息的类(一)
http://blog.csdn.net/billow_zhang/article/details/4304980 在开发实践中,积累了一些通用的C++ 类库,在此写出来给大家分享.也希望能给出更好的 ...
- 简单易懂的现代魔法——Play Framework攻略1
哇哈哈,寒假结束啦,于是我又开新坑了....这次的主角可是大名鼎鼎的Play Framework!!那么闲话少说,开始攻略吧! 1.什么是Play Framework? 大名鼎鼎的play frame ...
- [转]ubuntu server:开机自动登录
原文链接: Ed29.com http://ed29.com/ubuntu%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%87%AA%E5%8A%A8%E7%99%BB%E5%BD%95 ...
- Linux Shell 数字计算与比较
直接上脚本, 使用$(())以及$[]进行数字计算 数值比较:n1 -eq n2检查n1是否等于n2 n1 -le n2检查n1是否小于等于n2n1 -ge n2检查n1是否大于等于n ...
- VS2010/MFC编程入门之一(VS2010与MSDN安装过程图解)
原文地址: VS2010/MFC编程入门之一(VS2010与MSDN安装过程图解)-软件开发-鸡啄米 http://www.jizhuomi.com/software/139.html 上一讲中鸡 ...
- 配置Excel的DCOM权限
异常详细信息: System.UnauthorizedAccessException: 检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-00000000004 ...
- chmod u+x 脚本文件
[root@ossec-server Shell]# chmod u+x whologged.sh解释: chmod:改变权限 u:文件所有用户 +x: 增加可执行权限 [root@ossec-ser ...
- PHP工程师面临成长瓶颈
作为开发中应用最广泛的语言之一,PHP有着大量的粉丝,那么你是一名优秀的程序员吗?在进行自我修炼的同时,你是否想过面对各种各样的问题,我该如何突破自身的瓶颈,以便更好的发展呢?PHP工程师面临成长瓶颈 ...
- laravel速记(笔记)
命令行: php artisan controller:make UserController This will generate the controller at /app/controller ...