天高云淡,让心情旅行。 注册 | 登陆
浏览模式: 标准 | 列表全部文章

[转]前端开发工具整理

1.Firebug http://getfirebug.com/
最流行的前端开发工具

2.HttpWatch http://www.httpwatch.com/
集成在IE和Firefox上的监听HTTP和HTTPS的工具

3.Fiddler http://www.fiddler2.com/fiddler2/
Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理

4.HttpFox https://addons.mozilla.org/eu/firefox/addon/6647?lang=en-US
和HTTPWatch很类似的一个工具

5.Yslow http://developer.yahoo.com/yslow/
Firebug的一个扩展,可以根据高性能网站的一些准则来分析网页并且提出建议来提高网站的性能

6.Css Usage https://addons.mozilla.org/zh-CN/firefox/addon/10704
Firebug的一个扩展,可以用来察看哪些CSS被用到了

7.VIM http://www.vim.org/
一个高级的文本编辑工具,是在UNIX系统上面VI编辑器的升级版本

8.Editplus http://www.editplus.com/
Windows系统上的一个好用的文本编辑器

9.DNS Flusher https://addons.mozilla.org/en-US/firefox/addon/7408
Firefox上的一个附加组件,当HOST文件改变时可以很快地更新页面而不需要重启浏览器

10.PageSpeed http://code.google.com/intl/zh-CN/speed/page-speed/
Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能,并获得有关如何改进性能的建议

11.Dust-me Selectors https://addons.mozilla.org/zh-CN/firefox/addon/5392
Firefox上的一个附加组件,可以找出没有用到的CSS选择符

12.Myspace Performance Tracker http://msfast.myspace.com/
Myspace的性能分析工具, 可以分析到页面渲染的各个阶段的时间、CPU和内存的消耗情况,只使用于IE中

13.YUI Compressor http://developer.yahoo.com/yui/compressor/
用java写的一个代码压缩工具,使用方法: java -jar yuicompressor-x.y.z.jar [options] [input file]

14.JS Beautifier http://jsbeautifier.org/
在线JS格式化工具

15.JSLint http://jslint.com/
在线JS校验工具,使用请注意“JSLint will hurt your feelings.”

16.JSCompress http://jscompress.com/
在线JS压缩工具

17.JSMin http://www.crockford.com/javascript/jsmin.html
JS压缩工具

18.HTML2Javascript http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明

19.Web Developer https://addons.mozilla.org/da/firefox/addon/60?lang=zh-CN
Firefox的一个附加组件,给Firefox增加了一个菜单以及工具栏,里面包含了很多开发工具

20.JS Regexp Generator http://www.jslab.dk/tools.regex.php
一个制作正则表达式的在线工具

21.Opera Dragonfly http://www.opera.com/dragonfly/
Opera Dragonfly 是Opera浏览器的跨设备,跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM, 并且查看移动设备或计算机上的错误

22.IE Web Developer http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
微软的浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具

23.DynaTrace http://ajax.dynatrace.com/pages/
一个页面性能分析工具,是针对浏览器 IE 6 ~ 8 的。它可以用来分析页面渲染时间、DOM方法执行时间,甚至可以看到 JS 代码的解析时间。多谢“有米啦”同学的推荐,好友卓群的博客以前也介绍过

24.IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage
IETester是一个免费的浏览器,它同时包括了IE 5.5、IE 6、IE 7、IE 8的所有内核,多版本IE测试好工具,DIV测试,CSS兼容和各个版本浏览器兼容检测工具

25.Companion JS http://www.my-debugbar.com/wiki/CompanionJS/HomePage
IE下的js调试工具,需要结合Microsoft Script Debugger使用,通过安装这个工具,但页面出现错误时会在左上角弹出一个小错误提示,点击会在IE下面显示出一个错误控制台,就如FF下的firebug控制台一样,错误信息提示很详细

26.Live Http Header https://addons.mozilla.org/zh-CN/firefox/addon/3829
live HTTP headers是firefox的一个插件,可以查看到http头,非常方便

