一、利器介绍
1、Firefox + firebug + firephp
2、Notepad++/其他可全文搜索编辑器
3、Everything
（1）浏览器：Firefox
Firefox全称Mozilla Firefox，是一种开源的网页浏览器，非正式的中文名称为火狐浏览器，它允许用户根据个人需要去添加各种扩展插件来完成更多的，更个性化的功能。其中firebug就是Firefox的一个插件，它能够实现html,css,dom,js等的察看与调试。而firephp是专门为PHP定制的一个插件，它能将php调用firephp方法输出的数据呈现在firebug控制台上，以实现观察数据的功能。没有安装火狐浏览器，请自行安装。然后在 "菜单栏"的工具 - "附加组件"中搜索firebug和firephp安装。如果顶部没有显示菜单栏，请在顶部灰白区域右键，勾选显示菜单栏。
（2）编辑器：Notepad++/其他可全文搜索编辑器
本人使用的是Notepad++编辑器，所以这里选择以Notepad++举例。Notepad++是一款Windows环境下免费开源的代码编辑器，可支持多种语言的高亮、文件全文搜索、正则查找替换等功能，另外还能定制自己需要的扩展，本人常用的扩展就有：QuickText（快捷输入）、Function List（方法、函数、属性列表）、Zen Coding（html快捷输入）、Explorer（文件、文件夹列表）。
（3）文件搜索：Everything
Everything是一款速度极快的文件名搜索软件，支持级联目录搜索，对于MVC架构的程序搜索文件特别有帮助。
二、利器运用
1、对打开页面利用firebug定位需要查找的html部分，确定一个重复率较低、非php变量动态输出的属性，即不是id=”item-<?php echo $id;?>”这类，因为你直接搜索id=”item-112”是无法搜索到的，不过你可以搜索id=”item- ，只搜索一部分。
图（1）firebug定位
2、利用notepad++全文搜索功能搜索id=”fontsize”
图（2）全文搜索前
图（3）全文搜索中，如果点确定，则搜索结束，搜索结果可能不完整
图（4）全文搜索结果
如果得不到搜索结果，那么就要更换搜索值，检查搜索参数，重新搜索。如果得到搜索结果，那证明你的搜索是正确的，不过可能有多个结果，这种情况下就需要自己加以鉴别，最终确定文件了。
为了确定文件，可以为每一个目标添加不同的class，然后刷新页面查看显示的是哪一个。如图（5）所示：
图（5）为所有匹配结果添加不同的class
刷新页面确认结果，如图（6）所示
图（6）标识确认
到此，搜索定位成功。
总结：全文搜索的关键是确定搜索关键词，尽可能地让它唯一，那样搜索出来的结果才会少，最终的定位才不会那么困难，如果你使用“div”进行搜索，那么，你悲剧了，估计出来的是上千个匹配命中，上百个文件，嘿嘿。。。另外要注意文件类型，尽量使用有针对性的后缀，这样能缩小搜索范围，加快搜索。常用搜索类型格式有*.*表示所有文件，*.php表示php后缀文件，*.php *.js表示php和js后缀文件，两者之间是空格分开。另外，明确的目录也是能够缩短搜索时间的，非不得已情况下，尽量根据之间对整个项目的认知，将搜索目录缩小到最小范围。
3、Everything助你秒定文件
对于上面的文件D:\\WAMP\\www\\jmo\\templates\\beez_20\\index.php，打开它的方法有多种：
（1）在notepad++双击匹配项，自动在notepad++中打开
（2）在notepad++中的上面的tab中右键，复制文件路径，然后Win+E启动“资源管理器”（我的电脑目录），将复制出来的路径贴上去，回车进入。如图（7）和图（8）所示：
图（7）notepad++复制文件路径
图（8）资源管理器进入文件路径
（3）用everything输入目录路径，如图（9）所示：
图（9）Everything下直接输入目录
（4）用everything输入文件路径，右键open path到目录，如图（10）所示：
图（10）Everything下用文件打开目录
（5）使用everything快捷输入，如图（11）所示：
图（11）Everything下目录级联查找文件
目录之间用空格分隔。可以使用*进行通配匹配，如图（12）所示：
图（12）Everything下使用通配符
4、利用firephp跟踪变量变化
（1）引入类库，调用fb()方法
（2）查看结果
Firephp使用比较简单，在需要使用的时候引入类库，然后调用fb()方法即可，还有FB::info()/FB::error()/FB::log()等方法，这些跟fb()没有本质区别，所以我个人喜欢只用fb()实现跟踪，具体用法请看官方文档。如图（13）所示：
图（13）引入类库
在php中调用之后，首先开启firebug，然后刷新页面，则可以在控制台看到firephp打印出来的结果，鼠标移动到结果上，则会有一个div窗口显示当前打印项的详细信息，如果不点击结果，移开鼠标则信息窗口会自动关闭，点击了结果则不会。如图（14）所示，对应图（13）中的调用。fb($this->params)仅打印数据结果，而fb(‘here’,FirePHP::TRACE)则会输出当前页面运行到当前行的整个过程。运行结果从下往上，直到结束（运行到fb(‘here’,FirePHP::TRACE)对应的行）。
图（14）查看结果
提醒：
（1）fb调用之前不能有内容输出，类似header前面不能有数据输出。如果真的需要用fb，请尝试在整个程序运行的最开始，加入ob_start(); 语句。
（2）对应很复杂的数据，可能fb打印无效果，那么请使用对数据做serialize处理试试，如$data = serialize($data);fb($data); 这个方法也不一定能输出！不排除有fb打印不出来的情况。
（3）由于有输出导致fb失效，那么你可以选择文件存储方式，必要时serialize：
a）file_put_contents(\'d:/a.php\',var_export($data,true),FILE_APPEND);
b）file_put_contents(\'d:/a.php\',var_export(serialize($data),true),FILE_APPEND);
5、利用firebug定位CSS
Firebug定位CSS与图（1）firebug定位是一样的，只不过图（1）中没有指出CSS样式部分并加以说明。如图（15）所示。
图（15）Firebug定位CSS
在图15中，我们可以对右侧的CSS右键，复制地址，如图（16）所示，
图（16）复制CSS地址
然后将地址粘贴出来，对应项目的路径，找到CSS文件。如：
http://129172.com/templates/protostar/css/template.css 这是我复制到的CSS地址，
打开everything，输入templates/protostar/css/template.css，则可以得到搜索文件。如图（17）所示。
图（17）定位CSS文件
找到文件，对应找到行号即可找到CSS样式所在。如图（18）所示。
图（18）CSS文件位置定位
6、利用Firebug调试CSS
（1）编辑样式，查看效果，如图（19）所示
图（19）编辑样式，改变Home颜色为红色
（2）对指定标签添加样式，如图（20）所示
图（20）对指定标签添加样式
效果如图（21）所示
图（21）给指定标签添加样式--颜色：黑色
（3）给一系列标签添加规则，如图（22）~ 图（22）所示
图（22）把所有非current li 文字颜色改为gray -- 右键添加规则
图（23）把所有非current li 文字颜色改为gray -- 添加通用样式
此时发现current li a也被改为gray了，因此需要添加多一条规则，针对current li a 做处理。如图（24）所示
图（24）把所有非current li 文字颜色改为gray -- 对current li a做额外处理
发现其实current li a是有一条样式被覆盖了的，因此矫正，如图（25）所示
图（25）把所有非current li 文字颜色改为gray -- 实现效果
因此，总共只需要一条样式：
.nav-pills li a{color:gray} 即可。
把这条样式加入到templates/protostar/css/template.css 中，保存并刷新页面即可看到效果。
未经同意禁止转载！
转载请附带本文原文地址：三大利器联合开发-PHP工具与调试，首发自 Zjmainstay学习笔记
