分类目录归档:Tools

Development Tools

IE 下使用 Firebug Lite 调试

Firebug Lite,它确实不错,主要可以用于 IE 的 CSS 样式调试,因为 IE developer toolbar 和 IE8 自带的调试工具实在是太难用了。

firebug-lite

Firebug Lite 在 IE 中的使用方法:在网页的 head 部分里添加如下 JS 代码即可在 IE 中使用 Firebug Lite 调试了。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

如果想要在线上的页面进行调试,你可以参考如下方法:

<a href="javascript: (function() {
    var d = document,
    s = d.getElementById('firebug-lite');
    if (s != null) return;
    s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://getfirebug.com/firebug-lite.js';
    d.body.appendChild(s);
})();
void(0);"> firebug-lite </a>

运行上面的 HTML 代码,在 “firebug-lite” 的连接上右击选择 “添加到收藏夹” (这个应该针对 IE ,chrome 右键没有加入收藏),把这个连接添加到收藏夹。然后打开任意一个网页,打开后,在收藏夹中找到刚才收藏的链接,点一下,再等一小会儿,你就会看到网页的右下角有 “firebug” 的这个工具了。

解决 Dreamweaver 提示“无法更新菜单,将不会安装该扩展”

个人使用的是 Dreamweaver CS5 官方中文原版,在我自动更新 html5 pack 后,就提示“无法更新菜单,将不会安装该扩展”,更要命的是每次开启 Dreamweaver 都会自动安装扩展且每次都会出现这个错误提示。最后还是在 google 上找到了答案。

废话不多说,方法如下:

删除 C:\Documents and Settings\Administrator\Application Data\Adobe\Dreamweaver CS5\zh_CN\Configuration\Menus 下的 Menus.xbk、Menus.xml 两个文件,然后重启 Dreamweaver 即可成功安装扩展,此方法同样适用无法安装 Zen Coding 扩展的朋友。

注意:

  1. 此文件夹为隐藏文件,请设置显示隐藏文件;
  2. 我使用的环境为:Windows xp sp3、Dreamweaver CS5 官方中文原版;

以上方法在本机测试完美有效。

DW 中使用正则表达式查找替换

在WEB前端开发过程中,经常会遇到批量查找替换某些代码,擅于运用工具会大大提高你的开发效率,在这里简单介绍下在DW里用正则查找替换的方法:

问题: 给属性添加双引号,例如:

<a href=index.html title=前端笔记>
    <img src=images/img.jpg width=21 height=5 alt=前端笔记 />
</a>

现在想把它们的值都加上引号,例如:

<a href="index.html" title="前端笔记">
    <img src="images/img.jpg" width="21" height="5" alt="前端笔记" />
</a>

由于这些东西有很多,单个修改很麻烦,怎么办?

解决办法:使用DW查找替换中的正则表达式功能。

在查找框中输入:

(\s+\w+)\s*=\s*([^>"\s]+)

在替换框中输入:

(\s+\w+)\s*="$1"

OK,问题解决了。注:其中 \s* 表示空格!

在此给大家推荐一个正则表达式查找替换的工具:

Actual Search & Replace

Actual Search & Replace

Actual Search & Replace 是一个简单易用,但功能强大的工具,可以对多个 ASCII (文本,HTML 等) 文件进行搜索和替换操作。下面是该程序的主要功能:

  1. 通过指定一个路径,文件名类型和查询查找文件。通过短语,单词,搜索引擎中的查询,多行或正则表达式来搜索文档。
  2. 可以在上一次搜索结果中搜索。
  3. Actual Search & Replace 可以在找到文件中高亮显示包含搜索单词和短语的行。
  4. 在文档中替换,插入和删除短语或行。
  5. 批量操作允许你通过一键操作来执行大量的替换工作。

表达式全集

正则表达式有多種不同的风格。下表是在PCRE中元字符及其在正则表达式上下文中的行为的一个完整列表:

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如,「n」匹配字符「n」。「\n」匹配一个换行符。序列「\\」匹配「\」而「\(」则匹配「(」。
^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性,^也匹配「\n」或「\r」之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性,$也匹配「\n」或「\r」之前的位置。
* 匹配前面的子表达式零次或多次。例如,zo*能匹配「z」以及「zoo」。*等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如,「zo+」能匹配「zo」以及「zoo」,但不能匹配「z」。+等价于{1,}。
? 匹配前面的子表达式零次或一次。例如,「do(es)?」可以匹配「does」或「does」中的「do」。?等价于{0,1}。
{n} n是一个非负整数。匹配确定的n次。例如,「o{2}」不能匹配「Bob」中的「o」,但是能匹配「food」中的两个o。
{n,} n是一个非负整数。至少匹配n次。例如,「o{2,}」不能匹配「Bob」中的「o」,但能匹配「foooood」中的所有o。「o{1,}」等价于「o+」。「o{0,}」则等价于「o*」。
{n,m} m和n均为非负整数,其中n<=m。最少匹配n次且最多匹配m次。例如,「o{1,3}」将匹配「fooooood」中的前三个o。「o{0,1}」等价于「o?」。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符(*,+,?,{n},{n,},{n,m})后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串「oooo」,「o+?」将匹配单个「o」,而「o+」将匹配所有「o」。
. 匹配除「\n」之外的任何单个字符。要匹配包括「\n」在内的任何字符,请使用像「[.\n]」的模式。
(pattern) 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到,在VBScript中使用SubMatches集合,在JScript中则使用$0…$9属性。要匹配圆括號字符,请使用「\(」或「\)」。
(?:pattern) 匹配pattern但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用或字符「(|)」来组合一个模式的各个部分是很有用。例如「industr(?:y|ies)」就是一个比「industry|industries」更简略的表达式。
(?=pattern) 正向肯定预查,在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,「Windows(?=95|98|NT|2000)」能匹配「Windows2000」中的「Windows」,但不能匹配「Windows3.1」中的「Windows」。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?!pattern) 正向否定预查,在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如「Windows(?!95|98|NT|2000)」能匹配「Windows3.1」中的「Windows」,但不能匹配「Windows2000」中的「Windows」。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始
(?<=pattern) 反向肯定预查,与正向肯定预查类拟,只是方向相反。例如,「(?<=95|98|NT|2000)Windows」能匹配「2000Windows」中的「Windows」,但不能匹配「3.1Windows」中的「Windows」。
(?<!pattern) 反向否定预查,与正向否定预查类拟,只是方向相反。例如「(?<!95|98|NT|2000)Windows」能匹配「3.1Windows」中的「Windows」,但不能匹配「2000Windows」中的「Windows」。
x|y 匹配x或y。例如,「z|food」能匹配「z」或「food」。「(z|f)ood」则匹配「zood」或「food」。
[xyz] 字符集合。匹配所包含的任意一个字符。例如,「[abc]」可以匹配「plain」中的「a」。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如,「[^abc]」可以匹配「plain」中的「p」。
[a-z] 字符范围。匹配指定范围内的任意字符。例如,「[a-z]」可以匹配「a」到「z」范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如,「[^a-z]」可以匹配任何不在「a」到「z」范围内的任意字符。
\b 匹配一个单词边界,也就是指单词和空格间的位置。例如,「er\b」可以匹配「never」中的「er」,但不能匹配「verb」中的「er」。
\B 匹配非单词边界。「er\B」能匹配「verb」中的「er」,但不能匹配「never」中的「er」。
\cx 匹配由x指明的控制字符。例如,\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则,将c视为一个原义的「c」字符。
\d 匹配一个数字字符。等价于[0-9]。
\D 匹配一个非数字字符。等价于[^0-9]。
\f 匹配一个换页符。等价于\x0c和\cL。
\n 匹配一个换行符。等价于\x0a和\cJ。
\r 匹配一个回车符。等价于\x0d和\cM。
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。
\S 匹配任何非空白字符。等价于[^\f\n\r\t\v]。
\t 匹配一个制表符。等价于\x09和\cI。
\v 匹配一个垂直制表符。等价于\x0b和\cK。
\w 匹配包括下划线的任何单词字符。等价于「[A-Za-z0-9_]」。
\W 匹配任何非单词字符。等价于「[^A-Za-z0-9_]」。
\xn 匹配n,其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如,「\x41」匹配「A」。「\x041」则等价于「\x04&1」。正則表达式中可以使用ASCII编码。.
\num 匹配num,其中num是一个正整数。对所获取的匹配的引用。例如,「(.)\1」匹配两个连续的相同字符。
\n 标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式,则n为向后引用。否则,如果n为八进制数字(0-7),则n为一个八进制转义值。
\nm 标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式,则nm为向后引用。如果\nm之前至少有n个获取,则n为一个后跟文字m的向后引用。如果前面的条件都不满足,若n和m均为八进制数字(0-7),则\nm将匹配八进制转义值nm。
\nml 如果n为八进制数字(0-3),且m和l均为八进制数字(0-7),则匹配八进制转义值nml。
\un 匹配n,其中n是一个用四个十六进制数字表示的Unicode字符。例如,\u00A9匹配版权符号(©)。

DW 实现 html 标签大小写互转

在使用 dreamweaver 编辑或修改代码时,经常会遇到把全部或一部分的代码标签改写为大写或小写…

下面介绍一种方便快捷的方法:

  1. 选中要转换成大写或小写的html标签代码;
  2. 右键点击刚刚选中的代码区域,弹出右键菜单选择“所选区域”,接着在其子菜单中选择“转换成大写或转换成小写”,或者“将标签转换成大写或将标签转换成小写”。

可视化 Blueprint CSS 栅格框架生成工具 Boks [AIR]

Blueprint 是一个 CSS 框架,它可以让你用很整洁的代码来将页面划分成很复杂的网格结构(grid)。Blueprint 并没有提供一个可视化的工具来让你生成网格结构的 CSS 代码。

而 Boks 的出现,正好弥补了 Blueprint 没有提供可视化工具的缺憾。

s-main-ui

s-settings

在主界面的格子上拖拽,就可以轻松画出你想要的布局。在下面的面板里,都可以为每一个 div 设置 id,class 和 HTML 代码等。绘制完成之后,点击 Export 就可以导出为网页文件了。

注意,此软件需要下载 Adobe AIR 才能安装。

下载:官方下载(打不开,请翻墙)

让 Dreamweaver CS5 支持 HTML5 和 CSS3 代码提示

刚装 Dreamweaver CS5 的时候,发现新建文档的时可以选择 HTML5 文档类型,就想 Adobe 挺超前啊,现在就开始支持 HTML5 了。直到最近研究 HTML5,才发现 Dreamweaver 只是把 DOCTYPE 标签变了一下,并没有支持 HTML5 代码提示。

于是上网搜索,找到 Adobe 自家出的这么一个扩展:HTML5 Pack。这个就是 Adobe TV 上的 Introducing the Dreamweaver CS5 HTML5 Pack 是一个演示视频,演示如何在 Dreamweaver CS5 中使用 HTML5 Pack。以下是官方的特性列表:

  1. 引入多屏预览面板,允许实时预览 3 种不同尺寸的屏幕,支持媒体查询。(窗口 > 多屏预览)
  2. 为 HTML5 标签库中的新标签、属性(attributes)、属性(properties)添加代码提示。
  3. 为现有 HTML 标签的新属性和值更新代码提示。
  4. 为以下 CSS3 规范添加代码提示:2D/3D 变形、动画、背景和边框、基础用户界面、线布局、字幕、媒体查询、多列布局、注音、文本、过渡。
  5. 更新实时预览以支持 <video> 和 <audio>。(需要安装 Quicktime。)
  6. 改进实时预览对 CSS3 的渲染。
  7. 在新建文档对话框中添加 HTML5 初始布局。
  8. 为新标签在设计视图中提供更好的渲染。

Expression Web3 SuperPreview for IE 微软出品的IE调试利器

这年头做前端开发的真不容易,好不容易把页面开发完了,可结果呢?人民群众深陷浏览器兼容性的泥潭,爬都爬不出来。这其中又以 IE6 为最,其兼容性之奇差,但又深受广大群众的喜爱,不得不使为了光大前端开发的相关人士们只能一边捏着鼻子,一边去努力让网页在其上显示正常。

其实呢,为解决这方面的问题,已经有不少的解决方案了,例如 Firefox 下有 FireBug ;在 IE 下有 IE Developer toolbar ;但 IE Developer toolbar 也有一定的不足,因为它只真对 IE6 使用,这也说明了你的系统只能装有一个 IE6,而 IE7 和 IE8 不能与其共存。这样你就看不到在 IE7 和 IE8 中的显示效果了。

一、 Expression Web3 SuperPreview

前两天发现微软出了个 Expression Web3 SuperPreview 工具甚是强大,费话不多说,直接看特点:

  1. 界面很酷。
  2. 可调试 IE6 、IE7-IE8 和 IE8 以及单独的图片。
  3. 四种浏览模式:上下两栏,左右两栏,覆盖模式和单栏模式。
  4. 两种元素高亮模式:盒高亮和灯光高亮。不知道这样说对不对,反正就是一个用线框住元素,一个把选中元素以外的背景变暗。
  5. 显示选中元素的高宽和坐标。
  6. 支持多种浏览器分辨率切换。
  7. 支持 DOM 树查看。
  8. 其它还有一些类似 Photoshop 的小功能:参考缩略图、标尺、参考线、缩放和抓手等。

总的来说,挺酷的,根据微软的介绍,Expression Web3 SuperPreview 的可用 IE 版本,视系统已安装 IE 浏览器的版本而定,如果系统安装了 IE8 ,那 Expression Web3 SuperPreview 浏览器测试可用版本就包括 IE8 、IE7 和 IE6 ;如果系统安装了 IE7 ,那 Expression Web3 SuperPreview 只包括 IE7 和 IE6 ;如果系统安装了 IE6 ;那 Expression Web3 SuperPreview 只能测试 IE6 ;这也就意味着如果你要使用 Expression Web3 SuperPreview 的话,使用高版本的 IE 更“上算”。喜欢的朋友,就安装吧。

二、 Expression Web4 SuperPreview

新版本的 Expression Web4 SuperPreview 中文版出来也有一段时间了,不过它需要更高的 .NET Framework 支持即:.NET Framework 4 小提示:Microsoft Expression Web 4 它有三个安装程序,分别是:Expression Web 4 、Expression Design 4 和 Expression Encoder 4。安装时我们只要选择 Expression Web 4 即可,其实 Expression Web 4 就是微软出品的一个代码编辑器,Expression Web 4 的强大功能类似于 奥多比Dreamweaver 编辑器,有兴趣的朋友可以研究一下。安装完 Expression Web 4 后就会有 Expression Web4 SuperPreview 调试软件了。

默认情况下 Expression Web4 SuperPreview 只对 FireFox 打开了大门。

虽然,我安装了 Opera 、Safri 、谷歌浏览器 、FireFox 、IE8 等众多浏览器。但是默认情况下 Expression Web4 SuperPreview 只暧昧的向 FireFox 浏览器敞开了大门。当然,如果安装了 IE8 浏览器后,就会有 IE6 —— IE8 的选项。虽然微软向 FireFox 开放怀抱有点令人不解,不过,想想当今的浏览器市场占有率来说,也能让人释怀。

多浏览配置

不过,Microsoft Expression Web 4 向所有浏览器敞开了大门,如何在 Microsoft Expression Web 4 中配置更多的浏览器,从菜单【文件】> 【在浏览器中预览】 > 【编辑浏览器列表】 弹出的对话框中,我们可以看到 Microsoft Expression Web 4 其实是对所有浏览器都敞开了大门的。Microsoft Expression Web 4 这种开放的姿态还是很值得表扬一下的。