27.Closure Compiler http://code.google.com/intl/zh-CN/closure/compiler/
Google的JavaScript编译工具

还有其他前端总结的工具可以看一下,如云谦的http://www.chencheng.org/blog/2008/10/25/f2e-manual/,嗷嗷的http://www.aoao.org.cn/resource/

原文链接: http://adamlu.com/?p=268

[转]如何书写高效、可维护、组件化的CSS的演示文档

Tags: css

新年快乐

新年快乐

大小: 26.59 K
尺寸: 323 x 210
浏览: 4 次
点击打开新窗口浏览全图

javascript取消文本选定

最近在做拖动布局. 发现有文本选定的时候, 进行拖动很不好看.

javascript选定文本取消, 能兼容所有主流浏览器了:

if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}

对于文本框(input,textarea)中的文本选定取消, 这种方法会有一些问题.

不过也有办法, 记录下文本框中的value,再清空,再重新赋值. 方法有点搓, 不过能兼容所有浏览器.

 

Tags: javascript

比较有效的javascript无提示关闭窗口

比较有效的javascript无提示关闭窗口. _self也可以换成_top/_parent之类的用于关闭顶层/父级窗口.
一般浏览器中都OK的.  如果有更好的方法, 不吝赐教.
 
<script type="text/javascript">
window.opener = null;
window.open('', '_self', ''); 
window.close();
</script>

Tags: javascript

MySQL Show命令的使用

show tables或show tables from database_name;
解释:显示当前数据库中所有表的名称

show databases;
解释:显示mysql中所有数据库的名称

show processlist;
解释:显示系统中正在运行的所有进程,也就是当前正在执行的查询。大多数用户可以查看
他们自己的进程,但是如果他们拥有process权限,就可以查看所有人的进程,包括密码。

show table status;
解释:显示当前使用或者指定的database中的每个表的信息。信息包括表类型和表的最新更新时间

 

show columns from table_name from database_name; 或show columns from database_name.table_name;
解释:显示表中列名称

show grants for user_name@localhost;
解释:显示一个用户的权限,显示结果类似于grant 命令

show index from table_name;
解释:显示表的索引

show status;
解释:显示一些系统特定资源的信息,例如,正在运行的线程数量

show variables;
解释:显示系统变量的名称和值

show privileges;
解释:显示服务器所支持的不同权限

show create database database_name;
解释:显示create database 语句是否能够创建指定的数据库

show create table table_name;
解释:显示create database 语句是否能够创建指定的数据库

show engies;
解释:显示安装以后可用的存储引擎和默认引擎。

show innodb status;
解释:显示innoDB存储引擎的状态

show logs;
解释:显示BDB存储引擎的日志

show warnings;
解释:显示最后一个执行的语句所产生的错误、警告和通知

show errors;
解释:只显示最后一个执行语句所产生的错误

Tags: mysql

javascript中的var_dump

php中的var_dump很方便.

void var_dump ( mixed $expression [, mixed $expression [, $... ]] )

此函数显示关于一个或多个表达式的结构信息,包括表达式的类型与值。数组将递归展开值,通过缩进显示其结构。

配合上xdebug (Variable Display Features), 还能够根据不同变量类型使用不同颜色区分.

 

现在javascript也能做到类似php中var_dump的效果了. Shuns封装了一个Dump函数:

» 阅读全文

Tags: javascript

PHP type comparison tables

不用介绍, 看图↓

Comparisons of $x with PHP functions
大小: 11.03 K
尺寸: 500 x 488
浏览: 11 次
点击打开新窗口浏览全图

Loose comparisons with ==
大小: 6.9 K
尺寸: 500 x 278
浏览: 4 次
点击打开新窗口浏览全图

Strict comparisons with ===
大小: 6.79 K
尺寸: 500 x 286
浏览: 5 次
点击打开新窗口浏览全图

Tags: php

记录总数:25512345678910»