2013年08月16日 02:24:31

三大利器联合开发-PHP工具与调试 Featured

作者: 

本文将为你展示Windows下几个常用工具的联合开发,让你只要看得到,就能找得到,从此摆脱调试纠结。

一、利器介绍

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 Codinghtml快捷输入)、Explorer(文件、文件夹列表)。

(3)文件搜索:Everything

Everything是一款速度极快的文件名搜索软件,支持级联目录搜索,对于MVC架构的程序搜索文件特别有帮助。

二、利器运用

1、对打开页面利用firebug定位需要查找的html部分,确定一个重复率较低、非php变量动态输出的属性,即不是id=item-<?php echo $id;?>这类,因为你直接搜索id=item-112是无法搜索到的,不过你可以搜索id=item- ,只搜索一部分。php-tools-debug-1

                             图(1firebug定位

2、利用notepad++全文搜索功能搜索id=fontsizephp-tools-debug-2

                                    图(2)全文搜索前php-tools-debug-3

                     图(3)全文搜索中,如果点确定,则搜索结束,搜索结果可能不完整php-tools-debug-4

                              图(4)全文搜索结果

    如果得不到搜索结果,那么就要更换搜索值,检查搜索参数,重新搜索。如果得到搜索结果,那证明你的搜索是正确的,不过可能有多个结果,这种情况下就需要自己加以鉴别,最终确定文件了。

为了确定文件,可以为每一个目标添加不同的class,然后刷新页面查看显示的是哪一个。如图(5)所示:php-tools-debug-5

                         图(5)为所有匹配结果添加不同的class

刷新页面确认结果,如图(6)所示

              php-tools-debug-6

                         图(6)标识确认

到此,搜索定位成功。

总结:全文搜索的关键是确定搜索关键词,尽可能地让它唯一,那样搜索出来的结果才会少,最终的定位才不会那么困难,如果你使用“div”进行搜索,那么,你悲剧了,估计出来的是上千个匹配命中,上百个文件,嘿嘿。。。另外要注意文件类型,尽量使用有针对性的后缀,这样能缩小搜索范围,加快搜索。常用搜索类型格式有*.*表示所有文件,*.php表示php后缀文件,*.php *.js表示phpjs后缀文件,两者之间是空格分开。另外,明确的目录也是能够缩短搜索时间的,非不得已情况下,尽量根据之间对整个项目的认知,将搜索目录缩小到最小范围。

3、Everything助你秒定文件

对于上面的文件D:\\WAMP\\www\\jmo\\templates\\beez_20\\index.php,打开它的方法有多种:

(1)notepad++双击匹配项,自动在notepad++中打开

(2)notepad++中的上面的tab中右键,复制文件路径,然后Win+E启动“资源管理器”(我的电脑目录),将复制出来的路径贴上去,回车进入。如图(7)和图(8)所示:

        php-tools-debug-7

                             图(7notepad++复制文件路径php-tools-debug-8

图(8)资源管理器进入文件路径

(3)everything输入目录路径,如图(9)所示:php-tools-debug-9

                                    图(9Everything下直接输入目录

(4)everything输入文件路径,右键open path到目录,如图(10)所示:

        php-tools-debug-10

                                    图(10Everything下用文件打开目录

(5)使用everything快捷输入,如图(11)所示:php-tools-debug-11

                             图(11Everything下目录级联查找文件

目录之间用空格分隔。可以使用*进行通配匹配,如图(12)所示:

    php-tools-debug-12

                                        图(12Everything下使用通配符

4、利用firephp跟踪变量变化

(1)引入类库,调用fb()方法

(2)查看结果

Firephp使用比较简单,在需要使用的时候引入类库,然后调用fb()方法即可,还有FB::info()/FB::error()/FB::log()等方法,这些跟fb()没有本质区别,所以我个人喜欢只用fb()实现跟踪,具体用法请看官方文档。如图(13)所示:php-tools-debug-13

                         图(13)引入类库

php中调用之后,首先开启firebug,然后刷新页面,则可以在控制台看到firephp打印出来的结果,鼠标移动到结果上,则会有一个div窗口显示当前打印项的详细信息,如果不点击结果,移开鼠标则信息窗口会自动关闭,点击了结果则不会。如图(14)所示,对应图(13)中的调用。fb($this->params)仅打印数据结果,而fb(here,FirePHP::TRACE)则会输出当前页面运行到当前行的整个过程。运行结果从下往上,直到结束(运行到fb(here,FirePHP::TRACE)对应的行)。php-tools-debug-14

                          图(14)查看结果

提醒:

1fb调用之前不能有内容输出,类似header前面不能有数据输出。如果真的需要用fb,请尝试在整个程序运行的最开始,加入ob_start(); 语句。

2)对应很复杂的数据,可能fb打印无效果,那么请使用对数据做serialize处理试试,如$data = serialize($data);fb($data); 这个方法也不一定能输出!不排除有fb打印不出来的情况。

3)由于有输出导致fb失效,那么你可以选择文件存储方式,必要时serialize

   afile_put_contents(\'d:/a.php\',var_export($data,true),FILE_APPEND);

   bfile_put_contents(\'d:/a.php\',var_export(serialize($data),true),FILE_APPEND);

5、利用firebug定位CSS

Firebug定位CSS与图(1firebug定位是一样的,只不过图(1)中没有指出CSS样式部分并加以说明。如图(15)所示。php-tools-debug-15

                   图(15Firebug定位CSS

在图15中,我们可以对右侧的CSS右键,复制地址,如图(16)所示,

                   php-tools-debug-16

                         图(16)复制CSS地址

然后将地址粘贴出来,对应项目的路径,找到CSS文件。如:

http://129172.com/templates/protostar/css/template.css  这是我复制到的CSS地址,

打开everything,输入templates/protostar/css/template.css,则可以得到搜索文件。如图(17)所示。php-tools-debug-17

  

图(17)定位CSS文件

找到文件,对应找到行号即可找到CSS样式所在。如图(18)所示。php-tools-debug-18

                         图(18CSS文件位置定位

6、利用Firebug调试CSS

(1)编辑样式,查看效果,如图(19)所示php-tools-debug-19

图(19)编辑样式,改变Home颜色为红色

(2)对指定标签添加样式,如图(20)所示php-tools-debug-20

                       图(20)对指定标签添加样式

效果如图(21)所示php-tools-debug-21

                    图(21)给指定标签添加样式--颜色:黑色

(3)给一系列标签添加规则,如图(22图(22)所示php-tools-debug-22

           图(22)把所有非current li 文字颜色改为gray -- 右键添加规则php-tools-debug-23

        图(23)把所有非current li 文字颜色改为gray -- 添加通用样式

此时发现current li a也被改为gray了,因此需要添加多一条规则,针对current li a 做处理。如图(24)所示php-tools-debug-24

       图(24)把所有非current li 文字颜色改为gray -- current li a做额外处理

发现其实current li a是有一条样式被覆盖了的,因此矫正,如图(25)所示php-tools-debug-25

              图(25)把所有非current li 文字颜色改为gray -- 实现效果

因此,总共只需要一条样式:

.nav-pills li a{color:gray} 即可。

把这条样式加入到templates/protostar/css/template.css 中,保存并刷新页面即可看到效果。



未经同意禁止转载!
转载请附带本文原文地址:三大利器联合开发-PHP工具与调试,首发自 Zjmainstay学习笔记
阅读( 6263 )
看完顺手点个赞呗:
(12 votes)
更多当前分类内容: Apache无法启动,80端口占用 »

1.PHP cURL群:PHP cURL高级技术
2.正则表达式群:专精正则表达式
3. QQ联系(加请说明):QQ联系博主(951086941)
4. 邮箱:zjmainstay@163.com
5. 打赏博主: 捐赠支持本博客

阿里云幸运券分享
网站总访问量: