谷歌开发者工具修改html,调试及修改chrome开发人员工具

chrome 开发人员工具是个不错的东西。不过，有时候想改改它，来更好的满足自己的需求。分享一点我自己的收获。

1、chrome开发人员工具的主页：http://code.google.com/intl/zh-CN/chrome/devtools/

2、开发人员工具的源码及chrome浏览器下载：http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html

3、运行办法参考：http://code.google.com/intl/zh-CN/chrome/devtools/docs/contributing.html

最主要几句话：

Go to Chromium continuous builds archive and grab the devtools_frontend.zip archive for a recent revision of Chromium.

Extract the contents of the archive into an empty folder.

Run Chrome with the following command line flag: –debug-devtools-frontend=.

把chrome快捷方式的目标改成类似这样：E:\SOFT\webkit\chromium\chrome-win32\chrome.exe –debug-devtools-frontend=E:\SOFT\webkit\devtools_frontend

后面这个地址是解压devtools_frontend.zip的位置。

这之后，chrome的开发人员工具就会换成你刚下的那个了。

4、浏览器上访问开发人员工具的地址：chrome-devtools://devtools/devtools.html，访问网页，开发这个开发工具，这时还能再在菜单里打开开发工具。

这样就可以用开发人员工具来调试开发人员工具。

另外的调试方式：

1、打开目标网页，如baidu.com

2、在页面上点右键审查元素，调试baidu.com

3、在打开的开发人员工具里点右键审查元素，这样就可以调试第2步中打开的开发人员上人。

另：

如果要确定开发人员工具是否是使用你刚下载的那个，在解压的devtools_frontend/devtools.html中加入自己的几句注释什么的，然后在上面第3步的调试里看第二步打开的工具里有没有这几句注释。如查有，那就是在使有你已经安装的工具了。

呵呵，不错吧。