使用Visual Studio Code搭建PHP调试环境

 1.需要安装的软件

    Visual Studio Code、

    WAMP(包括Apache、MySQL、PHP、以及最关键的XDebug)

2.下载软件

     Visual Studio Code,光看名字就知道是微软的作品,简单理解就是 一个可以书写以及调试代码的编辑器,即Visual Studio的清凉版(竞争对手为Notepad++, Sublime Text),官网

      使用Visual Studio Code搭建PHP调试环境_第1张图片

      这里下载的是Windows下的安装包版本VSCodeSetup-1.8.1.exe

 

      而WAMP是Windows下的PHP开发整合工具包(Linux下为LAMP),主要集成了Apache、MySQL、PHP和调试用的XDebug, 对于懒人来说是个很好的工具包,安装包了就可以用了,不用担心配置Apache和PHP以及,担心下载到的XDebug与PHP版本不兼容之类的问题

      官网 如下:

   使用Visual Studio Code搭建PHP调试环境_第2张图片

   点击Download下载最新的版本,这里下载的是64位的3.0.6版本

3.安装

     3.1.安装WAMP,由于最新版需要依赖VC++ 2012和VC++ 2015类库,如果不安装就会出现一些错误提示:

     使用Visual Studio Code搭建PHP调试环境_第3张图片

     或者

  使用Visual Studio Code搭建PHP调试环境_第4张图片

     下载 VC++2012 和 VC++2015 安装上就好了

      官网上的截图:

     使用Visual Studio Code搭建PHP调试环境_第5张图片

 

        使用Visual Studio Code搭建PHP调试环境_第6张图片

      安装的截图:

   使用Visual Studio Code搭建PHP调试环境_第7张图片

        使用Visual Studio Code搭建PHP调试环境_第8张图片

      在安装WAMP的过程中,还会询问你是否需要修改WAMP所默认的浏览器和编辑器,这个自己决定。

            检查是否WAMP是否安装成功:

         使用Visual Studio Code搭建PHP调试环境_第9张图片

          双击打开WAMP,会在右下角的任务栏看到它的图标,如果是绿色代表OK, 其他颜色都有问题,鼠标左键点击就会出现菜单,

         点击菜单中的Localhost,如果出现以下页面,代表安装成功:

        使用Visual Studio Code搭建PHP调试环境_第10张图片

    

                  3.2.安装Visual Studio Code,

            双击下载到的软件,一直默认即可

4.配置

         4.1.由于调试的关键是XDebug,所以先配置XDebug,打开php.ini配置文件,搜索XDebug

   使用Visual Studio Code搭建PHP调试环境_第11张图片

        可以看到默认的xdebug远程调用的关闭的,修改如下:

    将remote_enable改为on,并增加xdebug.remote_autostart = on

1 xdebug.remote_enable = on
2 xdebug.remote_autostart = on

    由于xdebug默认的运行时间是120秒,超过120秒会自动停止,所以可以根据需求修改 max_execution_time

1 max_execution_time = 120

 

         4.2. 配置Visual Studio Code,

          由于Visual Studio Code执行php代码,需要指定php的路径,不然会出现如下提示,

  使用Visual Studio Code搭建PHP调试环境_第12张图片

       所以设置如下:文件->首选项->用户设置

       使用Visual Studio Code搭建PHP调试环境_第13张图片

         发现设置文件是个json格式的文件,叫settings.json, 搜索php. 

      使用Visual Studio Code搭建PHP调试环境_第14张图片

          选中第二项,"php.validate.executablePath":null, 会出现个小笔,点击一下,在点击复制到设置,就会在右边的文件里出现

     使用Visual Studio Code搭建PHP调试环境_第15张图片

      然后将php.exe的路径复制进去即可,特别注意,这里的路径分隔符是反斜杠:

      使用Visual Studio Code搭建PHP调试环境_第16张图片

      最终配置内容如下:

      使用Visual Studio Code搭建PHP调试环境_第17张图片

       ctrl + S保存即可

 

          4.3.安装php debug插件,切换到扩展(Extension)界面,拉动滚动条,选择PHP Debug,点击安装,成功后点击重新载入

       使用Visual Studio Code搭建PHP调试环境_第18张图片

       重新载入,即重启Visual Studio Code

   使用Visual Studio Code搭建PHP调试环境_第19张图片

    如果切换到扩展没有出现插件列表,可以如此操作:点击右上角的省略号,然后选择显示常用的扩展

  使用Visual Studio Code搭建PHP调试环境_第20张图片

        特别说明,PHP Debug必须通过打开文件夹中的文件才能调试,直接在VSC中新建的文件是调试不了的:

    使用Visual Studio Code搭建PHP调试环境_第21张图片

        这里有说到,要打开文件夹以启动调试

            

      4.4. 配置PHP Debug

           这里说明一下,WAMP的默认工作目录,在其安装目录的www文件夹,平时只需要在里面创建php文件,就能

    通过在浏览器中输入 localhost/xxx.php来访问,所以这里就直接打开www文件夹,并在其中创建一个hello.php文件

    使用Visual Studio Code搭建PHP调试环境_第22张图片

           hello.php的代码如下:只有一句,就是输出 Hello World!

php
    echo 'Hello World!';
?>

    切换到调试Debug界面,首先设置成PHP语言环境

     使用Visual Studio Code搭建PHP调试环境_第23张图片

          然后选择Listen for XDebug,这里就是一开始修改php.ini文件的原因,只有开启XDebug远程调试,这里才能识别到

         使用Visual Studio Code搭建PHP调试环境_第24张图片

             在代码中打一个断点,然后按下 F5启动调试工具(不是运行php文件);

             最后在浏览器中输入hello.php的访问路径,然后就可以看到刚刚设置的断点并命中了

            使用Visual Studio Code搭建PHP调试环境_第25张图片

 

     =================================================================

 5.总结

         首先要安装php的开发环境包括xDebug(这里推荐WAMP,傻瓜式,哈哈), 然后安装Visual Studo Code;

   通过修改php.ini来启动xDebug的远程调试,以便让PHP debug检车到;

   配置Visual Studio Code中php.exe的路径;

     安装PHP Debug, 并配置好;

   通过打开www文件夹,设置好断点,并通过F5启动debug环境;

   最后在流量器中访问需要调试的php文件。

你可能感兴趣的:(使用Visual Studio Code搭建PHP调试环境)