于是想，如果可以找到 Javascript 版的相关代码就一定可以改成 PHP 版本的，结果在 Google 搜索找到了…

var elt = document.getElementById('table');
var xpath = getElementXPath(elt);
alert(xpath);

// Get full XPath of an element
function getElementXPath(elt)
{
	var path = "";
	for (; elt && elt.nodeType == 1; elt = elt.parentNode)
	{
		idx = getElementIdx(elt);
		xname = elt.tagName;
		if (idx > 1) xname += "[" + idx + "]";
		path = "/" + xname + path;
	}

	return path;
}

// Get Idx of an element
function getElementIdx(elt)
{
    var count = 1;
    for (var sib = elt.previousSibling; sib ; sib = sib.previousSibling)
    {
        if(sib.nodeType == 1 && sib.tagName == elt.tagName)	count++
    }

    return count;
}

PHP 改进版：

// Use it before import PHP Simple HTML DOM Parser
$html = file_get_html('http://www.google.com/');
// find a sample element by id
$elt1 = $html->find('#footer', 0);
// find a sample element by tag name
$elt2= $html->find('div', 10);

// it will return if found it: //*[@id="footer"]
$xpath = getElementXPath($elt1);

// it will return if found it: html/body/div[10]
$xpath = getElementXPath($elt2);

function getElementXPath($elt)
{
	$path = '';
	$first = TRUE;
	for(; ($elt AND $elt->nodetype == 1); $elt = $elt->parent())
	{
		$xname = $elt->tag;
		$idx = getElementIdx($elt);

		if ($first AND isset($elt->attr['id']))
		{
			$path = '//*[@id="' . $elt->attr['id'] . '"]';
			break;
		}

		if ($idx > 1)
		{
			$xname .= '[' . $idx . ']';
		}

		$path = '/'.$xname.$path;

		$first = FALSE;
	}

	return $path;
}

function getElementIdx($elt)
{
    $count = 1;
    for($sib = $elt->prev_sibling(); $sib ; $sib = $sib->prev_sibling())
    {
        if($sib->nodetype == 1 && $sib->tag == $elt->tag)
        {
        	$count++;
        }
    }

    return $count;
}

大家同样可以把上面的代码直接 crack 到 PHP Simple HTML DOM Parser 库中。

如果你想给离线的朋友使用，那也没有关系，它提供了源码的下载，就在右侧的顶部（点击这里也可以下载）。

看到它这样页面的顶部信息让我有发现了两个很不错 jquery 学习资料网站：LearningjQuery | codylindley。

BTW，人家顶部信息说了：FYI (ie6 != supported)，难道你还在用 IE6 开发么? XD

最近就在用 JavaScript 写公司系统的报表文件生成编辑器工具。调试的头胀闹大的。尤其是加入 alert()  调试框，一不小心就会进入慢长的循环，点不掉的 alert 框…幸好在 webappers 发现了 Blackbird 提供一种非常酷的 JavaScript 调试信息显示方法。直接让我告别了 alert() 时代。:)

Blackbird 支持当前的主流版本浏览器（IE 6+，Firefox 2+，Safari 2+，Opera 9.5），可以区别输入 debug，info，warn，error，profile。同时可以通过热键来控制显示/隐藏，情况记录调试信息等操作！
使用方法也很简单，加载 js 和 css 文件并加载到 header 区域，直接使用就可以输出调试信息：

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

演示：http://www.gscottolson.com/blackbirdjs/

下载：当前版本 blackbirdjs v1.0

Devunity 是一个极具创意性的在线编程服务网站，使用它就像是在使用系统的文本编辑器一样，支php，Python，Javascript，Perl，Html，Asp，Css，Ruby语言语法高亮，行数显示，支持 Tags。最大的特性还属创建项目，从SVN服务导入代码，支持多种服务的API（如 Twitter，Flickr，BOSS，Google Apps Engine,，Digg，Facebook等等）接口编程到团队协作，添加 Todos。

Devunity 是TechCrunch 最新评出来的 TC50 之一。目前这个服务还属于开发当作，之前只是申请才能获得邀请，过了一个10.1终于给了邀请，碰巧通过内测用户邀请是可以直接申请到用户，所以，如果你想尝试一下，留下你的 Email 地址吧:)

dwProtector是基于mootools开发的插件。那么，dwProtector的功能强度有多大呢，看下面列表：

• 守护右键“（图片）另存为”（”Save Image As”）
• 守护右键“背景图片另存为”（”Save Background As”）
• 守护拖拽图片到桌面
• 甚至是守护右键

在线功能演示：http://davidwalsh.name/dw-content/image-protector.php
里面的图片很凶猛哦…

核心代码：

//protector class
var dwProtector = new Class({

	//implements
	Implements: [Options],

	//options
	options: {
		image: 'blank.gif',
		elements: $$('img'),
		zIndex: 10
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);

		//make it happen
		this.protect();
	},

	//a method that does whatever you want
	protect: function() {
		//for each image that needs be protected...
		this.options.elements.each(function(el) {
			//get the element's position, width, and height
			var size = el.getCoordinates();
			//create the protector
			var p = new Element('img', {
				src: this.options.image,
				width: size.width,
				height: size.height,
				styles: {
					'z-index': this.options.zIndex,
					'left': size.left + 'px',
					'top': size.top + 'px',
					'position': 'absolute'
				}
			}).inject($(document.body),'top');
		},this);

	}
});

通过上面的代码可以发现，用户虽然可以上面的方法保存图片，不过下载下来的图片只是我们函数里面替换掉的blank.gif。

使用方法：
1. 下载mootools和dwProtector以及空的替换图片blank.gif，下载后放置在网站合适的位置。
2. 把下面代码插入到全局的头部文件中(）：

3.在你的图片加入 class=”protect”（可以通过步骤2修改保护图片标记），如：

作者在结尾声明，对于查看网页源文件或其他方法还是可以很轻松的获得图片的地址，而且我还尝试用选中图片，复制，粘贴在富文本编辑器下面也是可以显示的…不过作者目前还在想办法解决这方面的问题，让我们一起为作者加油吧！

无论是什么样的开发者都必不可缺少的就是调试，当然本篇介绍的工具均是适用于网络开发者，我按照软件平台的不同分了几类：Firefox扩展类，IE插件类，书签工具类，JavaScript类，当然还有其他类等。其中之前介绍的5个最棒的Firebug扩展可以分在Firefox扩展类，其他本篇将主要介绍剩下的两个分类的调试工具。

书签工具类

所谓书签工具类，实际上就是通过点击书签就可以实现运行调试工具的方法类别。
安装方法也非常的简单，对于FireFox用户，直接把指定保存书签的按钮（或链接）拖拉到书签工具栏；对于IE用户，在指定保存书签的按钮（或链接）右键，选择“添加到收藏夹“。
使用的时候，直接点击那个书签即可运行调试工具。

XRAY （支持IE6+/Firefox/Safari/Camino）

简单的DOM查看器，运行后点击网页的元素，弹出的窗口会显示相关的DOM信息。不过要注意对于查看的元素是链接是无法查看的。因为….因为…浏览器直接就跳转到你点击了那个链接上去了…

Firebug Lite （支持IE6+/Firefox/Safari/Opera）

没错，Firebug的作者为了让不同浏览器的开发者都能用到Firebug，精心打造了这个JavaScript版本，此版本实现了fx扩展的大部分功能。强烈推荐哦，哈哈。

ReCSS （支持IE6+/Firefox/Safari）
功能是重载CSS，其实看名字也会了解，主要是为了在修改CSS后，同时在不重新加载网页内容的情况下达到重载CSS后的效果。简单的说只节省调试时间，要不每次都是全部重载所有的资料多浪费时间啊～

Layout Grid Bookmarklet （支持IE6+/Firefox/Safari/Opera）

标尺工具，可以让你的网页背景变成一个标尺，提供的版本比较多（固定版和浮动版），大家使用时需要多看看，标尺长宽为1000×1000像素。

JavsScript类

Firebug Lite （支持IE6+/Firefox/Safari/Opera）
没错，它不仅提供书签工具版也提供JavaScript版本，直接把下面的代码放在你要调试的网页里面就可以啦。

Pi.debugger

直接点上面的链接吧，那个是我之前专门介绍的文章XD

IE插件类

如果你使用的是IE8就算了，就跳过本类别吧:)另外这个类别不做重点简单介绍，因为网上这样的文章太泛滥了。
首先我要介绍和推荐的是微软自己出的Visual Web Developer，免费产品，功能还蛮不错，再者就是收费产品IE WebDeveloper，这个其实我还是蛮喜欢的，网上破解/注册版一片，我就不多说。其他的还有IEDevToolBar。

众所周知，Firefox浏览器外加Firebug插件是互联网开发的最佳平台和调试工具。与此同时，Firebug最人性化的地方还是可以再做插件扩展，下面将介绍的是WebMonkey推荐的5款最棒的Firebug扩展。（安装下面插件的之前必须先安装Firebug插件）

1. YSlow

YSlow（why slow）是由Yahoo开发者团队发布的一款基于Firebug的插件，插件遵循雅虎10条网站开发的军规评测网页效率。这里推荐一篇文章《如何提高网页的效率（下篇）——Use YSlow to know why your web Slow》。

2. Firecookie

Firecookie可以随时查看当前网页的所有变化的Cookies信息，同时还可以从firebug的面板设置是否接受或拒绝cookies信息，同时配合Firefox3的页面信息功能使用效果尤佳。Web Developer插件也有类似的功能。

3. FirePHP

FirePHP的PHP调试信息都是通过在HTTP头里面添加“X-FirePHP-Data”信息串来标识，不会直接输出到页面上，这样也就避免对php正常输出产生影响。不过调试的时候需要加载一个FirePHP的库文件。如何使用大家可以参加这篇文章：《Debugging PHP with Firebug and FirePHP》这个也是我今天才找到的，里面的英文不是很难懂。

4. Pixel Perfect

Pixel Perfect是专门为做设计的朋友准备，经过我的测试明白了它的用途，它可以添加图片到当前的页面上面，同时可以调整图片的透明度和位置，以方便调试网站的设计，我想光凭我说还是很难明白，大家看下官方的视频演示吧。

5. Rainbow

Rainbow是一款使得JavaScript语法高亮的插件，因此此插件被命名为彩虹（Rainbow），默认的Javascript变量是绿色，保留字是蓝色，当然如果你不喜欢，你还可以随时更改，通过官方的颜色库可以改变，不过目前只有4种配色。

如果你对Firebug的插件有兴趣的话，可以参见Jan Odvarko列出来的Friebug的插件清单。当然，您也可以自己编写FIrebug插件。

不过目前还处于一个测试预览阶段，可能会有一些bug存在，例如你编写：alert(“Hello World”);之后就会不断的弹出内容是“Hello World”的提示框….

整体的界面很不错，我需要向它学习，努力争取把代码墙完善的更好:)

而且这个JavaScript不依赖任何的库，为压缩在整个的体积也才40Kb而已，适用于IE6/IE7,OPERA 9.2, WEBKIT/525.1, FIREFOX 2浏览器平台，这个工具可谓给非Firefox的开发者提供了便利和时间。那么我们就亲自操作一下他吧～

效果是不是很酷，也也方便，而且安装起来也非常的简单，只需要在网页<head></head>之间加入如下代码即可：