PHP、TP6框架及JavaScript的单步调试
目录
- 一、PHP程序的调试
- 1. 单个PHP程序的调试
- 2. PHP框架代码的调试
- 二、JavaScript程序的调试
- 三、总结
参考资料:https://www.bilibili.com/video/BV1Qx411f7pF
一、PHP程序的调试 这里对PHP程序调试的IDE选择的是
PHPStorm
,因为PHPStorm应该是PHP语言当前最受欢迎的代码编辑环境,而且对各种补全以及生成PHPdoc功能的支持都非常好。1. 单个PHP程序的调试 首先依次选择 File -> Settings -> PHP (CLI Interpreter栏原本是空的):
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/997238e214c14452853a57b34079a3df.jpg)
文章图片
然后选择自己的php.exe即可(如果没有显示的需要先设置php环境变量):
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/cc790ee30cbe4d9a828b8a203a3f37f7.jpg)
文章图片
选择之后保存确定即可。
我当前使用的php集成环境是Wampserver64(Apache+PHP+MySQL),具体版本如下:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/c795fc1a23844cf2b584f6b0712012de.jpg)
文章图片
在我的这个PHP运行环境中,就已经自带有
xdebug
插件了,即对应的.dll文件包含在每个php版本文件夹中的zend_ext目录下,如下所示(如没有xdebug
插件则需要先去下载):![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/e5c83011f4224e548e02d1b6c6c2ddaf.jpg)
文章图片
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/ca9429e06d524ea799b225e810cbd503.jpg)
文章图片
然后我们需要打开php目录下的php.ini,添加上如下代码:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/5d3794d52ec743779fd828e82aa18729.jpg)
文章图片
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/b136532e7cbb499c803574b8bb7a14e1.jpg)
文章图片
这里的
zend_extension
的值为刚才xdebug.dll文件的地址,而我这里不是刚刚那个文件是因为我将它复制到了ext目录下并修改了它的命名。然后即可编辑php文件,然后在合适的地方打上断点:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/dafa931972454ca5be111ed20b022bcd.png)
文章图片
然后右键文件选择调试该文件即可:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/e380efb337f442bdb79565c1d6071b3f.jpg)
文章图片
最终我们终于实现了单步调试,并且在下面的debug tab中查看到各个变量的内容了:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/89015e965bab4d8d8bf5ade464d6d6cc.png)
文章图片
2. PHP框架代码的调试 这里我所使用的PHP框架是
thinkphp6.x
,其他的框架应该也是类似的。这里我们需要再次修改原来的php.ini文件,如下所示:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/208ceb50245d4fccbb172b32eb6b8607.jpg)
文章图片
后面的这几个参数在
PhpStorm
中调试单文件也可以看到,我们把它们如上加入到php.ini文件中即可。此后我们再转到PhpStorm中,选择 File->Settings->Debug:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/55ef96a1b37940b38d748fb2762063b2.jpg)
文章图片
这里将Debug port修改为php.ini文件中
xdebug.remote_port
所设置的端口,最后我们只需在php.ini文件中再添加上一句:![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/e4efca9d7dc3446eb1ae17b7ef36572e.jpg)
文章图片
这句意味着自动开启xdebug,如果设置了这个属性,则我们可以在任意时刻进行断点调试,当然这也意味着运行效率有一定的降低,因为需要产生额外的调试信息,这一点和其他语言的分别以运行模式和调试模式运行是类似的,因此这个属性可以看情况进行关闭掉以提高性能(不需要调试时关闭即可)。
tips:修改了php.ini文件的配置,需要重新启动Apache等服务才可以生效,我这里重启了WampServer的所有服务。重新启动服务后,我们输入:
php think run -H '自己的虚拟域名'
(这是thinkphp的启动命令)来启动tp6项目:![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/d2765bd052dd4e02bae6465941334443.png)
文章图片
然后使用浏览器访问这个生成的url:http://api.tp6.com:8000/
可以发现弹出这个窗口:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/e3db52fa219a4f4d919422160deb3abd.png)
文章图片
点击accept即可,然后发现php程序停在了断点:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/55d8c64ef877468780e4ec0621b9b838.jpg)
文章图片
终于,我们实现了对php框架代码的单步调试,框架中使用的变量等信息也可以查看了,这比使用
var_dump
等打印的方式一次一调的方式强太多了!二、JavaScript程序的调试 这里使用到的代码调试工具为Chrome,首先先编写一小段js程序:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/a2354841d81b46f494ee77d1397e8dc8.jpg)
文章图片
然后使用浏览器打开这个html文件:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/77e2f5a216f14175b38d1a9b3ab9fc5d.jpg)
文章图片
此时按下F12打开调试工具,选择Sources栏:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/1201ecc007d2448981d58b2974bcb88b.jpg)
文章图片
选择了对应的文件后,我们可以看到刚刚编写的js代码,然后我们可以在对应的行号上打上断点,如:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/195b9126bc1842bca8f2e17da44cc168.jpg)
文章图片
然后刷新页面,可以看到js程序停在了断点:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/f5f088d8fa9749f980d90a7afb585c51.jpg)
文章图片
此时,我们可以在右边栏查看变量等各种信息:
![PHP、TP6框架及JavaScript的单步调试](https://img.it610.com/image/info8/cc4fb8c981244e128f623ead8b8f6834.jpg)
文章图片
至此我们已实现了对js程序的调试。
三、总结 【PHP、TP6框架及JavaScript的单步调试】本文实现了对PHP程序及JavaScript程序的单步调试,虽然就PHP和JavaScript程序而言,我们大多数情况都可以使用打印大法,如:
console.log()
、echo
、var_dump()
来进行调试,但遇到一些棘手的问题时,单步调试可以一次性解决大部分的bug,大大缩短解决问题的时间,应该是不可缺少的重要工具,因此特地开贴记录在PHP和JavaScript项目中这一重要工具的配置方法。推荐阅读
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- Shell-Bash变量与运算符
- 清明,是追思、是传承、是感恩。
- 牛人进化+|牛人进化+ 按自己的意愿过一生
- 七老修复好敏感、角质层薄、红血丝
- 华为旁!大社区、地铁新盘,佳兆业城市广场五期!
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 螃蟹和这些食物同吃,轻则腹泻、重则中毒!要小心哦~
- 八、「料理风云」