1. 前端开发工具推荐
张所勇
suoyong@leju.sina.com.cn
zhangsuoyong@163.com
2011/10/26
3. 神级开发工具
? Fiddler
? 作用：监听、修改请求
? 支持所有浏览器
? 下载地址
? http://www.fiddler2.com/fiddler2/
? Required: .netFramework
19. 神级开发工具
? Firebug
? 作用：查看、修改DOM、CSS
? 调试js、监听请求、平台
? 支持firefox
? 下载地址
? http://getfirebug.com/
23. Firebug Console
? console.time()
? console.timeEnd()
? 计算代码执行时间
? 例如：
○ console.time("time");
○ for(var i = 0;i<1000;i++){
○ // do sth
○ }
○ console.timeEnd("time");
结果
24. Firebug Console
? console.assert()
? 断言
? 例如：
○ console.assert(true == 1) 结果正确：不输出
○ console.assert(true == =1) 结果错误：断言失败
30. Firebug 控制台
? 对于$()
? 如果页面内有类似jquery等定义过$:使用页面内
的$
? 否则，$()相当于document.getElementById()
35. Greasemonkey 能做什么
? 脚本库：http://userscripts.org
? 各种脚本：网站功能改进、网页改造（去广告等）
、百度google整合优化、自动翻页、鼠
标手势等等……
36. Greasemonkey 文档、使用
? 文档：
? http://www.firefox.net.cn/dig/toc/
? http://wiki.greasespot.net/Greasemonkey_Manual:
API
? 安装、使用、管理：
? http://www.firefox.net.cn/dig/install/index.html
38. Greasemonkey 自定义函数
? 1、 Metadata_Block 元数据
// ==UserScript==
// @name My Script
// @namespace http://www.example.com/gmscripts
// @description Scripting is fun
// @include http://www.example.com/*
// @exclude http://www.example.org/foo
// @run-at document-end
// @version 1.0
// @icon http://www.example.net/icon.png
// ==/UserScript==
39. Greasemonkey 自定义函数
? 1、 Metadata_Block 元数据
@name 脚本名
@namespace 命名空间
@description 描述
@include 允许规则
@exclude 排除规则
@version 版本
@run-at document-end/ document-start
@icon icon
41. Greasemonkey 自定义函数
? 3、GM_registerMenuCommand(name,fn)
? 添加菜单项
? function commonFN(){
? alert("hello");
? }
? GM_registerMenuCommand("hello",commonFN);
43. Greasemonkey 自定义函数
? 5、 GM_xmlhttpRequest
? 进行Ajax请求，可跨域
? 参数：
? method GET/POST/HEAD
? url 请求地址
? Headers header头
? overrideMimeType 可设置编码
? data POST的数据， 只能string
? binary 二进制模式发送请求
? synchronous 同步
? user 用户名
? Password 密码
44. Greasemonkey 自定义函数
? 5、 GM_xmlhttpRequest
? 进行Ajax请求，可跨域
? 参数(续)：
? onabort abort时
? onload success时
? onerror error时
? onprogress 请求过程中
? onreadystatechange 0 1 2 3 4
? upload 上传时：Object 属性可选(onabort, onerror, onload, onprogress)
45. Greasemonkey 自定义函数
? 5、 GM_xmlhttpRequest
? 进行Ajax请求，可跨域
? onload等事件接受一个object参数，具有以下属性：
? readyState 状态，01234，见下文
? responseHeaders 响应头
? responseText 响应体
? status HTTP响应代码 200、304……
? statusText HTTP响应文字，依赖于服务器的
46. Greasemonkey 自定义函数
? 5、 GM_xmlhttpRequest
? 进行Ajax请求，可跨域
? readystate：
? 0 XMLHttpRequest对象已经创建，但还没有调用open()方法
? 1 已经调用open() 方法，但尚未发送请求
? 2 请求发送完毕
? 3 接收响应过程中
? 4 全部数据接收完毕，连接关闭
47. Greasemonkey 自定义函数
? 5、 GM_xmlhttpRequest
? 示例:请求发布系统历史回顾
GM_xmlhttpRequest({
method: 'GET',
url: dataurl,
overrideMimeType:'text/plain;charset=gb2312',
headers: {
'User-agent': 'Mozilla/5.0 (Windows NT 6.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1',
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'Accept-Charset' :"GB2312;q=0.7,*;q=0.7"
},
onload: function(responseDetails) {
console.debug(responseDetails.responseText);
}
});
56. 推荐开发工具
? Firebug Lite
? 作用：类firebug Lite
? 支持： IE6+, Firefox, Opera, Safari and Chrome
地址:
http://getfirebug.com/firebuglite
58. Firebug-lite 使用
? 将以下代码放入需调试的页面中
? <script type="text/javascript" src
http://static.jiaju.com/jiaju/com/js/scroll/firebug-lite.js
"></script>
? 怎么放？
? 1、页面源代码另存为文件
? 2、fiddler autoResponder 见前文
60. 推荐开发工具
? IETester
? 作用：测试各版本IE，大多用来测试IE6
? 支持： IE5.5+
地址:
http://www.my-debugbar.com/wiki/IETester/HomePage
62. IETester 问题
? 存在一些BUG
? 1、前进后退按钮不正常
? 2、焦点有时不太正确
? 3、java applets 无法使用
? 4、IE6模式下flash不太正常
? 5、CSS滤镜有时不正常
? 6、window.open方法不正常
? 7、经常会报一些未知的js错误
63. IETester调试工具
? 调试工具：debugbar
? 地址： http://www.debugbar.com/download.php
64. IETester使用情境
? 使用情境：粗略调试IE6问题时
? 推荐IE6下调试方式：虚拟机(XPMod or VM、virtualbox)
65. 推荐开发工具
? Windows Virtual PC（XP Mode）
? 作用：win7下虚拟机
? 支持：window7
地址:
http://www.microsoft.com/china/windows/virtual-pc/
67. Windows Virtual PC 介绍
? 什么是 Windows Virtual PC？
? Windows Virtual PC 是用于 Windows 7 的最新 Microsoft
虚拟化技术。
? 什么是XP Mode？
? Windows XP Mode（XPM）是基于Virtual PC 技术在
Windows 7 中运行Windows XP 的应用程序。
? 他们之间是什么关系？
? Windows Virtual PC是 XP Mode 的运行时引擎。
68. Windows Virtual PC 优点
? 1、微软官方虚拟程序，支持硬件虚拟化技术
? 2、剪贴板共享
? 3、可以使用主机打印机，智能卡等
? 4、可以使用休眠方式，打开XPM更快
? 5、XP为官方正版，不用激活
77. 推荐开发工具
? FastStone Capture
? 作用：屏幕标尺、取色、放大镜
? 截图、屏幕录制
地址:
http://www.scootersoftware.com/
82. 推荐开发工具
? Fire Shot
? 作用：火狐截屏
地址:
http://screenshot-program.com/fireshot/
83. Fire Shot功能
? 功能：截屏
? 优点: 可以截取整个页面
? 缺点：仅支持火狐
? 用途：查看DOM延时渲染效果
85. 推荐开发工具
? Fire Cookie
? 作用：查看、操作cookie
地址:
http://getfirebug.com/wiki/index.php/Firebug_Extensions
91. YSlow功能
? 工具
推荐：All JS Beautified--寻找页面内某javascript代码
92. 推荐开发工具
? YUI Compressor
? 作用：压缩js、css
? 需要：java环境
地址:
http://developer.yahoo.com/yui/compressor/
http://java.sun.com/javase/downloads/index.jsp
93. YUI Compressor安装
? 1、安装jdk
? 2、配置JAVA_HOME环境变量
? 1、点击我的电脑—>属相—>高级—>环境变量—>系统变量
? 2、新建变量，变量名JAVA_HOME 路径：E:Program FilesJavajdk1.6.0_11 （我
的是在E盘，你的JDK安装到那个盘，就写那个盘）
? 3、找到path变量，在后面添加路径：;%JAVA_HOME%jre6bin
? 3、运行YUI Compressor包中的install.cmd
98. YUI Compressor介绍
? 支持混淆
? 修改compressor.cmd中
? "%JAVA_HOME%binjava.exe" -jar "%~dp0yuicompressor.jar" --charset GB18030 "%~nx1" -o
"%RESULT_FILE%“
? 加入或者去掉 --nomunge
